threejs examples 学习

针对threejs 自带例子，学习一些典型例子

camera

• camera.html
  学习了
  单个容器，多个camera 在不同区域，显示不同内容。通过camera 的 setViewport 设置绘制区域。

• camera_logarithmicdepthbuffer.html
  学习了
  多容器分屏显示scene 的不同部分的效果。通过camera 的 setViewOffset 实现。
  通过设置renderer 属性logarithmicDepthBuffer ，解决z-fighting 问题

materials

• materials.html
  展示了16中材质

• materials_car.html
  展示了一个车辆模型在空间中跑动的效果。通过在场景中设置fog ,有一个远近的感觉；通过加载一个车辆的底图，模拟阴影的效果；加载车辆模型，根据getObjectName 获取到特定的mesh ,替换对应的material，实现自定义效果；通过grid 的移动，模拟车辆在路上行驶的效果。

• materials_standard.html
  场景背景纹理，通过background 指定。scene 的enviroment 可以指定场景中默认的envMap。场景中加载了一把枪，通过material.map 指定纹理；通过material.normalMap 指定法向量纹理，从而有不同光照强度的效果；通过roughnessMap 指定粗糙度；

• materails_stanard_nodes.html
  TODO

• materials_normalmap.html
  介绍了normalMap 法线贴图，以及specularMap 高光贴图，如果过亮，可以通过specularMap 来调整。

• materials_blending.html
  介绍mesh 同背景的混合方式 ，通过material 属性，transparent = true ,以及 blending 的不同属性来实现。

• materials_blending_custom.html
  介绍了几种纹理混合的方式，比如add 、subtract 等

• materials_bumpmap.html
  凹凸贴图，人物有了高低起伏的表面

• materials_channels.html
  介绍了nomalMap ,法向量纹理，displacement 发现偏移纹理，以及aoMap 环境遮挡纹理。介绍了这么多纹理，其实主要是解决用更少的面更逼真的还原的问题

clip

• clip.html
  通过renderer.clippingPlanes 设置global裁剪面。
  material.clipShadows 设置是否根据裁剪结果，显示阴影
  material.clippingPlanes 设置local 的裁剪面
• clip_intersection.html
  通过material 的属性 clipIntersection 决定裁剪的是交集or 差集
• clip_advanced.html
  在animate 中，实现了多层运动。物体通过rotation.x 等实现转动；通过matrix4 实现大小变换，并应用到切割平面等元素

custom attribute

• custom_attribute.html
  用在自定义shaderMaterial 场景下，attribute 和 uniform 参数，采用不用的方式传入。
  uniforms 参数直接在material 构造函数中传入；attribute 通过geometry.setAttribute(‘customAttri’, xxx)
  vec3 newPosition = position + amplitude * normal * vec3( displacement );
  来实现符合震荡规律并且棱角突出的波动效果，其中，displacement 是通过添加周期噪声变量实现棱角效果。
• custom_attribute_lines.html
  geometry 直接通过center 函数，实现居中。
• attribute_points.html
  const geometry = new THREE.BufferGeometry()
  通过实时调整上述geometry 中的size 属性，调整大小，实现闪动的效果
• attribute_points2.html
  两个geometry ，通过合并顶点得到合并后图形的position。利用点的索引，判断是哪个图形的点，实现不同颜色的效果。
  通过sortPoints ，排序，可能是避免了z-index fighting?
• attribute_points3.html
  制作正方体的边框有点意思，主要通过boxGeometry 获得一个边框的几何点，通过算法计算12条立体边框的点。

buffer geometry

• buffergeometry.html
  分别设置geometry 的属性，position 、normal 、color ， 完成geometry 的设置，完成属性设置后，需要geometry.computeBoundingSphere()，这样可以及时计算bounding** 属性。其中，看到的物体item， 通过位置，独立计算三角形的三个顶点，然后存入position 中。
  例子是通过THREE.Mesh 绘制，从而绘制的是三角形
  通过normal ，设置点的法线，从而在有光照下，呈现亮、暗的效果

• buffergeometry_points.html
  通过THREE.Points 绘制点

• buffergeometry_points_interleaved.html
  将position 以及color 存放在一个ArrayBuffer 中，通过 THREE.InterleavedBufferAttribute 设置偏移等属性，读取对应的字段。

• buffergeometry_lines.html
  通过THREE.Line 绘制线
  通过morphTarget 以及morphTargetInfluences 来设置动画

• buffergeometry_lines_indexed.html
  通过THREE.LineSegments 绘制线。lineSegment 与line 的区别是，lineSegment 用两个独立的点连成直线；而line 会用前一个点，连接下一个点，形成直线。

• buffergeometry_indexed.html
  index 是共享vertex 的方式

