针对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
放电效果