从零开始探索 ThreeJS：创建场景到功能实现

2023-12-12 01:35:10

前言

ThreeJS 是一个强大的 JavaScript 3D 引擎，为创建交互式且引人入胜的 3D 体验提供了丰富的 API。本教程将带你从创建一个简单的场景开始，逐步探索 ThreeJS 的核心概念。我们将涵盖从添加 3D 对象到实现动画和交互的所有内容。

创建场景

任何 ThreeJS 应用程序的起点都是创建一个场景。场景是容纳所有 3D 对象和定义灯光、摄像机和其他属性的容器。要创建一个场景，只需创建一个 Scene 对象：

const scene = new THREE.Scene();

添加 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);

设置灯光

灯光对于为场景中的对象创建逼真的阴影和效果至关重要。ThreeJS 提供了多种灯光类型，包括：

const light = new THREE.DirectionalLight(0x00ff00, 1);
light.position.set(-1, 1, 1);
scene.add(light);

创建摄像机

摄像机定义了场景中观察者的位置和视角。ThreeJS 提供了多种摄像机类型，包括透视摄像机和正交摄像机。要创建一个透视摄像机：

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 1, 2);

渲染场景

要将场景渲染到屏幕上，需要一个渲染器。ThreeJS 提供了多种渲染器，包括 WebGLRenderer 和 CanvasRenderer。要创建一个 WebGLRenderer：

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

最后，使用 render 方法将场景渲染到屏幕上：

renderer.render(scene, camera);

动画和交互

要使场景具有交互性，可以使用各种技术。例如，要使立方体旋转：

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

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

  renderer.render(scene, camera);
};

animate();