Three.js矩阵库中的旋转与平移之密钥

2023-10-22 20:37:23

Three.js 中的旋转和平移：赋予 3D 模型以生机

在 Three.js 的虚拟世界中，矩阵扮演着至关重要的角色。它们是一组数字，可以对象在三维空间中的各种变换，包括旋转、平移、缩放和剪切。掌握这些变换对于创建逼真的 3D 场景至关重要。

其中，旋转和平移是使用频率最高的两种变换。旋转可以使对象绕着某个轴旋转一定角度，平移可以使对象沿某个方向移动一定距离。下面，我们将深入探讨这两种变换及其在 Three.js 中的使用方法。

旋转：让对象舞动起来

旋转是 Three.js 提供的两种旋转方法：rotateX() 和 rotateY()。rotateX() 可以使对象绕着 X 轴旋转一定角度，而 rotateY() 可以使对象绕着 Y 轴旋转一定角度。

语法如下：

object.rotateX(radians);
object.rotateY(radians);

其中，radians 是旋转角度，以弧度为单位。

代码示例：

const cube = new THREE.Mesh(geometry, material);
cube.rotateX(Math.PI / 4); // 绕 X 轴旋转 45 度

平移：让对象穿梭空间

平移也是 Three.js 提供的两种平移方法：translateX() 和 translateY()。translateX() 可以使对象沿 X 轴移动一定距离，而 translateY() 可以使对象沿 Y 轴移动一定距离。

语法如下：

object.translateX(distance);
object.translateY(distance);

其中，distance 是平移距离，以单位长度为单位。

代码示例：

const cube = new THREE.Mesh(geometry, material);
cube.translateX(1); // 沿 X 轴移动 1 个单位

实践：让立方体旋转和平移

现在，让我们通过一个实际示例来展示如何使用旋转和平移方法为一个立方体赋予生机。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);

scene.add(cube);
camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  cube.position.x += 0.01;
  cube.position.y += 0.01;

  renderer.render(scene, camera);
}

animate();