• buffergeometry_instancing.html
  巨多的相同物体（可以复用position） ,通过这种方式，提高渲染性能

• buffergeometry_instancing_billboards.html
  通过设置translate 属性，从而不同物体有不同的位置。

• buffergeometry_glbufferattribute.html
  通过webgl 原生方法设置geometry 属性。可以了解背后原理

• buffergeometry_drawrange.html
  通过坐标判断是否超出边界；对于x,y,z 直接取负值，实现碰撞后的反弹效果；

• buffergeometry_compression.html
  通过调整position normal 以及uv 数据的字节数，达到压缩的目的

• buffergeometry_selective_draw.html
  通过自定义material ， 通过传递属性visible 到顶点着色器，接着在顶点着色器中，传递给片元着色器。这种方式的好处是：所有的线都是通过一个mesh 实现。而常规途径，想实现部分显示隐藏的效果，需要创建N个mesh

• buffergeometry_rawshader.html
  主要使用raw shader 实现颜色的周期变化

• buffergeometry_custom_attributes.html
  实现点的变大、变小的效果

geometry

• geometries.html
  通过scene.traverse 遍历物体，并判断object.isMesh === true 获取mesh ，并实现改变变量。
• geometry_colors.html
  geometry 的顶点设置不同的颜色，从而可以看到mesh 会有很多渐变效果。
  利用canvas生成纹理，并使用THREE.CanvasTexture 使用canvas 纹理。
  物体的移动，是通过改变camera 的位置来实现。
• geometry_colors_lookuptable.html
  使用两个scene 和camera ， 分别渲染不同的内容
• geometry_convex.html
  绘制geometry points的方法。获取到点后，给THREE.BufferGeometry().setFromPoints()，这样就可以通过一个geometry ，绘制所有的点。没有理解转换成ConvexGeometry 的作用。todo
• geometry_cube.html
  简单
• geometry_dynamic.html
  通过PlaneGeometry 构建了一个非平面的图形。主要是通过改变顶点 的position 的y 值实现。
• geometry_extrude_shapes.html
  shape 产生二维平面图形，通过ExtrudeGeometry 能参数拉伸的三维图形，拉伸不仅有纵向拉伸，还可以指定拉伸路径，参数任意形状的拉伸效果
  还应用了一个mesh 指定多个material ，这样可以单独设置每个face 使用的材质
• geometry_extrude_shapes2.html
  将svg path ,转换为shapePath，进而再转换成shape ，最后通过ExtrudeGeometry 变形。
• geometry_extrude_splines.html
  实现了camera 沿着线条漫游的效果，可以进阶学习如何做漫游效果TODO
• geometry_minecraft.html
  通过planeGeometry 生成迷宫地图。其中通过一个转移矩阵，快速变化geometry 的位置。
• geometry_nurbs.html
  非均匀有理B样条曲线
• geometry_shapes.html
  多个shape ，已mesh 以及points 等形式展现。其中，shape.getPoints 获取shape 的点，shape.getSpacedPoints(50)获取50等分的点。
• geometry_spline_editor.html
  编辑样条曲线。有添加、删除控制点的逻辑
• geometry_teapoint
  不同的meterial 渲染teaport
• geometry_terrain_raycast.html
  mesh 的lookat 属性，可以指定mesh 的朝向， mesh.lookAt(intersetcts[0].face.normal)
• geometry_text.html
  显示文本，通过boundingbox 控制显示位置
• geometry_text_shapes.html
  描边包括shapes 以及shape 的属性holes
• geometry_text_stroke.html
  通过工具生成stroke 的几何图形

helpers

-helpers.html
介绍了切线helper 、法线helper 、geometry 的包围盒boxHelper、点广源PointLightHelper，还有geometry 边缘线的helper , WireframeGeometry 以及 EdegsGeometry

instancing

• instancing_dynamic.html
  通过mesh = THREE.InstancedMesh(geometry, materail, count) 构建包含count 个geometry 的几何体。每个单独的geometry ，可以通过mesh.setMatrixAt(i, maxtrix) 修改几何位置等信息

• instancing_modified.html
  接着上面的例子，构建的count 个单独geometry,他们的颜色不一样。
  第一步，geometry 设置属性，如：instanceColor , 值为count 个rgb 值
  第二步，修改material ，这样可以识别上述设置的属性。
  在material.onBeforeCompile 中，利用在material 中提前存在的钩子文本，做替换操作，从而达到修改material 的功能
  通过查看instancing_raycast.html 也可以看到，修改颜色的第二种方式是mesh.setColorAt

• instancing_performance.html
  从渲染次数以及内存占用，两个维度，评判三种渲染方法的性能。instanced, merged 以及navie ， 从对比可以看到instanced 从上述指标看，都是最优的

