簡介

Three.js是基于原生WebGL封裝運行的三維引擎±龋可與各種前端技術(shù)結(jié)合使用茴她。

github鏈接：GitHub - mrdoob/three.js: JavaScript 3D library.

Three.js官網(wǎng)：three.js – JavaScript 3D library

由于Three.js的官方資源部署在境外服務(wù)器所以打開會非常慢存皂，這里推薦一個博客包含了Three.js的各種資源鏡像和教程文檔：http://www.yanhuangxueyuan.com/

建議一定要下載three.js的源代碼，在了解了一些基本的概念后，可以嘗試修改examples里的源代碼運行看效果旦袋，這是一種很好的學習方式骤菠。

three.js目錄結(jié)構(gòu)

three.js目錄結(jié)構(gòu)

引用方式

使用模塊引入、使用npm安裝 參考文檔

如何在本地運行Three.js（倘若你需要從外部文件里載入幾何體或是紋理貼圖疤孕，由于瀏覽器same origin policy（同源策略）的安全限制商乎，從本地文件系統(tǒng)載入外部文件將會失敗，同時拋出安全性異常祭阀。）參考文檔

核心概念

場景鹉戚，相機，渲染器专控，幾何體抹凳，材質(zhì)，光源等伦腐，理解以下結(jié)構(gòu)

Three.js程序結(jié)構(gòu)

可參考文檔：Three.js快速入門—新手上路

Examples

Three.js的官方示例是非常重要的學習資源赢底，示例的命名也較規(guī)范根據(jù)名稱大概可以知道某個示例使用的技術(shù)以及實現(xiàn)的功能。

示例頁面

可基于關(guān)鍵詞搜索如

動畫類：animation柏蘑、相機類：camera幸冻、幾何體類：geometry、控制類：controls咳焚、交互點選：interactive等

圖撲代碼介紹

圖撲代碼結(jié)構(gòu)

 ├── longhui-digital-twin
       ├── js    單個js文件包含了這個模型場景用到的方法
       ├── lib    ht的源代碼類庫
       ├── storage
             ├── assets    包含模型的各個局部的.obj和.mtl文件
             ├── components    圖表洽损、ui的組件
             ├── displays    生成各個模型場景不同狀態(tài)的面板的.json文件
             ├── models    引用模型對應(yīng).obj和.mtl文件的.json文件
             ├── scenes    用于生成場景模型的.json文件
             └── symbols     各個面板圖表，以及標簽背景和數(shù)據(jù)的.json文件
       ├── index.html    仿真模型的入口文件
       └──  weldingJoint.html    3D焊口的入口文件

功能點

（以下提到的鏈接請先運行three.js項目革半，然后根據(jù)自己的端口號自行匹配碑定，最好使用8080）
以下功能點為在圖撲已有項目中拆分出來的，在實現(xiàn)時會先參考圖撲的實現(xiàn)方式督惰，利用Three.js相對應(yīng)的技術(shù)來實現(xiàn)不傅。

1. 地圖控制（鼠標控制）
2. 天空盒
3. 模型點選
4. 模型漸進顯示
5. 模型透明效果
6. 說明類標簽，實時數(shù)據(jù)標簽
7. 不同格式模型文件的差異
8. 模型拆解赏胚，安裝

1.地圖控制（MAPCONTROLS）

使用技術(shù)：examples里的軌道控制（OrbitControls）
參考文檔：http://localhost:8080/docs/index.html#examples/en/controls/OrbitControls
參考示例：
http://localhost:8080/examples/?q=control#misc_controls_map
http://localhost:8080/examples/?q=control#misc_controls_orbit
關(guān)鍵點：理解OrbitControls的屬性访娶，學會自定義鼠標按鈕的相關(guān)事件

2.天空盒（SKYBOX）

1.通過場景（scene）實現(xiàn)

參考文檔：http://localhost:8080/docs/index.html#api/zh/scenes/Scene
參考示例：
http://localhost:8080/examples/#webgl_animation_cloth
http://localhost:8080/examples/#webgl_postprocessing_backgrounds
總結(jié)：

• 利用scene的 .background屬性的Color， Texture觉阅， CubeTexture可分別實現(xiàn)純色崖疤，圖像背景，立方體背景典勇，
• CubeTexture的6張圖像需專業(yè)化處理
• 實現(xiàn)效果與需求不一致

2.使用球形幾何體實現(xiàn)

參考圖撲代碼：longhui-digital-twin\storage\scenes\htproject_2020_q2\中油龍慧_黑河站\黑河站外景.json

天空背景代碼

3. 模型點選

1.對象選擇

使用技術(shù)：光線投射Raycaster
參考文檔：http://localhost:8080/docs/index.html#api/zh/core/Raycaster
參考示例：
http://localhost:8080/examples/#webgl_interactive_cubes
http://localhost:8080/examples/?q=interactive#webgl_interactive_cubes_ortho

2.選中效果

• 后期處理（post-processing）
  參考文檔：
  如何使用后期處理
  EffectComposer
  three.js post-processing-后處理通道效果使用詳解
  參考示例：
  http://localhost:8080/examples/#webgl_postprocessing_outline
  http://localhost:8080/examples/#webgl_postprocessing_unreal_bloom_selective
  尚未解決問題：模型產(chǎn)生嚴重的鋸齒化效果
