总字数 1.2k
预计阅读时间 5 分钟
自定义几何体
Three.js当中的几何体都是由若干个三角形构成的
哪怕是球形、圆柱形这些立体图形,也不存在真正的曲面,只不过这些三角形越是细小,拼凑起来越接近曲面的效果
基于这种方式,我们可以构造自定义的图形
需要使用类型化数组TypedArray
1 | const geometry = new THREE.BufferGeometry(); //创建一个Buffer类型几何体对象 |
上面的代码中使用的是Uint8Array
, 实际上可以使用任何一种类型数组
点材质和线材质
上面的例子当中使用的是网格材质
threejs还提供了点材质和线材质
1 | // 点材质 |
1 | // 线材质 |
设置每个顶点的颜色
1 | const geometry = new THREE.BufferGeometry(); //创建一个Buffer类型几何体对象 |
这个例子当中与上面的区别除了指定每个顶点的颜色之外
还需要给材质的vertexColors
设置为THREE.VertexColors
该属性的默认值是THREE.NoColors
, 意思就是模型的颜色取决于材质的color
如果把上述的方式使用到三角面材质上
可以得到渐变色的面
顶点坐标复用
由于threejs当中的图形都是由若干个三角形拼接而成
所以实际应用当中, 肯定是多个相邻三角形的顶点重合
如果每个三角形都要分别指定3个顶点的坐标, 数据肯定是非常冗余的
所以可以进行顶点坐标的复用
同时也不受限于坐标定义的顺序
1 | const geometry = new THREE.BufferGeometry(); //创建一个Buffer类型几何体对象 |
Vector3和Color
除了使用BufferGeometry
之外, 我们也可以使用Vector3
和Color
来创建自定义几何体
它们是基于Geometry
这个API进行使用的
Threejs渲染的时候会先把 Geometry 转化为 BufferGeometry 再解析几何体顶点数据进行渲染
Vector3表示三维向量, 也可以理解为点的坐标
1 | const geometry = new THREE.Geometry() |