#【Three.js基础入门教程：玩转3D立方体】

2024-01-05 23:00:03

玩转3D立方体：Three.js基础入门教程

踏上Three.js的奇幻之旅，构建属于你的互动3D世界！让我们从最基本的元素——立方体开始，一步步探索Three.js的奥秘。

1. 场景：3D世界的舞台

想象一下一个舞台，它承载着演员、道具和灯光，创造了一个生动的世界。在Three.js中，场景扮演着同样的角色，它负责承载我们所有的3D物体。让我们创建一个场景，为我们的立方体提供一个展示的舞台吧！

// 创建场景
const scene = new THREE.Scene();

2. 相机：捕捉3D世界的视角

就像我们的眼睛捕捉真实世界的画面一样，相机负责将场景中的物体投射到屏幕上。Three.js提供多种相机类型，让我们选择一种适合的相机，让我们的立方体成为屏幕中央的焦点。

// 创建透视相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 将相机放置在场景中
camera.position.z = 5;

3. 渲染器：将3D世界呈现出来

渲染器就像一台魔法机器，将相机捕获的场景渲染成我们看到的图像。Three.js提供了多种渲染器，让我们选择一种高效、兼容性强的渲染器，让我们的立方体在屏幕上闪耀。

// 创建渲染器
const renderer = new THREE.WebGLRenderer();

// 设置渲染器大小
renderer.setSize(window.innerWidth, window.innerHeight);

// 将渲染器添加到文档中
document.body.appendChild(renderer.domElement);

4. 立方体：3D世界的基本元素

现在，让我们创造我们的第一个3D物体——立方体。通过简单的代码，我们可以在场景中创建一个立方体，它是构成3D世界最基本元素。

// 创建立方体几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建立方体材质
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});

// 创建立方体网格对象
const cube = new THREE.Mesh(geometry, material);

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

5. 材质：赋予立方体生命力

材质决定了立方体的表面外观，是赋予其生命力的关键。让我们为立方体添加材质，让它看起来更加真实、有质感。

// 创建纹理贴图
const texture = new THREE.TextureLoader().load('path/to/texture.jpg');

// 创建材质，并应用纹理
const material = new THREE.MeshBasicMaterial({map: texture});

// 应用材质到立方体
cube.material = material;

6. 光照：点亮3D世界

光照是3D世界不可或缺的元素，它决定了立方体的阴影和高光，让它更加立体、逼真。让我们为场景添加光照，让我们的立方体在虚拟世界中熠熠生辉。

// 创建环境光
const ambientLight = new THREE.AmbientLight(0x404040, 1);

// 创建点光源
const pointLight = new THREE.PointLight(0xffffff, 1, 100);

// 将光源添加到场景中
scene.add(ambientLight, pointLight);

7. 动画：让立方体动起来

现在，让我们让我们的立方体动起来，赋予它生命和活力。通过简单的代码，我们可以让立方体旋转、移动，甚至跳跃，让它在3D世界中翩翩起舞。

// 定义旋转角
const angle = 0.01;

// 创建动画函数
function animate() {
  requestAnimationFrame(animate);

  // 旋转立方体
  cube.rotation.x += angle;
  cube.rotation.y += angle;

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

// 启动动画
animate();

8. 交互：让用户掌控3D世界

为了让用户能够与我们的立方体进行互动，我们需要为立方体添加事件监听器，让它响应用户的操作，例如点击、拖动和缩放。

// 添加点击事件监听器
cube.addEventListener('click', () => {
  // 立方体被点击时执行的操作
});

// 添加拖动事件监听器
cube.addEventListener('drag', () => {
  // 立方体被拖动时执行的操作
});

// 添加缩放事件监听器
cube.addEventListener('scale', () => {
  // 立方体被缩放时执行的操作
});