- 安装 Node.js 和 npm（如果尚未安装）
- Node.js 介绍：Three.js 项目通常依赖于 Node.js 环境，因为它可以帮助管理项目的依赖包。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，它允许在服务器端运行 JavaScript 代码。
- 安装步骤：
- 访问 Node.js 官方网站（https://nodejs.org/）。
- 根据你的操作系统（Windows、Mac 或 Linux）下载对应的安装程序。
- 运行安装程序，按照提示完成安装。安装完成后，你可以在命令行中输入
node -v和npm -v来验证是否安装成功，它们会分别显示 Node.js 和 npm 的版本号。
- 创建项目目录并初始化项目
- 创建目录：在你的本地磁盘上创建一个新的文件夹作为 Three.js 项目的根目录，例如
my - threejs - project。 - 初始化项目：打开命令行工具（如 Windows 的 CMD 或 PowerShell，Mac 和 Linux 的终端），进入到刚刚创建的项目目录，然后运行
npm init -y命令。这个命令会在项目目录中创建一个package.json文件，它是 Node.js 项目的配置文件，记录了项目的名称、版本、依赖等信息。
- 安装 Three.js 库
- 使用 npm 安装：在项目目录下的命令行中运行
npm install three命令。这会将 Three.js 库及其相关的依赖包下载到项目的node_modules目录中。node_modules是 Node.js 项目存放所有依赖包的地方。 - 本地引用方式（可选）：如果你不想使用 npm 安装，也可以从 Three.js 官方网站（https://threejs.org/）下载 Three.js 的压缩文件（如
three.min.js），然后将其放置在项目目录下的一个合适位置（如js文件夹），并在 HTML 文件中通过<script>标签引用它，例如：<script src="js/three.min.js"></script>。不过这种方式在管理依赖和更新库时可能会比较麻烦。
- 创建基本的 HTML 文件来测试 Three.js
- 在项目目录下创建一个
index.html文件，内容如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Three.js Test</title> </head> <body> <script src="node_modules/three/build/three.min.js"></script> <script> // 创建一个场景 var scene = new THREE.Scene(); // 创建一个透视相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); // 创建一个渲染器 var renderer = new THREE.Renderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建一个立方体几何形状 var geometry = new THREE.BoxGeometry(1, 1, 1); // 创建一个基本材质 var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 创建一个网格（物体） var cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; var animate = function () { requestAnimationFrame(animate); cube.rotateX(0.01); cube.rotateY(0.01); renderer.render(scene, camera); }; animate(); </script> </body> </html>
- 在这个 HTML 文件中：
- 首先通过
<script>标签引用了安装在node_modules目录下的 Three.js 库。 - 然后在
<script>代码块中，创建了一个 Three.js 场景（Scene）、一个透视相机（PerspectiveCamera）和一个渲染器（Renderer）。 - 接着创建了一个立方体的几何形状（
BoxGeometry）和基本材质（MeshBasicMaterial），并将它们组合成一个网格（Mesh）对象添加到场景中。 - 设置了相机的位置，然后定义了一个
animate函数，在这个函数中，通过requestAnimationFrame实现动画循环，让立方体绕X轴和Y轴旋转，并使用渲染器将场景和相机的内容渲染到页面上。
- 在浏览器中查看效果
- 打开你喜欢的浏览器，在地址栏中输入
file:///path/to/your/index.html（将/path/to/your/替换为你实际的index.html文件路径），就可以看到一个简单的旋转立方体，这表明 Three.js 开发环境搭建成功并且可以正常工作了。
