webgl example例子学习

1 webgl_camera.html
图元在z轴 正方向上。创建的camera 默认是看向z轴负方向，所以这时需要绕Y轴选择180度，才可以看到物体。（右手坐标系）
camera.rotation.y = Math.PI;

场景中，有多个camera ， camear 同一般的图元一样，可以加入到scene中，解决CameraHelper 可以看到视锥。

2 webgl_clipping_intersection
材质material ，可以设置裁剪属性

• 定义裁剪平面数组
• 设置裁剪属性（合集 还是 交集）

设置camera 的位置，应该考虑如何更好的关注重点。本例中，通过

camera.position.set(-1.5, 2.5, 3.0);
使得相机在物体的前面靠左上的位置，比较容易看到裁剪的效果

3 webgl_geometry_shapes
shape, 可用通过shape.getPoints 获取所有的点；而通过getSpacePoints(count) 可以获取制定个数的点。根据这些点，就可以画线以及虚线点

4 webgl_clipping_stencil
学习stencil 不错的博客： https://learnopengl-cn.readthedocs.io/zh/latest/04%20Advanced%20OpenGL/02%20Stencil%20testing/

https://www.zhihu.com/question/266514298

一个裁剪的插件源码 https://github.com/makc/ThreeCSG

https://jsfiddle.net/dokev2hy/1/

基本的流程：
1 往stencil 模版缓冲中写入数据数据。在例子中，通过createPlaneStencilGroup 函数，写入的。原理是：如果背面可见，缓冲数据-1；如果正面可见，缓冲数据+1。 其中，当背面可见时，就是切开framement 。所以，在切面处，模版缓冲的数据是1；
2 绘制切面。
有三个切面，所以，根据PlaneGeometry 生成同三个切面方向一致的平台（在animate 函数中设置平面的指向），然后分别使用对应的模版缓冲数据绘制切面。

5 webgl_buffergeometry_lines
通过BufferGeometry ，分别对position 和 color 属性复制，最后通过THREE.line 实现绘制线条。
其中，比较有意思的一点是： 通过morphTarget 属性，实现一个动画。在动画回调函数中，通过控制morphTargetInfluence 实现线条的变化
关于morphTarget 的参考资料

6 webgl_materials_texture_canvas
通过在一个canvas 上绘制内容，通过THREE.CanvasTexture 将canvas 内容赋值给material 的map 即可。
注意： 如果更新了canvas 的内容，需要调用material.map.needsUpdate = true , 更新纹理

7 webgl_materials_texture_partialupdate
更新一部分纹理内容。纹理其实也是一个数据，覆盖对应位置的数据，就起到局部更新的目的

8 webgl_math_obb
使用的场景，是显示鼠标选择的立方体边框。