应用场景
上篇文章，我们对于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>
参考文档：
