缓冲类型几何体BufferGeometry
threejs的长方体BoxGeometry、球体SphereGeometry等几何体都是基于
BufferGeometry类构建的,BufferGeometry是一个没有任何形状的空几何体,你可以通过 BufferGeometry自定义任何几何形状,具体一点说就是定义顶点数据。
定义几何体顶点数据BufferAttribute
通过javascript类型化数组Float32Array 创建一组xyz坐标数据用来表示几何体的顶点坐
标。
const vertices = new Float32Array([
0, 0, 0,
50, 0, 0,
0, 100, 0,
0, 0, 10,
0, 0, 100,
50, 0, 10,
])
通过threejs的属性缓冲区对象BufferAttribute表示threejs几何体顶点数据。
const attribue = new THREE.BufferAttribute(vertices, 3);
设置几何体顶点.attributes.position
通过 geometry.attributes.position
设置几何体顶点位置属性的值 BufferAttribute
.
// 设置几何体attributes属性的位置属性
geometry.attributes.positon = attribue;
点模型 Points
点模型Points和网格模型Mesh一样,都是threejs的一种模型对象,只是大部分情况下都是用Mesh表示物体。
网格模型Mesh有自己对应的材质,同样点模型Points 有自己对应的点材质PointsMaterial
// 创建一个空的几何体顶对象
const geometry = new THREE.BufferGeometry()
//类型化数组创建顶点数据
const vertices = new Float32Array([
0, 0, 0,
50, 0, 0,
0, 100, 0,
0, 0, 10,
0, 0, 100,
50, 0, 10,
])
// BufferAttribute属性緩沖对象表示顶点数据
const attribute = new THREE.BufferAttribute(vertices, 3);
// 设置几何体attributes属性的位置属性
geometry.attributes.positon = attribute;
// 点材质
const material = new THREE.PointsMaterial({
color: 0x00ff00,
size: 20
})
// 定义了一个点模型对象
const points = new THREE.Points(geometry, material)
export default points