2024年了，是该学学Three.js了

￡神魔★判官ぃ 2024-04-22 12:27 76阅读 0赞

**前言**

> ? 大家好，我是南木元元，热衷分享有趣实用的文章，希望大家多多支持，一起进步！
> 
> ? **个人主页：[南木元元][Link 1]**

--------------------

**目录**

Three.js介绍

Three.js应用场景

搭建开发环境

初始化项目

创建文件

配置命令

启动服务

Three.js的一些重要概念

第一个3D场景

渲染器

3D场景的实现

1.创建三维场景

2.创建透视相机

3.创建渲染器

4.添加物体

5.定位相机

结语

--------------------

## Three.js介绍 ##

讲到Three.js，就需要先说一下OpenGL和WebGL，OpenGL是一个跨平台的3D/2D的绘图标准，WebGL是一种3D绘图协议，它允许把JavaScript和OpenGL 结合在一起运用，但使用WebGL原生的API来写3D程序非常的复杂，对于前端开发者来说学习成本非常高。

![0dde847577364f109095058674067829.png][]

Three.js是WebGL的JavaScript 3D库，其对WebGL提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本，让开发者能更快速的进行3D场景效果的开发。

![f194bb3e6bbe4a0f86e6add24b437980.png][]

> 简单来说，Three.js就是能够实现3D效果的JS库。

官网：[Three.js – JavaScript 3D Library][Three.js _ JavaScript 3D Library]

WebGL、OpenGL、Three.js三者的关系：

*  WebGL：OpenGL + JavaScript
 *  Three.js：一个基于WebGL封装的库

## Three.js应用场景 ##

three.js应用广泛，在**小游戏、产品展示、物联网、智慧城市、机械、建筑、GIS**等各个领域基本上都有three.js的身影。

微信小游戏

![4e904f8931ac4afdafa5b038b954d664.png][]

智慧城市

![6f8f9c92202d4110a83defe2f70fd576.png][]

智慧小区

![ebf722c279cf44bf85135d398e59ed8f.png][]

数字孪生

![811ce5345d0142c08de6f8a820eb1d6c.png][]

全景看房

![89839582d2d04dfcaad2a4d5ce886a3e.png][]

机械领域

![811d067fdc204c6faed41e59fc52d773.png][]

GIS

![c5ae5b9dd5bd4c1a98dbf59fe98ad658.png][]

## 搭建开发环境 ##

本文使用vite来搭建three.js的开发环境，当然你也可以使用webpack等其他打包工具。

### 初始化项目 ###

创建vite-three目录并执行`npm init -y`，初始化 `package.json。`

npm init -y

安装vite：

npm i vite -D

安装three.js：

npm i three

此时的项目目录如下：

![8b7280a9836243149754d7aee1e2e8ba.png][]

### 创建文件 ###

创建src目录，src下新建main.js文件，根目录创建index.html，作为vite的入口文件。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vite-three</title>
        <style>
            body {
                margin: 0;
            }
        </style>
    </head>
    <body>
        
        <script src="./src/main.js" type="module"></script>
    </body>
    </html>

上述引入js时加上了type="module"，代表使用模块化的方式引入，因为main.js中会使用到import模块化语法。main.js文件如下：

import * as THREE from "three";
    console.log(THREE);

### 配置命令 ###

在package.json中配置如下命令：

"scripts": {
        "dev": "vite --open",
        "build": "vite build",
        "preview": "vite preview"
    }

### 启动服务 ###

终端输入npm run dev，启动开发服务：

npm run dev

在浏览器控制台看到如下信息，就代表Three.js已经成功引入。

![261a5e620cc44d9b992796a80e16ac81.png][]

## Three.js的一些重要概念 ##

在Three.js中，我们需要先理解一些比较重要的概念：

*  场景：场景就是一个三维的世界，在这个世界中可以放置各种各样的物体。
 *  相机：三维空间的观察者，通过相机来查看场景。
 *  物体：被观察的对象，不同的物体形状、大小、材质、纹理不同。
 *  光源：物体表面的明暗效果会受光照影响，为了更好的模拟三维效果，需要一些光照和阴影。

![1517de41c5024fe99515d19e7c5ed501.png][]

这里需要重点说下相机。

> 相机分为两种：**透视相机**（PerspectiveCamera）和**正交相机**（OrthographicCamera）。

Three.js最常使用的是透视相机，它模拟了人眼观察世界的规律：物体近大远小。

// 透视相机参数
    const fov = 45; 
    const aspect = window.innerWidth / window.innerHeight;
    const near = 1; 
    const far = 1000; 
    // 创建一个透视相机
    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

透视相机有四个构造参数：

1.  fov（视野）：相机的视野有多宽，以度为单位。
2.  aspect（纵横比）：场景的宽度与高度的比率。
3.  near（近剪裁平面）：任何比这更靠近相机的东西都是不可见的。
4.  far（远剪裁平面）：任何比这更远离相机的东西都是不可见的。

![346f5405127e4429a67618ff31de11fd.png][]

这四个参数构成一个有边界的空间区域，被称为**视锥体**，只有视锥体之内的物体，才会渲染出来，视锥体范围之外的物体不会显示。

## 第一个3D场景 ##

创建一个场景，需要3个对象：场景（scene）、相机（camera）、渲染器（renderer），这样就能通过摄像机渲染出场景。

![a85c8ca30fa54906ad1f43d26d884420.png][]

### 渲染器 ###

