1. 安装 Node.js 和 npm
首先，需要在您的计算机上安装 Node.js 和 npm。Node.js 是一个 JavaScript 运行环境，而 npm 是一个 JavaScript 包管理器。npm 会随 Node.js 一起安装，因此只需要安装 Node.js 即可。从 Node.js 的官方网站(https://nodejs.org)下载并安装适合您操作系统的版本。
2. 创建一个新的项目
在您希望创建项目的目录下，手动创建一个文件夹，在终端(命令提示符)中输入：cd 空格 把文件夹拖进去，回车，这里假设项目名称为 "threejs-project"，进入新创建的项目文件夹：
cd threejs-project
3. 初始化 npm
在项目文件夹中，使用以下命令来初始化 npm。这将创建一个新的 package.json 文件，这个文件描述了项目的一些基本信息以及依赖关系：
npm init -y
-y 参数意味着接受所有默认选项。
4. 安装 three.js
使用以下命令来安装 three.js：
npm install three
这将把 three.js 安装到项目的 node_modules 文件夹中，并将其添加到 package.json 文件的依赖项中。
5. 创建 index.html 文件
在项目文件夹中，创建一个名为 index.html 的新文件。这将是您的项目的主页。以下是一个基本的 HTML 模板：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js project</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="app.js"></script>
</body>
</html>
6. 创建 app.js 文件
在项目文件夹中，创建一个名为 app.js 的新文件。这将是您的项目的主 JavaScript 文件。您可以在这个文件中编写您的 three.js 代码。下面是一个简单的示例：
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
const animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
7. 运行项目
你需要一个 JavaScript 打包工具，如 webpack 或 Parcel，以正确处理这些模块的导入。这些工具可以解析 Node.js 风格的 import 语句，并生成适合在浏览器中运行的文件。
Parcel用法更简单一点，安装过程如下：
-
安装 Parcel：在终端中运行以下命令：
npm install -D parcel-bundler -
更新
package.json文件以使用 Parcel 来启动你的项目。在 "scripts" 部分添加一个 "start" 脚本："scripts": { "start": "parcel index.html" }, -
现在你可以通过运行以下命令来启动你的项目：
npm start
Parcel 会自动解析你的 import 语句并启动一个开发服务器。
恭喜！您现在已经设置好了一个基本的 three.js 项目。以上的示例代码创建了一个旋转的绿色立方体。