• instancing_raycast.html.html
  通过intersection[0].instanceId 可以获取到鼠标选中的单独的geometry

• instancing_scatter.html
  利用 MeshSurfaceSampler 取样geometry 的surface。
  利用两个instancedMesh 分别渲染花以及根茎，用相同的matrix 赋值给单独的geometry ，实现看起来像整体的效果

interactive

• interactive_buffergeometry.html
  buffergeometry 的mesh 如何交互的例子。通过intersect 的face 属性，可以获取到鼠标交互到的面。在例子中，通过获取这个面的点信息，传递给一个bufferGeometry 的三角图形，从而实现线性展示鼠标选中的面。

• interactive_cubes.html
  高亮显示选中的cube . 通过intersection[0].object 获取选中的mesh ，然后在mesh 中保存当前材质的颜色，mesh.material.emissinve.getHex()， 用于在鼠标移出后还原颜色，接着给mesh 的material 重新赋予新的颜色

• interactive_cubes_ortho.html
  这个例子使用的正交相机，上一个例子使用的是透视相机

• interactive_cubes_gpu.html
  在gpu 层面，获取到用户鼠标选中的物体。首先构建n个geometry , 然后通过帮助函数BufferGeometryUtils.mergeBufferGeometries 将n个geometry 合并成一个大的geometry ，这样在渲染的时候，仅仅渲染一次就够。
  同时，为了利用gpu 选中的功能，在另一个场景中，也构建一个同上一样的geometry , 这个每个独立的geometry 有跟id 一致的color ，从而可以依据某个位置上的color ，获取用户选中物体的id .
  最后，通过这个id , 修改高亮box 的position ， rotation 以及scale 属性

• interactive_lines.html
  绘制了50条线，每条线有50个点。高亮鼠标选中的点，是通过intersects[0].point 获取点，然后将点信息传递给高亮元素。sphereInter.position.copy(intersects[0].point)

• interactive_points.html
  选中点，修改大小的方式。本方案采用自定义material 来实现

• interacive_raycasting_points.html

