简介

Three.js是基于原生WebGL封装运行的三维引擎。可与各种前端技术结合使用。

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

Three.js官网：three.js – JavaScript 3D library

由于Three.js的官方资源部署在境外服务器所以打开会非常慢，这里推荐一个博客包含了Three.js的各种资源镜像和教程文档：http://www.yanhuangxueyuan.com/

建议一定要下载three.js的源代码，在了解了一些基本的概念后，可以尝试修改examples里的源代码运行看效果，这是一种很好的学习方式。

three.js目录结构

three.js目录结构

引用方式

使用模块引入、使用npm安装 参考文档

如何在本地运行Three.js（倘若你需要从外部文件里载入几何体或是纹理贴图，由于浏览器same origin policy（同源策略）的安全限制，从本地文件系统载入外部文件将会失败，同时抛出安全性异常。）参考文档

核心概念

场景，相机，渲染器，几何体，材质，光源等，理解以下结构

Three.js程序结构

可参考文档：Three.js快速入门—新手上路

Examples

Three.js的官方示例是非常重要的学习资源，示例的命名也较规范根据名称大概可以知道某个示例使用的技术以及实现的功能。

示例页面

可基于关键词搜索如

动画类：animation、相机类：camera、几何体类：geometry、控制类：controls、交互点选：interactive等

图扑代码介绍

图扑代码结构

 ├── longhui-digital-twin
       ├── js    单个js文件包含了这个模型场景用到的方法
       ├── lib    ht的源代码类库
       ├── storage
             ├── assets    包含模型的各个局部的.obj和.mtl文件
             ├── components    图表、ui的组件
             ├── displays    生成各个模型场景不同状态的面板的.json文件
             ├── models    引用模型对应.obj和.mtl文件的.json文件
             ├── scenes    用于生成场景模型的.json文件
             └── symbols     各个面板图表，以及标签背景和数据的.json文件
       ├── index.html    仿真模型的入口文件
       └──  weldingJoint.html    3D焊口的入口文件

功能点

（以下提到的链接请先运行three.js项目，然后根据自己的端口号自行匹配，最好使用8080）
以下功能点为在图扑已有项目中拆分出来的，在实现时会先参考图扑的实现方式，利用Three.js相对应的技术来实现。

1. 地图控制（鼠标控制）
2. 天空盒
3. 模型点选
4. 模型渐进显示
5. 模型透明效果
6. 说明类标签，实时数据标签
7. 不同格式模型文件的差异
8. 模型拆解，安装

1.地图控制（MAPCONTROLS）

使用技术：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
关键点：理解OrbitControls的属性，学会自定义鼠标按钮的相关事件

2.天空盒（SKYBOX）

1.通过场景（scene）实现

参考文档：http://localhost:8080/docs/index.html#api/zh/scenes/Scene
参考示例：
http://localhost:8080/examples/#webgl_animation_cloth
http://localhost:8080/examples/#webgl_postprocessing_backgrounds
总结：

• 利用scene的 .background属性的Color， Texture， CubeTexture可分别实现纯色，图像背景，立方体背景，
• CubeTexture的6张图像需专业化处理
• 实现效果与需求不一致

2.使用球形几何体实现

参考图扑代码：longhui-digital-twin\storage\scenes\htproject_2020_q2\中油龙慧_黑河站\黑河站外景.json

天空背景代码

3. 模型点选

1.对象选择

使用技术：光线投射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
  尚未解决问题：模型产生严重的锯齿化效果
• 改变材质（material）
  参考文档：http://localhost:8080/docs/index.html#api/zh/materials/Material
  参考示例：http://localhost:8080/examples/?q=inter#webgl_interactive_cubes
  总结：
  1.模型中存在多个Mesh对象使用同一材质对象的情况，所以不能直接改变Mesh对象的材质
  2.Mesh对象的材质可能是material数组或者单个material
  3.使用meterial的clone（）或者 copy ( material : material )方法将原材质复制
  4.改变复制材质的相关属性
  5.使用meterial的dispose（）方法处理掉原材质
  6.将Mesh对象的材质赋值为复制材质

4. 模型渐进显示

参考图扑代码：longhui-digital-twin\js\index.js

截面渐进

透明渐进

1. 理解材质对象的clippingPlanes，transparent，opacity属性
2. 产生截面效果需要设置WebGLRenderer.localClippingEnabled为 true
3. 关于setInterval实现动画
   特点： 执行速度不能保证，与电脑当前状态有关；不能在限定的时间内达到确定的状态，或者说达到确定状态需要的时间是不确定的；需要手动清除。
   适用场景： 如一直闪烁的点，周期性执行需手动关闭的动画

5. 模型透明效果

参考文档：http://localhost:8080/docs/index.html#api/zh/materials/Material
总结：

1. 保存所有对象材质的 transparent，opacity属性（通过uuid做主键）
2. 改变所有对象材质的 transparent，opacity属性，提高透明度
3. Clone需要强调对象的材质 ，修改transparent，opacity属性
4. 回到初始状态时，恢复所有对象的材质的transparent，opacity属性

6. 说明类标签，实时数据标签

图扑实现效果：标签始终面向相机，与3d模型对象具有相同的坐标体系和相机渲染效果，支持动态改变数值
参考文档：
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
实现效果：与3d模型对象具有相同的坐标体系，相机渲染效果与3d模型不同，始终面向相机，支持动态改变数值
适用场景：只显示简单文字的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
实现效果：与3d模型对象具有相同的坐标体系，相机渲染效果与3d模型不同，不会始终面向相机，支持动态改变数值
适用场景：直接使用css的3d属性实现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
关键点：每次改变canvas对象需要手动将材质的needsUpdate属性赋值为true，canvas的drawImage()是异步的，需要在图片的onload回调函数中重新添加文字

实现效果：与3d模型对象具有相同的坐标体系，相机渲染效果与3d模型相同，始终面向相机，支持动态改变数值
适用场景：给3d模型对象添加标签

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

关于如何加载3d模型：参考示例里有关于loader的实现代码

关于不同格式模型文件的差异参考：

8. 模型拆解，安装

场景分析：天空球 + 平面地板
管道延长线：clone对象及材质，利用对象的.scale属性，将管道沿着x轴方向扩大20倍，并修改其材质的transparent和opacity属性，调整相对位置
参考文档：
http://localhost:8080/docs/index.html#api/zh/core/Object3D
http://localhost:8080/docs/index.html#api/zh/materials/Material
动画实现：使用tween.js
参考文档：
https://www.cnblogs.com/qianduanjingying/p/6155744.html
http://www.createjs.cc/tweenjs/

1.确认，把所有任务按序维护到禅道，如果有缺的自己补一下
2.每个功能点的结论，文字描述的，
实现方式，几种，优缺点、适应场景，技术平台里有对应实现、demo