二、Three.js几何体BufferGeometry顶点笔记

原创

已于 2025-11-28 15:10:12 修改 · 596 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#笔记

于 2025-02-18 12:01:30 首次发布

一、几何体顶点位置数据和点模型

备注：“本文中部分核心知识点整理自老师的授课网站”

网站地址：http://www.webgl3d.cn/pages/aac9ab/

1、缓冲类型几何体`BufferGeometry`

threejs的长方体BoxGeometry、球体SphereGeometry等几何体都是基于BufferGeometry类构建的，BufferGeometry是一个没有任何形状的空几何体，你可以通过BufferGeometry自定义任何几何形状，具体一点说就是定义顶点数据。

//创建一个空的几何体对象
const geometry = new THREE.BufferGeometry();

2、`BufferAttribute`定义几何体顶点数据

通过javascript类型化数组 Float32Array创建一组xyz坐标数据用来表示几何体的顶点坐标。

//类型化数组创建顶点数据
const vertices = new Float32Array([
    0, 0, 0, //顶点1坐标
    50, 0, 0, //顶点2坐标
    0, 100, 0, //顶点3坐标
    0, 0, 10, //顶点4坐标
    0, 0, 100, //顶点5坐标
    50, 0, 10, //顶点6坐标
]);

通过threejs的属性缓冲区对象BufferAttribute 表示threejs几何体顶点数据。

// 创建属性缓冲区对象
//3个为一组，表示一个顶点的xyz坐标
const attribue = new THREE.BufferAttribute(vertices, 3);

3、设置几何体顶点`.attributes.position`

通过geometry.attributes.position设置几何体顶点位置属性的值BufferAttribute。赋值给几何体，把几何体绑定起来。

// 设置几何体attributes属性的位置属性
geometry.attributes.position = attribue;

4、点模型`Points`

点模型Points和网格模型Mesh一样，都是threejs的一种模型对象，只是大部分情况下都是用Mesh表示物体。

网格模型Mesh有自己对应的网格材质，同样点模型Points有自己对应的点材质PointsMaterial

// 点渲染模式
const material = new THREE.PointsMaterial({
    color: 0xffff00,
    size: 10.0 //点对象像素尺寸
});

几何体geometry作为点模型Points参数，会把几何体渲染为点，把几何体作为Mesh的参数会把几何体渲染为面。

const points = new THREE.Points(geometry, material); //点模型对象

5、全部代码

import * as THREE from 'three'

//创建一个空的几何体对象
const geometry = new THREE.BufferGeometry();
//类型化数组创建顶点数据
const vertices = new Float32Array([
    0, 0, 0, //顶点1坐标
    50, 0, 0, //顶点2坐标
    0, 100, 0,