Three.js 模型属性修改：位置、旋转、缩放

引言

Three.js 是一个功能强大的 JavaScript 库，它使我们能够轻松地在 Web 浏览器中创建和操作 3D 场景。了解如何修改模型的属性，例如其位置、旋转和缩放，对于构建动态且引人入胜的 3D 体验至关重要。

修改模型位置

要修改模型的位置，可以使用 position 属性。该属性是一个包含三个数字的矢量（x、y 和 z 坐标），表示模型的中心相对于场景原点的偏移量。以下示例演示了如何使用 position 属性设置模型的位置：

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

// 将模型移动到 (1, 2, 3) 的位置
cube.position.set( 1, 2, 3 );

// 将模型沿 x 轴移动 2 个单位
cube.position.x += 2;

// 将模型沿 y 轴移动 -1 个单位
cube.position.y -= 1;

// 将模型沿 z 轴移动 0.5 个单位
cube.position.z += 0.5;

修改模型旋转

要修改模型的旋转，可以使用 rotation 属性。该属性也是一个包含三个数字的矢量（x、y 和 z 坐标），表示模型围绕其局部坐标系的欧拉角旋转量。以下示例演示了如何使用 rotation 属性设置模型的旋转：

// 将模型绕 x 轴旋转 45 度
cube.rotation.x = Math.PI / 4;

// 将模型绕 y 轴旋转 -90 度
cube.rotation.y = -Math.PI / 2;

// 将模型绕 z 轴旋转 30 度
cube.rotation.z = Math.PI / 6;

修改模型缩放

要修改模型的缩放，可以使用 scale 属性。该属性是一个包含三个数字的矢量（x、y 和 z 坐标），表示模型在每个轴上的缩放因子。以下示例演示了如何使用 scale 属性设置模型的缩放：

// 将模型在每个轴上都缩放到 2 倍
cube.scale.set( 2, 2, 2 );

// 将模型沿 x 轴缩放到 1.5 倍
cube.scale.x = 1.5;

// 将模型沿 y 轴缩放到 0.5 倍
cube.scale.y = 0.5;

// 将模型沿 z 轴缩放到 1 倍（不变）
cube.scale.z = 1;

结论

了解如何修改 Three.js 中模型的位置、旋转和缩放是构建引人入胜的 3D 体验的基础。通过使用 position、rotation 和 scale 属性，我们可以轻松地将模型放置在场景中、旋转它们并调整它们的尺寸。通过结合这些属性，我们可以创建动态的 3D 对象，它们可以响应用户交互或改变场景条件。