场景和相机我们都已经介绍过了，那什么是渲染器呢？

> 渲染器（Renderer）：从相机的角度去渲染场景，负责将场景绘制到`<canvas>`元素中。

three.js的整个工作机制如下图所示：

![6b195a49a8bb4c059e4ab3d9b777ccca.png][]

将可见对象如网格（mesh）添加到场景（scene）中，然后将需要渲染的数据传递给渲染器（renderer），渲染器负责将场景在 `<canvas>` 画布上绘制出来。了解了这些，接下来我们就来绘制three.js的第一个3D场景。

### 3D场景的实现 ###

#### 1.创建三维场景 ####

首先，创建场景，作为我们能看到的一切的载体。

const scene = new THREE.Scene();

#### 2.创建透视相机 ####

创建透视相机，设置相机参数。

#### 3.创建渲染器 ####

创建渲染器，并执行render渲染操作。

// 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    // 渲染
    renderer.render(scene, camera);

#### 4.添加物体 ####

在`three.js`中，使用**`Mesh`网格**表示一个物体，网格包含几何体（Geometry）和材质（Material）。

![3f5109df3a284253a3d1f4dfca3bd2dd.png][]

创建一个立方体，添加到场景中。

// 创建立方体(几何+材质)
    const geometry = new THREE.BoxGeometry(100, 100, 100);
    const material = new THREE.MeshNormalMaterial();
    const mesh = new THREE.Mesh(geometry, material);
    // 添加到场景
    scene.add(mesh);

上述代码，创建了长宽高均为100个单位的立方体，使用法向量材质`MeshNormalMaterial，然后`基于几何形状和材质创建立方体，最后添加到场景中。

#### 5.定位相机 ####

完成上述步骤后，你却会发现此时的屏幕上是一片黑暗，什么也看不到。

![b958ddebc80d4375b0a472b6bedd76b1.png][]

这是因为我们创建的相机和物体最初都位于场景的中心(0, 0, 0)，并且相机也默认看向(0, 0, 0)这个点，所以透视相机不会渲染内容。我们只需移动一下相机位置就可以了。

// 定位相机
    camera.position.set(200, 300, 200); //设置相机位置
    camera.lookAt(0, 0, 0); //设置相机方向

效果：

![3c97a67aa9764ec6bfbae938095df8e7.png][]

完整代码：

import * as THREE from "three";
    
    // 创建场景
    const scene = new THREE.Scene();
    // 创建透视相机
    const fov = 45;
    const aspect = window.innerWidth / window.innerHeight;
    const near = 1;
    const far = 1000;
    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    // 定位相机
    camera.position.set(200, 300, 200); 
    camera.lookAt(0, 0, 0); 
    
    // 创建立方体(几何+材质)
    const geometry = new THREE.BoxGeometry(100, 100, 100);
    const material = new THREE.MeshNormalMaterial();
    const mesh = new THREE.Mesh(geometry, material);
    // 添加到场景
    scene.add(mesh);
    
    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    // 渲染
    renderer.render(scene, camera);

## 结语 ##

?如果此文对你有帮助的话，欢迎?**关注**、?**点赞**、⭐**收藏**、**✍️评论，**支持一下博主~

[Link 1]: https://blog.csdn.net/weixin_43288600
[0dde847577364f109095058674067829.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/fc26b1a1e1f2475fb35c328af085e965.png
[f194bb3e6bbe4a0f86e6add24b437980.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/553f91b5806f401d9ae5d3747f933f4d.png
[Three.js _ JavaScript 3D Library]: https://threejs.org/
[4e904f8931ac4afdafa5b038b954d664.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/317c4cbe033e420088e4aa8244d3a3ae.png
[6f8f9c92202d4110a83defe2f70fd576.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/588e940da2f9429b8abf62baa638ac20.png
[ebf722c279cf44bf85135d398e59ed8f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/76fc9eac408340fbb1e098dcf5f20f12.png
[811ce5345d0142c08de6f8a820eb1d6c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/e67371af99f34085afc80932822030ad.png
[89839582d2d04dfcaad2a4d5ce886a3e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/d5161b481942417b9e827ea3bbecb27b.png
[811d067fdc204c6faed41e59fc52d773.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/a875aeac3594404bb503943137fc2e68.png
[c5ae5b9dd5bd4c1a98dbf59fe98ad658.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/2635c0e4a2a444f3a3fd380b168250d4.png
[8b7280a9836243149754d7aee1e2e8ba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/104c01239ce94e648b3b0ce7a4394956.png
[261a5e620cc44d9b992796a80e16ac81.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/6a21d7ac612548d18a50a1f8b69fa14c.png
[1517de41c5024fe99515d19e7c5ed501.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/22c3492127474ae8b503dee6664ea36f.png
[346f5405127e4429a67618ff31de11fd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/684b24cf682748aeb969c2b60895f476.png
[a85c8ca30fa54906ad1f43d26d884420.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/696cd2006adb4b50996030906261d3d8.png
[6b195a49a8bb4c059e4ab3d9b777ccca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/822ebab1eae14fbbbb4a4d2ada563250.png
[3f5109df3a284253a3d1f4dfca3bd2dd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/c28ea9f522774aee8c25d884c46b988b.png
[b958ddebc80d4375b0a472b6bedd76b1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/6333ff8b23ee4f509131c7e091595dcf.png
[3c97a67aa9764ec6bfbae938095df8e7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/46d1f1498c8d4b26a9516aa1b5b3c8c4.png