應(yīng)用場景
上篇文章，我們對于three.js有了大致的了解贩耐。那么three.js的應(yīng)用場景到底有哪些弧腥？
three.js廣泛應(yīng)用，在小游戲潮太、產(chǎn)品展示管搪、物聯(lián)網(wǎng)、數(shù)字孿生铡买、智慧城市園區(qū)更鲁、機械、建筑奇钞、全景看房澡为、GIS等各個領(lǐng)域基本上都有three.js的身影。
只要你有Web3D可視化的需求景埃，基本上都可以首選學(xué)習Three.js媒至。
下面簡單介紹一下集中比較典型的應(yīng)用場景：
智慧小區(qū)
智慧工廠
物聯(lián)網(wǎng)--收費站
智慧城市
3D可視化大屏
在線產(chǎn)品3D展示
機械/BIM在線預(yù)覽
室內(nèi)全景展示
three.js 開發(fā)前準備
github地址： https://github.com/mrdoob/three.js
版本問題
three.js官網(wǎng) (opens new window)可以下載three.js文件包，不過默認是最新版本的谷徙，three.js官網(wǎng)的文檔一般也是當前最新版本拒啰。
three.js文件包下載
github鏈接查看所有版本threejs：https://github.com/mrdoob/three.js/releases
選擇你需要的版本three.js文件包下載，然后解壓完慧，就可以預(yù)覽里面的很多學(xué)習資源图呢。
threejs文件資源目錄介紹
下載three.js文件包解壓后，你可以看到如下目錄(不同版本會略有差異)骗随。
對于開發(fā)者而言蛤织，大家經(jīng)常接觸的是文檔docs和案例examples兩個文件夾，平時查看文檔鸿染，可以打開文檔docs里面html文件指蚜，案例examples里面提供了海量threejs功能案例。
three.js-文件包
└───build——three.js相關(guān)庫涨椒，可以引入你的.html文件中摊鸡。
│
└───docs——Three.js API文檔文件
│───index.html——打開該文件，本地離線方式預(yù)覽threejs文檔
└───examples——大量的3D案例蚕冬，是你平時開發(fā)參考學(xué)習的最佳資源
│───jsm——threejs各種功能擴展庫
└───src——Three.js引擎的源碼免猾，有興趣可以閱讀。
│
└───editor——Three.js的可視化編輯器囤热，可以編輯3D場景
│───index.html——打開應(yīng)用程序
使用何種編輯器來開發(fā)和預(yù)覽猎提？
開發(fā)編輯器 -- vscode代碼編輯器
靜態(tài)服務(wù)器 -- vsocde，安裝live-server插件
開發(fā)和學(xué)習環(huán)境旁蔼，引入threejs
- 開發(fā)環(huán)境：項目開發(fā)引入threejs锨苏，比如vue或react腳手架引入threejs。
- 學(xué)習環(huán)境：入門threejs階段棺聊，.html文件中直接引入threejs
開發(fā)環(huán)境,使用threejs
比如你采用的是Vue + threejs或React + threejs技術(shù)棧伞租，這很簡單，threejs就是一個js庫限佩，直接通過npm命令行安裝就行葵诈。
npm安裝特定版本three.js(注意使用哪個版本，查文檔就查對應(yīng)版本)
// 比如安裝148版本
npm install three@0.148.0 --save
npm安裝后祟同，如何引入three.js
執(zhí)行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';
學(xué)習環(huán)境,使用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標簽設(shè)置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">
// 現(xiàn)在瀏覽器支持ES6語法几睛，自然包括import方式引入js文件
import * as THREE from './build/three.module.js';
console.log(THREE.Scene);
</script>
</body>
</html>
思考：實現(xiàn)學(xué)習環(huán)境.html文件和vue或reaact腳手架開發(fā)環(huán)境一樣的寫法房轿？
import * as THREE from 'three';
可以使用 type="importmap" 配置路徑。
<!-- 具體路徑配置，你根據(jù)自己文件目錄設(shè)置 -->
<script type="importmap">
{
"imports": {
"three": "../../../three.js/build/three.module.js", // 配置擴展庫
"three/addons/": "./three.js/examples/jsm/" // 配置擴展庫
}
}
</script>
<!-- 配置type="importmap",.html文件也能和項目開發(fā)環(huán)境一樣方式引入threejs -->
<script type="module">
import * as THREE from 'three';
// 瀏覽器控制臺測試囱持，是否引入成功
console.log(THREE.Scene);
// three/addons/路徑之后對應(yīng)的是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>
<!-- 具體路徑配置夯接，你根據(jù)自己文件目錄設(shè)置 -->
<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>
優(yōu)化：抽離js文件
在實際項目中，我們往往把js文件抽離纷妆，這樣便于操作以及可讀性盔几。
main.js
import * as THREE from 'three';
console.log(THREE.Scene);
// three/addons/路徑之后對應(yīng)的是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);
頁面調(diào)用
<!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>
<!-- 具體路徑配置，你根據(jù)自己文件目錄設(shè)置掩幢，我的是課件中源碼形式 -->
<script type="importmap">
{
"imports": {
"three": "./build/three.module.js",
"three/addons/": "./examples/jsm/"
}
}
</script>
<script type="module" src="./main.js">
</script>
</body>
</html>
參考文檔：
