three.js入门之旅：解锁3D图形的新世界（二）

2024-01-10 01:32:23

three.js入门（二）

大家好，欢迎来到three.js入门之旅的第二篇。在上期中，我们了解了three.js的基础概念以及如何创建场景、灯光、相机、模型、渲染器等内容，以及如何将场景中的内容渲染到页面元素上。本期，我们继续探索three.js的神奇世界，将简单了解一下组、关键帧动画的创建和模型的导入。

一、组（Group）

组（Group）在three.js中用于对场景中的对象进行分组管理。可以将多个对象添加到组中，然后对组进行操作，这样就可以同时操作组中的所有对象。例如，我们可以将场景中的所有模型添加到一个组中，然后对这个组进行旋转或平移，这样就可以同时旋转或平移组中的所有模型。

// 创建一个组
const group = new THREE.Group();

// 将模型添加到组中
group.add(model1);
group.add(model2);
group.add(model3);

// 将组添加到场景中
scene.add(group);

// 旋转组
group.rotation.y += 0.01;

// 渲染场景
renderer.render(scene, camera);

二、关键帧动画（Keyframe Animation）

three.js提供了关键帧动画的功能，可以为场景中的对象创建动画。关键帧动画是指动画的开始和结束状态由关键帧定义，在关键帧之间，对象的属性会根据一定的插值函数进行变化，从而产生动画效果。

// 创建一个关键帧动画
const animation = new THREE.Animation(object, 'position');

// 添加关键帧
animation.addKeyframe(0, object.position);
animation.addKeyframe(1, new THREE.Vector3(10, 10, 10));

// 启动动画
animation.play();

// 渲染场景
renderer.render(scene, camera);

三、模型导入（Model Loading）

three.js支持导入各种3D模型格式，包括OBJ、FBX、GLTF等。我们可以通过加载器（Loader）来导入模型。

// 创建一个加载器
const loader = new THREE.GLTFLoader();

// 加载模型
loader.load('path/to/model.gltf', (gltf) => {
  // 将模型添加到场景中
  scene.add(gltf.scene);

  // 渲染场景
  renderer.render(scene, camera);
});