Three.js - Hello Cube 应用

Three.js - 你的第一个 3D 场景：“Hello, Cube!”

遵循“Hello, World!”的传统，我们将通过创建一个包含单个旋转立方体的简单场景，开启 Three.js 之旅。这将介绍任何 Three.js 应用程序的基本概念和构建块。

现代项目设置

虽然您可以使用简单的 <script> 标签来引入 Three.js，但现代工作流使用包管理器（如 npm）和构建工具（如 Vite）。这为您提供了本地开发服务器、自动页面重载和轻松的依赖管理。

安装 Node.js： 如果您尚未安装，请从 nodejs.org 下载并安装。
创建项目： 打开您的终端，导航到一个新文件夹，然后运行 npm init -y。这将创建一个 package.json 文件。
安装依赖项： 运行 npm install three 以获取 Three.js 库。
设置开发服务器（可选但强烈推荐）： 运行 npm install --save-dev vite。然后，将以下内容添加到您的 package.json 的 "scripts" 部分："dev": "vite"。

HTML 文件 (`index.html`)

在您的项目根目录中创建一个简单的 index.html 文件。这将是我们的入口点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js - Hello Cube</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html, body {
            overflow: hidden;
        }
        .webgl {
            position: fixed;
            top: 0;
            left: 0;
            outline: none;
        }
    </style>
</head>
<body>
    <canvas class="webgl"></canvas>
    <script type="module" src="./src/main.js"></script>
</body>
</html>

关键点：我们有一个 <canvas> 元素，场景将在此处渲染；我们使用 type="module" 链接到一个 JavaScript 文件 (./src/main.js)，以启用现代 ES6 模块导入。

JavaScript 文件 (`src/main.js`)

创建一个 src 文件夹并在其中创建一个 main.js 文件。这里将存放我们的 Three.js 代码。每个 Three.js 应用程序都需要三个核心组件：

场景 (Scene)： 容纳所有对象、光源和相机的容器。
相机 (Camera)： 观察场景的视角。
渲染器 (Renderer)： 根据相机的视角，将场景绘制到 canvas 上的引擎。

import * as THREE from 'three';

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

// 2. 立方体（场景中的一个对象）
const geometry = new THREE.BoxGeometry(1, 1, 1); // 形状
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true }); // 外观
const cube = new THREE.Mesh(geometry, material); // 最终对象
scene.add(cube);

// 尺寸
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
};

// 3. 相机
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100);
camera.position.z = 3;
scene.add(camera);

// 4. 渲染器
const canvas = document.querySelector('canvas.webgl');
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

// 初始渲染
renderer.render(scene, camera);

赋予生命：动画

要让立方体旋转，我们需要一个动画循环。我们使用 window.requestAnimationFrame()，它会告诉浏览器在下一次重绘之前调用一个函数来更新屏幕。这比简单的 setInterval 更高效。

// ... (之前的代码)

// 动画循环
const clock = new THREE.Clock();

const animate = () => {
    // 获取经过的时间
    const elapsedTime = clock.getElapsedTime();

    // 更新立方体旋转
    cube.rotation.x = elapsedTime;
    cube.rotation.y = elapsedTime;

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

    // 请求下一帧
    window.requestAnimationFrame(animate);
};

// 启动动画
animate();

响应式设计

如果用户调整浏览器窗口大小，我们的场景会看起来失真。我们需要监听 resize 事件并更新相机的宽高比和渲染器的大小。

// ... (在动画循环之前)

window.addEventListener('resize', () => {
    // 更新尺寸
    sizes.width = window.innerWidth;
    sizes.height = window.innerHeight;

    // 更新相机宽高比
    camera.aspect = sizes.width / sizes.height;
    camera.updateProjectionMatrix();

    // 更新渲染器尺寸
    renderer.setSize(sizes.width, sizes.height);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});

运行应用

如果您设置了 Vite，现在可以在终端中运行 npm run dev。这将启动一个本地服务器，您可以在浏览器中打开提供的 URL（例如，http://localhost:5173）以查看您的旋转立方体！您保存的任何文件更改现在都会自动更新页面。