• 改變材質(zhì)（material）
  參考文檔：http://localhost:8080/docs/index.html#api/zh/materials/Material
  參考示例：http://localhost:8080/examples/?q=inter#webgl_interactive_cubes
  總結(jié)：
  1.模型中存在多個Mesh對象使用同一材質(zhì)對象的情況劫哼，所以不能直接改變Mesh對象的材質(zhì)
  2.Mesh對象的材質(zhì)可能是material數(shù)組或者單個material
  3.使用meterial的clone（）或者 copy ( material : material )方法將原材質(zhì)復(fù)制
  4.改變復(fù)制材質(zhì)的相關(guān)屬性
  5.使用meterial的dispose（）方法處理掉原材質(zhì)
  6.將Mesh對象的材質(zhì)賦值為復(fù)制材質(zhì)

4. 模型漸進顯示

參考圖撲代碼：longhui-digital-twin\js\index.js

截面漸進

透明漸進

1. 理解材質(zhì)對象的clippingPlanes，transparent割笙，opacity屬性
2. 產(chǎn)生截面效果需要設(shè)置WebGLRenderer.localClippingEnabled為 true
3. 關(guān)于setInterval實現(xiàn)動畫
   特點： 執(zhí)行速度不能保證权烧，與電腦當前狀態(tài)有關(guān)眯亦；不能在限定的時間內(nèi)達到確定的狀態(tài)，或者說達到確定狀態(tài)需要的時間是不確定的般码；需要手動清除妻率。
   適用場景： 如一直閃爍的點，周期性執(zhí)行需手動關(guān)閉的動畫

5. 模型透明效果

參考文檔：http://localhost:8080/docs/index.html#api/zh/materials/Material
總結(jié)：

1. 保存所有對象材質(zhì)的 transparent板祝，opacity屬性（通過uuid做主鍵）
2. 改變所有對象材質(zhì)的 transparent宫静，opacity屬性，提高透明度
3. Clone需要強調(diào)對象的材質(zhì) 券时，修改transparent孤里，opacity屬性
4. 回到初始狀態(tài)時，恢復(fù)所有對象的材質(zhì)的transparent橘洞，opacity屬性

6. 說明類標簽捌袜，實時數(shù)據(jù)標簽

圖撲實現(xiàn)效果：標簽始終面向相機，與3d模型對象具有相同的坐標體系和相機渲染效果震檩，支持動態(tài)改變數(shù)值
參考文檔：
http://localhost:8080/docs/index.html#manual/zh/introduction/Creating-text
http://www.yanhuangxueyuan.com/Three.js_course/advanced/modelTag.html

1.使用CSS 2D渲染器（CSS2DRenderer）

參考文檔：http://localhost:8080/docs/index.html#examples/zh/renderers/CSS2DRenderer
參考示例：
http://localhost:8080/examples/?q=pdb#webgl_loader_pdb
http://localhost:8080/examples/?q=css#css2d_label
http://www.yanhuangxueyuan.com/3D/liangcang/index.html
實現(xiàn)效果：與3d模型對象具有相同的坐標體系琢蛤，相機渲染效果與3d模型不同，始終面向相機抛虏，支持動態(tài)改變數(shù)值
適用場景：只顯示簡單文字的2d效果標簽

2.使用CSS 3D渲染器（CSS3DRenderer）

參考文檔：http://localhost:8080/docs/index.html#examples/zh/renderers/CSS3DRenderer
參考示例：
http://localhost:8080/examples/?q=css#css3d_periodictable
http://localhost:8080/examples/?q=css#css3d_sandbox
實現(xiàn)效果：與3d模型對象具有相同的坐標體系博其，相機渲染效果與3d模型不同，不會始終面向相機迂猴，支持動態(tài)改變數(shù)值
適用場景：直接使用css的3d屬性實現(xiàn)3d效果

3.使用精靈（Sprite）+ Canvas紋理（CanvasTexture）

參考文檔：
http://localhost:8080/docs/index.html#api/zh/objects/Sprite
http://localhost:8080/docs/index.html#api/zh/textures/CanvasTexture
https://www.w3school.com.cn/html5/html_5_canvas.asp
參考示例：
http://localhost:8080/examples/?q=sprite#webgl_points_sprites
http://localhost:8080/examples/?q=sprite#webgl_raycast_sprite
http://localhost:8080/examples/?q=canvas#webgl_materials_texture_canvas
關(guān)鍵點：每次改變canvas對象需要手動將材質(zhì)的needsUpdate屬性賦值為true慕淡，canvas的drawImage()是異步的，需要在圖片的onload回調(diào)函數(shù)中重新添加文字

實現(xiàn)效果：與3d模型對象具有相同的坐標體系沸毁，相機渲染效果與3d模型相同峰髓，始終面向相機，支持動態(tài)改變數(shù)值
適用場景：給3d模型對象添加標簽

7. 不同格式模型文件的差異

關(guān)于如何加載3d模型：參考示例里有關(guān)于loader的實現(xiàn)代碼

關(guān)于不同格式模型文件的差異參考：

8. 模型拆解息尺，安裝

場景分析：天空球 + 平面地板
管道延長線：clone對象及材質(zhì)携兵，利用對象的.scale屬性，將管道沿著x軸方向擴大20倍搂誉，并修改其材質(zhì)的transparent和opacity屬性徐紧，調(diào)整相對位置
參考文檔：
http://localhost:8080/docs/index.html#api/zh/core/Object3D
http://localhost:8080/docs/index.html#api/zh/materials/Material
動畫實現(xiàn)：使用tween.js
參考文檔：
https://www.cnblogs.com/qianduanjingying/p/6155744.html
http://www.createjs.cc/tweenjs/

1.確認，把所有任務(wù)按序維護到禪道炭懊，如果有缺的自己補一下
2.每個功能點的結(jié)論并级，文字描述的，
實現(xiàn)方式侮腹，幾種嘲碧，優(yōu)缺點、適應(yīng)場景父阻，技術(shù)平臺里有對應(yīng)實現(xiàn)愈涩、demo