第二章：Three.js 环境搭建_npm i three.js

作者：秋刀鱼在做梦 | 2024-07-13 21:05:56

踩

npm i three.js

第二章：环境搭建

本章将详细介绍如何搭建 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
1
2
```
如果正确安装，会显示 Node.js 和 npm 的版本号。

2.1.2 安装 npm 包

npm 包是 Node.js 的核心组成部分，可以通过 npm 轻松安装和管理项目依赖。

创建一个新的项目文件夹，例如 threejs-project。
```
mkdir threejs-project
cd threejs-project
1
2
```
初始化 npm 项目，生成 package.json 文件：
```
npm init -y
1
```
安装 Three.js：
```
npm install three
1
```

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
1
2
3

配置 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>
1
2
3
4
5
6
7
8
9
10
11

配置 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();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

使用简单的 HTTP 服务器运行项目：

安装 http-server：
```
npm install -g http-server
1
```
在项目根目录运行：
```
http-server src
1
```
打开浏览器访问 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

使用简单的 HTTP 服务器运行项目：
```
http-server src
1
```
打开浏览器访问 http://localhost:8080，你应该能看到一个旋转的绿色立方体。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/秋刀鱼在做梦/article/detail/821559