返回

动手学 Three.js（一）：起步指南

前端

准备踏上 Three.js 的奇妙之旅了吗？在这个系列教程的第一部分，我们将为你揭开 Three.js 神秘的面纱，带你建立一个简约的场景，并体验它的迷人魅力。

Three.js 的魅力

Three.js 是一个基于 WebGL 的 JavaScript 库，让你能够创建引人入胜的 3D 场景。WebGL 是一种强大的图形 API，允许你直接访问计算机的图形卡，从而实现令人惊叹的视觉效果。

起步

要开始使用 Three.js，首先需要创建一个新的项目。我们将使用 Vite，这是一个现代化的构建工具，它可以简化你的开发流程。

npx create-vite-app threejs-project --template threejs

安装完成后，进入项目目录并启动开发服务器：

cd threejs-project
npm run dev

现在，我们准备在 src/main.js 文件中编写我们的代码。

建立场景

场景是 Three.js 中用来容纳所有 3D 对象的容器。要创建一个场景，使用以下代码：

const scene = new THREE.Scene();

接下来，我们需要一个渲染器，它将场景转换为可以在浏览器中显示的图像。

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

添加相机

相机决定了场景中物体的视角。我们将使用透视相机，它可以模拟人眼的视角。

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

创建立方体

现在，让我们添加一个简单的对象，一个立方体，到场景中。

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

渲染

最后，我们需要渲染场景，将它呈现在浏览器中。

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

总结

恭喜你完成了你的第一个 Three.js 场景！现在你已经了解了 Three.js 的基本概念，并在未来的教程中，我们将深入探究更高级的特性。

资源