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.jsimport { OrbitControls } from 'three/addons/controls/OrbitControls.js';// 扩展库GLTFLoader.jsimport { 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>

参考文档：

http://www.webgl3d.cn/
https://threejs.org/docs/index.html#manual/zh/introduction
https://threejs.org/examples