第二章：环境搭建
本章将详细介绍如何搭建 Three.js 的开发环境，包括安装 Node.js 和 npm，配置 Three.js 项目，以及在 HTML 中引入 Three.js。
2.1 安装 Node.js 和 npm
Node.js 是一个开源的、跨平台的 JavaScript 运行时环境。npm 是 Node.js 的包管理工具，用于安装和管理 JavaScript 库和工具。
2.1.1 安装 Node.js
打开 Node.js 官网 nodejs.org。
下载并安装适合你操作系统的最新稳定版（LTS 版本）。
安装完成后，在命令行中输入以下命令，验证安装是否成功：
node -v
npm -v
如果正确安装，会显示 Node.js 和 npm 的版本号。
2.1.2 安装 npm 包
npm 包是 Node.js 的核心组成部分，可以通过 npm 轻松安装和管理项目依赖。
创建一个新的项目文件夹，例如 threejs-project。
mkdir threejs-project
cd threejs-project
初始化 npm 项目，生成 package.json 文件：
npm init -y
安装 Three.js：
npm install three
2.2 Three.js 的安装与配置
Three.js 可以通过 npm 安装，也可以直接在 HTML 中引用。我们将介绍这两种方法。
2.2.1 使用 npm 安装 Three.js
在上一步已经安装了 Three.js，现在我们可以配置项目结构。
创建项目结构：
mkdir src
touch src/index.html
touch src/main.js
配置 src/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 Project</title>
</head>
<body>
<script src=\”main.js\”></script>
</body>
</html>
配置 src/main.js 文件，引入 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);
camera.position.z = 5;
// 创建渲染器
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);
// 渲染函数
function animate() {
requestAnimationFrame(animate);
// 旋转立方体
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
使用简单的 HTTP 服务器运行项目：
安装 http-server：
npm install -g http-server
在项目根目录运行：
http-server src
打开浏览器访问 http://localhost:8080，你应该能看到一个旋转的绿色立方体。
2.2.2 在 HTML 中直接引用 Three.js
如果你不想使用 npm，可以直接在 HTML 文件中引用 Three.js。
下载 Three.js 库 three.js 并保存到项目目录。
修改 src/index.html 文件，引入 Three.js：
<!DOCTYPE html>
<html lang=\”en\”>
<head>
<meta charset=\”UTF-8\”>
<meta name=\”viewport\” content=\”width=device-width, initial-scale=1.0\”>
<title>Three.js Project</title>
<script src=\”three.min.js\”></script>
</head>
<body>
<script>
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建渲染器
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);
// 渲染函数
function animate() {
requestAnimationFrame(animate);
// 旋转立方体
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
使用简单的 HTTP 服务器运行项目：
http-server src
打开浏览器访问 http://localhost:8080，你应该能看到一个旋转的绿色立方体。
————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/imdeity/article/details/139550549
