Three.js应用场景以及开发前准备工作

应用场景

上篇文章，我们对于three.js有了大致的了解。那么three.js的应用场景到底有哪些？

three.js广泛应用，在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域基本上都有three.js的身影。

只要你有Web3D可视化的需求，基本上都可以首选学习Three.js。

下面简单介绍一下集中比较典型的应用场景：

智慧小区

智慧工厂

物联网--收费站

物联网

智慧城市

3D可视化大屏

在线产品3D展示

机械/BIM在线预览

室内全景展示

three.js 开发前准备

github地址： https://github.com/mrdoob/three.js

版本问题

three.js官网 (opens new window)可以下载three.js文件包，不过默认是最新版本的，three.js官网的文档一般也是当前最新版本。

three.js文件包下载

github链接查看所有版本threejs：https://github.com/mrdoob/three.js/releases

选择你需要的版本three.js文件包下载，然后解压，就可以预览里面的很多学习资源。

threejs文件资源目录介绍

下载three.js文件包解压后，你可以看到如下目录(不同版本会略有差异)。

对于开发者而言，大家经常接触的是文档docs和案例examples两个文件夹，平时查看文档，可以打开文档docs里面html文件，案例examples里面提供了海量threejs功能案例。

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——打开应用程序

使用何种编辑器来开发和预览？

开发编辑器 -- vscode代码编辑器

静态服务器 -- vsocde，安装live-server插件

开发和学习环境，引入threejs

开发环境：项目开发引入threejs，比如vue或react脚手架引入threejs。
学习环境：入门threejs阶段，.html文件中直接引入threejs

开发环境,使用threejs

比如你采用的是Vue + threejs或React + threejs技术栈，这很简单，threejs就是一个js库，直接通过npm命令行安装就行。

npm安装特定版本three.js(注意使用哪个版本，查文档就查对应版本)

// 比如安装148版本
npm install three@0.148.0 --save

npm安装后，如何引入three.js

执行import * as THREE from 'three';,ES6语法引入three.js核心。

// 引入three.js
import * as THREE from 'three';

npm安装后，如何引入three.js其他扩展库

除了three.js核心库以外，在threejs文件包中examples/jsm目录下，你还可以看到各种不同功能的扩展库。

一般来说，你项目用到那个扩展库，就引入那个，用不到就不需要引入。

// 引入扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// 引入扩展库GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

学习环境,使用threejs

.html文件中直接引入threejs

three.js库可以在threejs官方文件包下面的build目录获取到。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./build/three.js"></script>
</head>
<body>
    <script> 
        console.log(THREE.Scene); 
    </script>
</body>
</html></h5>

ES6 import方式引入

给script标签设置type="module",也可以在.html文件中使用import方式引入three.js。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

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

    console.log(THREE.Scene); 
    </script>
</body>

</html>

思考：实现学习环境.html文件和vue或reaact脚手架开发环境一样的写法？

import * as THREE from 'three';

可以使用 type="importmap" 配置路径。

<!-- 具体路径配置，你根据自己文件目录设置 -->
<script type="importmap">
    {
        "imports": {
            "three": "../../../three.js/build/three.module.js", // 配置扩展库
            "three/addons/": "./three.js/examples/jsm/"  // 配置扩展库
        }
    }
</script>

<!-- 配置type="importmap",.html文件也能和项目开发环境一样方式引入threejs -->
<script type="module">
    import * as THREE from 'three';
    // 浏览器控制台测试，是否引入成功
    console.log(THREE.Scene);

    // three/addons/路径之后对应的是three.js官方文件包`/examples/jsm/`中的js库
    // 扩展库OrbitControls.js
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
    // 扩展库GLTFLoader.js
    import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
    console.log(OrbitControls);
    console.log(GLTFLoader);
</script>

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 具体路径配置，你根据自己文件目录设置 -->
    <script type="importmap">
    {
        "imports": {
            "three": "./build/three.module.js"
        }
    }
</script> 

<script type="module">
import * as THREE from 'three';

console.log(THREE.Scene); 
</script>
</body>

</html>

优化：抽离js文件

在实际项目中，我们往往把js文件抽离，这样便于操作以及可读性。

main.js

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

// three/addons/路径之后对应的是three.js官方文件包`/examples/jsm/`中的js库
// 扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 扩展库GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
console.log(OrbitControls);
console.log(GLTFLoader);

页面调用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 具体路径配置，你根据自己文件目录设置，我的是课件中源码形式 -->
<script type="importmap">
    {
        "imports": {
            "three": "./build/three.module.js",
            "three/addons/": "./examples/jsm/"
        }
    }
</script>

    <script type="module" src="./main.js"> 
    </script>
</body>

</html>

参考文档：