Three.js学习规划

学习目标

1. 熟悉并掌握Three.js中的基本概念，主要包括场景，摄像机，灯光，渲染器，物体对象，几何体，材质，动画，辅助对象，加载器，控制器等，要求能够实现一些简单的3D页面。
2. 熟悉Three.js项目中的示例，要求能够把实现效果和技术点对应起来，能在示例源码的基础上做更改实现特定的效果。
3. 熟悉技术平台Three.js的整体代码结构和主要方法，要求能够使用现有的方法，参考已有的示例，写出新的示例页面。
4. 熟悉业务平台对技术平台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示例，并查阅资料，考虑以下功能点如何实现，具体实现效果参考技术平台

  
  
  示例页面

1. 实现一个随摄像机转动的天空盒
2. 点击模型改变模型颜色
3. 模型渐进显示
4. 模型透明效果
5. 说明类标签，实时数据标签

• 实现参考（以下链接需要本地启动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.实现管道拆解和复原动画