Three.js教程:设置Geometry顶点位置、顶点颜色数据
推荐:将NSDT场景编辑器加入你的3D工具链
其他系列工具:NSDT简石数字孪生
前面几篇文章通过缓冲类型几何体BufferGeometry给大家讲解了顶点位置、颜色、法向量、索引数据,本节课给大家引入一个新的threejs几何体APIGeometry。几何体Geometry
和缓冲类型几何体BufferGeometry
表达的含义相同,只是对象的结构不同,Threejs渲染的时候会先把Geometry
转化为BufferGeometry
再解析几何体顶点数据进行渲染。
Vector3定义顶点位置坐标数据
Vector3
是threejs的三维向量对象,可以通过Vector3
对象表示一个顶点的xyz坐标,顶点的法线向量。
几何体Geometry
的顶点位置属性geometry.vertices
和缓冲类型几何体BufferGeometry
顶点位置属性BufferGeometry.attributes.position
是对应的。
var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry
var p1 = new THREE.Vector3(50, 0, 0); //顶点1坐标
var p2 = new THREE.Vector3(0, 70, 0); //顶点2坐标
var p3 = new THREE.Vector3(80, 70, 0); //顶点3坐标
//顶点坐标添加到geometry对象
geometry.vertices.push(p1, p2, p3);
Color定义顶点颜色数据
通过threejs顶点颜色对象Color
可以定义几何体顶点颜色数据,然后顶点颜色数据构成的数组作为几何体Geometry
顶点颜色属性geometry.colors
的值。
几何体Geometry
的顶点颜色属性geometry.colors
和缓冲类型几何体BufferGeometry
顶点颜色属性BufferGeometry.attributes.color
是对应的。
// Color对象表示顶点颜色数据
var color1 = new THREE.Color(0x00ff00); //顶点1颜色——绿色
var color2 = new THREE.Color(0xff0000); //顶点2颜色——红色
var color3 = new THREE.Color(0x0000ff); //顶点3颜色——蓝色
//顶点颜色数据添加到geometry对象
geometry.colors.push(color1, color2, color3);
注意设置几何体Geometry
顶点颜色属性geometry.colors
,对网格模型Mesh
是无效的,对于点模型Points
、线模型Line
是有效果。网格模型情况几何体Geometry
顶点颜色如何设置可以参考下一节课。
材质属性.vertexColors
注意使用顶点颜色数据定义模型颜色的时候,要把材质的属性vertexColors
设置为THREE.VertexColors
,这样顶点的颜色数据才能取代材质颜色属性.color
起作用。
//材质对象
var material = new THREE.MeshLambertMaterial({
// color: 0xffff00,
vertexColors: THREE.VertexColors, //以顶点颜色为准
side: THREE.DoubleSide, //两面可见
});