Three.js 深入探究：几何体的奇妙变化

2023-12-27 07:29:33

Three.js 学习 (二)：变化的几何体

引言

继续我们对 Three.js 的探索，这次我们将深入研究几何体的变化，探索如何使用 Three.js 赋予场景中的对象以生命力。从缩放和旋转到变形和动画，几何体变换为创建动态且引人入胜的 3D 场景提供了无穷的可能性。

摄像机：正交投影相机

在进入几何体变换之前，让我们快速了解一下正交投影相机 OrthographicCamera。这种投影模式会产生平行射线的视图，无论对象与相机的距离如何，都会以相同的尺寸呈现对象。这与透视投影不同，透视投影会模拟人眼的透视效果，使较远的物体看起来比较近的物体小。

变换类型

Three.js 提供了多种几何体变换方法，包括：

缩放： scale.x、scale.y 和 scale.z 属性允许你缩放对象沿着各个轴。
旋转： rotation.x、rotation.y 和 rotation.z 属性控制对象绕各个轴的旋转。
平移： position.x、position.y 和 position.z 属性允许你移动对象在场景中的位置。
变形： Three.js 提供了多种变形方法，如 BufferGeometry.applyMatrix4() 和 BufferGeometry.computeVertexNormals()。

示例代码：旋转立方体

让我们使用一个简单的代码示例来演示几何体变换。我们创建一个立方体，并使其围绕 y 轴旋转：

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

const animate = () => {
  requestAnimationFrame(animate);

  // 每帧旋转立方体
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
};

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

animate();