threejs 几何体顶点位置数据和点模型对象Points

js yekong

缓冲类型几何体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

喜欢