Three.js深入揭秘：TRS和3D模型动画系统

前端

2023-12-31 16:38:02

探索 Three.js 的 TRS 系统：为虚拟世界注入生机

Three.js，JavaScript 中的 3D 神兵利器，以其灵活性以及强大的 3D 模型动画功能而备受青睐。其中，Three.js 的 TRS（平移、旋转、缩放）系统可谓是点睛之笔，赋予了 3D 模型栩栩如生的动态效果。

TRS：3D 模型操纵的利刃

TRS 系统为我们提供了三个强大的工具：

平移 (Translation)： 轻而易举地将 3D 模型从一个空间移动到另一个空间。
旋转 (Rotation)： 围绕任意轴线旋转 3D 模型，改变其朝向。
缩放 (Scale)： 灵活调整 3D 模型的大小，放大或缩小其体积。

有了这三大法宝，3D 模型仿佛有了生命，在三维空间中自如穿梭，展现出千姿百态的动作和表情。

高级特性：赋予 TRS 更强大的能量

Three.js 的 TRS 系统还提供了许多高级特性，拓展了它的功能：

局部空间和世界空间： 同时操控 3D 模型在局部空间和世界空间中的 TRS 属性，实现更精细的控制。
镜像对象： 通过负向缩放轴，轻松实现 3D 模型的镜像，赋予其更多可能性。
组合变换： 将平移、旋转和缩放组合使用，创造出更加复杂和流畅的动画效果。

示例代码：

// 创建一个场景和相机
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 创建一个立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);

// 设置立方体的初始位置、旋转和缩放
cube.position.set(0, 0, 0);
cube.rotation.set(0, 0, 0);
cube.scale.set(1, 1, 1);

// 将立方体添加到场景中
scene.add(cube);

// 渲染场景
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 循环渲染场景，实现动画效果
function animate() {
  requestAnimationFrame(animate);

  // 使用 TRS 系统更新立方体的变换
  cube.position.x += 0.01; // 平移
  cube.rotation.y += 0.01; // 旋转
  cube.scale.x += 0.01; // 缩放

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

animate();