Three.js结合Vite开发第一个场景

上节我们对Three.sj的概念有了基本的了解，本节通过实际代码，初体验Three.js的开发过程。在现代 Web 开发中，我们不再推荐直接在 HTML 中引入 <script> 标签，而是使用更高效的构建工具。本节我们将使用 Vite —— 目前前端界最快、最轻量的构建工具。

为什么选择Vite？

在 Three.js 开发中，使用 Vite 这样的构建工具有几个巨大的优势：

模块化开发 (ES Modules)：我们可以把代码拆分成多个文件（如 Scene.js, Camera.js, Cube.js），方便管理。
热更新 (HMR)：修改代码后，浏览器毫秒级更新，调整材质和动画参数时无需手动刷新页面，体验极佳。
资源处理：Vite 能自动处理 .glb, .png, .hdr 等 3D 资源的路径和打包问题。

第一步：初始化 Vite 项目

WARNING

首先，确保你的电脑上安装了 Node.js，版本视当前所用的Vite决定。

打开终端（命令行），运行以下命令来创建一个纯净的 JavaScript 项目：

bash

# 创建项目文件夹并进入
mkdir three-app

# 进入文件夹
cd three-app

# 初始化 Vite 项目（选择 Vanilla JS 即可，不需要 React/Vue）
npm create vite@latest . -- --template vanilla

# 安装依赖
npm install

# 安装 Three.js 核心库
npm install three

第二步：清理工程

Vite 默认生成的模板包含一些示例代码，我们需要清理一下，只保留最基础的结构。

1、打开 index.html，将div#app改为div#webgl，它将作为我们 canvas 的容器：

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>three-app</title>
  </head>
  <body>
    <canvas id="webgl"></canvas>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

2、打开 src/style.css，清空内容，只写入最基础的重置样式：

css

html,
body,
#webgl {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

3、清空 src/main.ts 中的内容，注意保留import './style.css'。

4、删除src/counter.js文件。

第三步：编写代码 Hello Cube

现在，我们在 src/main.js 中编写Three.js代码，实现一个自动旋转的立方体。

javascript

import "./style.css";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

// 初始化相机、场景、渲染器等
const canvas = document.getElementById("webgl");
const camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 3000);
camera.position.set(100, 100, 100);
camera.lookAt(0, 0, 0);

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

// 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

// 创建控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.update();

// 创建一个简单的立方体
const geometry = new THREE.BoxGeometry(10, 10, 10);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  controls.update();
  // 让立方体旋转起来
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}

animate();

行 npm run dev，打开浏览器，你应该能看到一个正在旋转的绿色立方体了！

hello-threejs示例图片

后面的示例我们将基于这个模板，探索Three.js的更多知识。

本节代码下载

本节总结

本节通过vite初始化了工程，并搭建了最简化的Three.js场景示例，让读者对Three.js开发有一个直观的认识，在下节中我们将学习Three.js的坐标系，并认识一些辅助工具，有利于后续开发中排查问题。

Three.js结合Vite开发第一个场景 ​

为什么选择Vite？ ​

第一步：初始化 Vite 项目 ​

第二步：清理工程 ​

第三步：编写代码 Hello Cube ​