• interactive_voxelpainter.html
  实现在棋盘上堆放正方块的效果。分为两个步骤，第一步，获取鼠标焦点的intersect 信息。第二步，根据上述获取到的intersect , 通过获取intersect 的position ，以及法向量，新堆放物体的位置计算公式是： position.copy(intersect.point).add(intersect.face.normal。里面还有一个小效果，鼠标移动时，物体并没有随着鼠标移动而移动，而只在格子里移动，主要是对position 又做了处理，position.divideScalar(50).floor().multiplyScalar(50) , 50是格子的宽度，这样就能保证新增的物体在格子里

layers

• layers.html
  Object3d 元素，有一个layers 属性，可以设置物体所在的层次，进而通过camera 设置需要显示的层次，实现只显示某一些层次的物体的效果
  object.layers.set(0)
  camera.layers.toggle(1)

lights

• lights_pointlights.html
  设置点光源，参数有颜色、强度以及有效距离（默认是无穷），通过给light 添加一个mesh 从而可视化的看到广源
• linghts_rectarealight.html
  设置矩形光源，利用用到一个自定义的geometry , RectAreaLightHelper 可以绘制线，同时背面绘制一个矩形，用来显示矩形灯。RectAreaLightHelper 继承自Line , 通过super(geometry, materail) 可以绘制Line , 进而通过this.add 添加矩形块。矩形块的几何信息，在updateMatrixWorld 中以及light 的信息生成。
• lights_spotlight.html
  聚光灯效果
• lights_spotlights.html
  多聚光灯的效果，整体是是单聚光灯的结构，此外采用了Tween 来分别对聚光灯的角度以及位置信息做渐变动画。更新动画属性，分别在两个位置进行，第一个位置是tween 中，自带修改light 的属性，第二个位置是requestAnimationFrame 的动画函数中，更新helper ，从而实现helper 同 light 状态的同步
• lights_phsical.html
  模拟物理光照效果，主要利用凸凹贴图和粗糙度贴图来模拟物理材质，其中，凹凸贴图bumpMap通过改变物体表面法线位置，从而生成高低明暗的效果，而粗糙度贴图roughnessMap，主要是改变漫反射，实现了越光滑的物体表面，光更强的效果。
• lights_hemisphere.html
  sphereLight 创建贴近自然的户外光照效果，此种光源无投影
  创建了一个天空色到地面色渐变的效果，通过自定义material 实现，在fragmentShader 中，颜色是通过webgl mix 根据高度混合天空色和地面色得到。
• lightprobe.html
  光照探针的效果，目前看起来，跟背景融合会跟自然一些
• lightprobe_cubecamera.html
  TODO，暂时无用途

lines

• lines_colors.html
  通过CatmullRomCurve3 生成一条曲线，可以将曲线分成很多份，（比如按照控制点的个数乘以n, n 越大，通过line 绘制就越平滑）

• lines_dashed.html
  介绍了绘制虚线的两种方案。第一种，使用Line 构建线条，然后使用LineDashedMaterial 设置颜色、dashSize 以及gapSize。第二种，使用LineSegments 构建线条段，然后也是使用LineDashedMaterial 设置虚线属性。思考：什么情况下使用line 和 lineSegments ？如果一笔能画完的，用line ,如果需要分段画，就用lineSegment

• line_fat
  宽线条效果。在LineBasicMaterial 中，属性lineWidth 一般没有效果，所有才需要其他解决方案。本方案利用three 的扩展库Line2 以及 扩展material ，实现线宽设置。
  其中，还学习了如何在一个canvas 显示多个区域的方法，通过renderer.setScissorTest（true）,开启裁剪，然后通过renderer.setScissor 设置裁剪范围，最后通过renderer.setViewport 同上一致的范围，保证在裁剪范围中，能完整显示整个scene

• lines_fat_wireframe.html
  一个体的线宽设置。THREE.WireframeGeometry 能生成一个像素宽的线宽。使用three的扩展库WireframeGeometry2 以及 LineMaterail 生成一个体的线宽效果

• lines_sphere.html
  生成球面镜像的线。主要是通过xyz 在[-1,1]范围内，生成随机点，然后通过vertex.multiplyScalar 生成另一个随机值，这样通过lineSegment 就可以得到线段。

loader

• loader_3dm.html
  加载3dm 模型，cad 等软件文件格式。3DM是Rhinoceros的开源3D模型格式，也是三维建模工具Rhino3D使用的主文件格式，其他的CAD软件也可以使用3DM格式。 3DM文件使CAD、CAM、CAE和计算机图形软件都可以使用NURBS和多边形网格表示来精确地保存和交换3D几何图形。
• loader_3ds.html
  加载3ds 模型，3d max .对于加载的模型，可以修改child.material ，达到动态改变渲染效果
• loader_3mf.html 以及loader_3mf_materials.html
  3D 制造格式(3MF) 是基于XML 的标准、独立的文件格式，其中包含增材制造过程(如3D 打印) 所需的基本数据。
  里面介绍了loadingManager 配合loader 一起使用，可以监控loader 的完成情况，有onPregress 、onLoad 、onStart 等钩子函数
• loader_amf.html
  AMF(Additive Manufacturing File)是将3D模型转换为数字 文件用于3D打印及增材制造的新文件标准。 众所周知，在AMF出现之前，STL已经被广泛的使用在3D打印/增材制造 中，已经成为事实的3D打印/增材制造技术标准。
• loader_bvh.html
  BVH 是一种通用的人体特征动画文件格式,，广泛地被当今流行的各种动画制作软件支持。 通常可从记录人类行为运动的运动捕获硬件获得。
• loader_collada_kinematics.html
  .dae. DAE 是纯文本的模型格式，其本质就是一个单纯的xml文件。 相比fbx，对dae格式模型的载入我们拥有非常高的自由控制，这也是最复杂的地方。
• loader_draco.html
  Draco 是⼀个开源库，由Google 开发，⽤于压缩和解压3D ⼏何图形meshes,⽬的是 为了改进3D 模型的存储和传输
  。。。

lod

• lod.html
  细节层次，根据距离相机的位置，显示不同的细节层次。可以在lod 加入不同层次的mesh,从而实现上述效果

math

• math_obb.html
  obb 有方向的包围盒，相对于aabb,更紧凑。用于碰撞检测以及射线拾取物体

• math_orientation_transform.html
  目标物体位置发生变化，时刻指向他的物体，也同时发生变化。主要利用通过lookat 获取旋转矩阵，进而获取四元数。四元数更合适做插值运算，能实现动画慢慢指向物体的效果

modifier

• modifier_curve.html
  CatmullRomCurve3 根据多个控制点，生成平滑的样条曲线。还介绍了通过Flow 实现mesh 在曲线上运动的效果，注意这里mesh 变成了柔性的物体，整体物体都在曲线上
• modifier_simplifier.html
  减少模型顶点

points

• points_billboards.html
  利用一个BufferGeometry，构建很多点。效果展示了material 中，参数sizeAttenuation 的左右，靠近camera ,size 会感觉大一些
• points_dynamic.html
  一个物体的点图，通过读取模型的所有mesh ,根据mesh 的geometry.attributes.position 读取到所有的点。
• points_waves.html
  实现点按照正弦规律运动

effects

lensflares.html
镜头光晕效果。
lightningstrike.html
放电效果