学习目标
- 熟悉并掌握Three.js中的基本概念，主要包括场景，摄像机，灯光，渲染器，物体对象，几何体，材质，动画，辅助对象，加载器，控制器等，要求能够实现一些简单的3D页面。
- 熟悉Three.js项目中的示例，要求能够把实现效果和技术点对应起来，能在示例源码的基础上做更改实现特定的效果。
- 熟悉技术平台Three.js的整体代码结构和主要方法，要求能够使用现有的方法，参考已有的示例，写出新的示例页面。
- 熟悉业务平台对技术平台Three.js部分的调用方式，要求能够满足一些基本的业务需求。
学习计划和任务c
一、第一周
- 下载Three.js源代码 ，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官方文档，掌握主要包括场景，摄像机，灯光，渲染器，物体对象，几何体，材质，动画，辅助对象，加载器，控制器等基本概念
- 查看上述基本概念模块对应的基础示例，能看懂主要代码的逻辑
目标任务：
1.实现一个带背景色的（scene的属性），带网格辅助对象（GridHelper）的绿色立方体，并以一定的速度旋转
2.加载一个外部模型到three.js页面中（loader），添加两个平行光源（DirectionalLight），并实现轨道控制器（OrbitControls），鼠标左键控制平移，右键控制旋转（ OrbitControls.mouseButtons
）
二、第二，三周
-
参考Three.js示例，并查阅资料，考虑以下功能点如何实现，具体实现效果参考技术平台
示例页面
- 实现一个随摄像机转动的天空盒
- 点击模型改变模型颜色
- 模型渐进显示
- 模型透明效果
- 说明类标签，实时数据标签
实现参考（以下链接需要本地启动Three.js源代码）
1.天空盒（SKYBOX）
i）.通过场景（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张图像需专业化处理
ii）.使用球形几何体实现
参考文档：
http://localhost:8080/docs/index.html#api/en/geometries/SphereBufferGeometry
http://localhost:8080/docs/index.html#api/en/materials/Material
关键点：理解材质（material）的.side属性
思考：当前的天空盒会随着摄像机的距离远近进行缩放，如何实现天空盒只随着摄像机转动而不缩放？（可考虑用两个摄像机并同步他们的方向）
2. 模型点选
ii）.对象选择
使用技术：光线投射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
ii）.选中效果后期处理（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对象的材质赋值为复制材质
3. 模型渐进显示
参考文档：
材质Material
setinterval实现动画
参考示例：
http://localhost:8080/examples/?q=clip#webgl_clipping
http://localhost:8080/examples/?q=clip#webgl_clipping_advanced
总结：
1.理解材质对象的clippingPlanes，transparent，opacity属性
2.产生截面效果需要设置WebGLRenderer.localClippingEnabled为 true
3.关于setInterval实现动画
特点： 执行速度不能保证，与电脑当前状态有关；不能在限定的时间内达到确定的状态，或者说达到确定状态需要的时间是不确定的；需要手动清除。
适用场景： 如一直闪烁的点，周期性执行需手动关闭的动画
4. 模型透明效果
参考文档：http://localhost:8080/docs/index.html#api/zh/materials/Material
总结：
1.保存所有对象材质的 transparent，opacity属性（通过uuid做主键）
2.改变所有对象材质的 transparent，opacity属性，提高透明度
3.Clone需要强调对象的材质 ，修改transparent，opacity属性
4.回到初始状态时，恢复所有对象的材质的transparent，opacity属性
5. 说明类标签，实时数据标签
实现效果：标签始终面向相机，与3d模型对象具有相同的坐标体系和相机渲染效果，支持动态改变数值
参考文档：
http://localhost:8080/docs/index.html#manual/zh/introduction/Creating-text
http://www.yanhuangxueyuan.com/Three.js_course/advanced/modelTag.html使用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效果标签使用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效果使用精灵（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模型对象添加标签
三、第四、五周
看技术平台的代码结构和主要方法，参考示例代码和业务平台中的3D页面，在vue项目中实现以下需求：
目标任务一
1.加载黑河首站的模型，添加平行光源
2.添加天空球，添加轨道控制器
3.添加模型对象说明标签
4.添加鼠标悬浮事件，当鼠标选中模型对象时，模型对象高亮，对应的说明标签显示，鼠标的样式
改为pointer
5.添加鼠标双击事件，将控制器定位到距离鼠标选中的三维坐标一定距离的位置
6.添加某个模型对象的渐进动画
7.实现地下管线高亮效果
目标任务二
1.加载管道模型
2.添加管道延长线
3.添加相应的说明标签
4.实现管道拆解和复原动画
