文章同步更新于我的个人博客：松果猿的博客，欢迎访问获取更多技术分享。

同时，您也可以关注我的微信公众号：松果猿的代码工坊，获取最新文章推送和编程技巧。

记录本人three.js的学习之路

前言：

Three.js其实也不是我才开始接触，之前做过一个参赛项目就用到了three.js技术，但是除了three.js，还有许多其他优秀的Web3D技术解决方案，比如说Babylon.js。最近Babylon.js也在雄起，大有赶超three.js之势，不过目前最普及受众最广的还是three.js

Three.js资源包：直接去github上下载

1
2
3
4
5
6
7
8
9
10
11
12
13
目录信息：
three.js-文件包
└───build——three.js相关库，可以引入你的.html文件中。
    │
└───docs——Three.js API文档文件
    │───index.html——打开该文件，本地离线方式预览threejs文档
└───examples——大量的3D案例，是你平时开发参考学习的最佳资源
    │───jsm——threejs各种功能扩展库
└───src——Three.js引擎的源码，有兴趣可以阅读。
    │
└───editor——Three.js的可视化编辑器，可以编辑3D场景
    │───index.html——打开应用程序

引入three.js

1.使用 NPM 和构建工具进行安装

为了方便学习直接使用 Vite 初始化工程，我们后面学习也是以这种简单的构建方法来进行的

1
npm install vite --save-dev

安装three.js

1
npm install --save three

2.在.html文件中直接引入threejs

将three.js资源包里的build目录放入项目中

1
2
3
4
5
6
7
8
<script src="./build/three.js"></script>

//或者

<script type="module">
// 现在浏览器支持ES6语法，自然包括import方式引入js文件
import * as THREE from './build/three.module.js';
</script>

创建一个初始场景

安装后three.js，在我们的根目录下新建index.html

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite_Threejs</title>
</head>
<body>
    
</body>
</html>

新建main.js

1
import * as THREE from 'three';

首先一个three.js场景，最重要的三个要素是：场景（scene）、相机（camera）和渲染器（renderer）

1
2
3
4
5
6
// 创建一个新的Three.js场景
const scene = new THREE.Scene();
// 创建透视相机，设置视场角，宽高比，近裁剪面和远裁剪面
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
// 创建WebGL渲染器
const renderer = new THREE.WebGLRenderer();

设置摄像机的位置

1
camera.position.z = 5;

设置渲染器的尺寸为窗口的宽度和高度

1
renderer.setSize( window.innerWidth, window.innerHeight );

将渲染器的DOM元素添加到文档的主体中

1
document.body.appendChild( renderer.domElement );

场景创建完成后，还需要添加点东西进去吧

添加一个物体

three.js提供了许多现成的简单模型供我们调用，这样就不用像原生WebGL写一大堆繁琐的代码才能渲染一个简单图形

首先这个物体需要一个结构

1
2
//创建一个立方体几何体
const geometry = new THREE.BoxGeometry( 1, 1, 1 );

当然，这个立方体还需要颜色材质

1
2
//创建一个绿色的颜色材质
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

将两者结合吧

1
2
// 用几何体和材质创建一个网格对象
const cube = new THREE.Mesh( geometry, material );

添加到场景里

1
scene.add( cube );

你以为这就完了？不不不，还有最后一步，我们就成功创建好这个工程了

渲染场景

在3D图形和动画中，场景需要不断更新以反映时间的变化，例如物体的移动、摄像机的变化、光照效果等，这时候就需要我们创建一个动画循环，这个循环能够不断地更新和渲染场景

1
2
3
4
5
6
7
8
9
// 定义渲染循环函数
function render() {
  // 渲染场景
  renderer.render( scene, camera );
  // 调用requestAnimationFrame函数，在下一帧渲染
  requestAnimationFrame( render );
}
// 调用渲染循环函数
render();

让我们使其动起来

1
2
3
4
5
6
7
8
9
10
11
12
// 定义渲染循环函数
function render() {
  // 渲染场景
  renderer.render(scene, camera);
  // 更新立方体的旋转角度
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  // 调用requestAnimationFrame函数，在下一帧渲染
  requestAnimationFrame(render);
}
// 调用渲染循环函数
render();

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite_Threejs</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <script type="module" src="main.js"></script>
</body>
</html>

main.js

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
import * as THREE from "three";

// 创建一个新的Three.js场景
const scene = new THREE.Scene();
// 创建透视相机，设置视场角，宽高比，近裁剪面和远裁剪面
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
// 创建WebGL渲染器
const renderer = new THREE.WebGLRenderer();

// 设置摄像机的位置
camera.position.z = 5;
// 设置渲染器的尺寸为窗口的宽度和高度
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器的DOM元素添加到文档的主体中
document.body.appendChild(renderer.domElement);

// 创建一个立方体几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建一个基本材料并设置颜色
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 用几何体和材质创建一个网格对象
const cube = new THREE.Mesh(geometry, material);
// 将立方体添加到场景中
scene.add(cube);

// 定义渲染循环函数
function render() {
  // 渲染场景
  renderer.render(scene, camera);
  // 更新立方体的旋转角度
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  // 调用requestAnimationFrame函数，在下一帧渲染
  requestAnimationFrame(render);
}
// 调用渲染循环函数
render();

运行！！！

1
npx vite

成功看到一个旋转的绿色立方体

image-20241116004643721

ok，这样我们就成功创建一个案例，进入three.js的学习之旅了