Three.js开发必备：几何体BufferGeometry顶点详解

天生我材必有用_吴用2025-06-12 17:07

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

缓冲类型几何体BufferGeometry

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

顶点模型

第一步、创建一个空的几何体对象

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

第二步、添加顶点数据

typescript 复制代码 
// 添加顶点数据
const vertices = new Float32Array([
    0,0,0,
    50,0,0,
    0,100,0,
    0,0,10,
    0,0,100,
    50,0,10
])

第三步、3个为一组，表示一个顶点的xyz坐标

typescript 复制代码 
const attribue = new THREE.BufferAttribute(vertices,3)

第四步、设置几何体顶点属性与点材质

typescript 复制代码 
geometry.attributes.position = attribue;
// 点材质
const material = new THREE.PointsMaterial({
    color:0xffff00,
    size:10
})
const points = new THREE.Points(geometry,material)

第五步、导出点模型

typescript 复制代码 
export default points;

第六步、场景中引入添加点模型

typescript 复制代码 
import  model  from './model.js';//模型对象
//场景
const scene = new THREE.Scene();
scene.add(model); //模型对象添加到场景中

第七步、查看效果

线模型Line渲染顶点数据

把几何体作为线模型Line的参数，渲染效果是从第一个点开始到最后一个点依次连城线。

第一步、设置线材质对象

typescript 复制代码 
// 点材质
const material = new THREE.LineBasicMaterial({
    color:0xffff00,
})

第二步、创建线模型对象

typescript 复制代码 
// 创建线模型对象
const line = new THREE.Line(geometry,material)

第三步、场景中引入添加线模型

typescript 复制代码 
import  line  from './model.js';//模型对象
//场景
const scene = new THREE.Scene();
scene.add(line); //模型对象添加到场景中

第四步、查看效果

第五步、闭合线模型定义及效果

typescript 复制代码 
const line = new THREE.LineLoop(geometry,material)

第六步、非连续线模型定义及效果

typescript 复制代码 
const line = new THREE.LineSegments(geometry,material)

网格模型(三角形概念)

网格模型Mesh渲染自定义几何体BufferGeomerty的顶点坐标，也就是三角形面的概念。 网格模型Mesh其实就是一个一个三角形面拼接起来形成的，使用网格模型Mesh渲染几何体geometry，就是几何体所有顶点坐标三个为一组，构成一个三角形，多个定点构成多个三角形，就可以采用模拟表示物体的表面。

正反面基本概念

正面：逆时针。 反面：顺时针。 空间中一个三角形有正反两个面，three.js的规则是根据你的眼睛也就是相机对着三角形的一个面，如果三个顶点的顺序是逆时针方向，该面是为正面，如果三个顶点的顺序是顺时针，该面视为反面。

基本三角形面

typescript 复制代码 
// 设置几何体的顶点位置属性
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// 引入stats性能监视器
import Stats from 'three/examples/jsm/libs/stats.module.js';

// 创建3D场景对象Scene
const scene = new THREE.Scene();

// 创建一个空的几何体定点对象
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
])

// 3个为一组，表示一个顶点的xyz坐标
const attribue = new THREE.BufferAttribute(vertices,3)

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

const material = new THREE.MeshBasicMaterial({
    color:0x00ffff,
    side:THREE.FrontSide // 默认只有正面可见
})
// 创建线模型对象
const mesh = new THREE.Mesh(geometry,material)

export default mesh;

导入场景加入三角面：

typescript 复制代码 
import  mesh  from './model.js';//模型对象
//场景
const scene = new THREE.Scene();
scene.add(mesh); //模型对象添加到场景中

正面可见

typescript 复制代码 
const material = new THREE.MeshBasicMaterial({
    color:0x00ffff,
    side:THREE.FrontSide // 默认只有正面可见
})
// 创建线模型对象
const mesh = new THREE.Mesh(geometry,material)
export default mesh;

双面可见

threeJS的材质默认正面刻间，反面不可见。

只有背面可见

typescript 复制代码 
const material = new THREE.MeshBasicMaterial({
    color:0x00ffff,
    side:THREE.BackSide // 默认只有正面可见
})
// 创建线模型对象
const mesh = new THREE.Mesh(geometry,material)
export default mesh;

自定义矩形几何体

上面说的都是自定义几何体BufferGeometry的基础，可以去尝试自己去构建一个矩形平面几何体。

定义矩形几何体顶点坐标

一个矩形平面，至少通过两个三角形拼接而成，而且两个三角形有两个顶点的坐标是重合的。 注意三角形的正反面问题：保证矩形平面两个三角形的正面都是一样的，从另一个方向观察两个三角形都是顺时针或者逆时针。 根据上图坐标添加顶点数据

typescript 复制代码 
// 添加顶点数据
const vertices = new Float32Array([
    0,0,0,
    80,0,0,
    80,80,0,

    0,0,0,
    80,80,0,
    0,80,0
])

// 3个为一组，表示一个顶点的xyz坐标
const attribue = new THREE.BufferAttribute(vertices,3)

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

const material = new THREE.MeshBasicMaterial({
    color:0x00ffff,
})
// 创建线模型对象
const mesh = new THREE.Mesh(geometry,material)

export default mesh;

几何体顶点索引数据

基本概念

网格模型Mesh对应的几何体BufferGeometry，才分为多个三角后，很多三角形重合顶点位置坐标是相同的，这时候如果你想减少顶点坐标数据，可以借助顶点索引geometry.index来实现。 通过js类型化数组Uint16Array创建顶点索引.index数据。 根据下面顶点坐标

typescript 复制代码 
const vertices = new Float32Array([
    0,0,0,
    80,0,0,
    80,80,0,

    0,0,0,
    80,80,0,
    0,80,0
])

第一步、删除重复顶点数据

不难发现，上面的 [0,0,0]，[80,80,0]已经重复，通过顶点索引可以写成

typescript 复制代码 
// 添加顶点数据
const vertices = new Float32Array([
    0,0,0,  // 0
    80,0,0,  // 1
    80,80,0,  // 2
    0,80,0   // 3
])

第二步、类型化数组创建顶点数据

typescript 复制代码 
// 类型化数组创建顶点数据
const indexes = new Uint16Array([
    0,1,2,0,2,3
])

第四步、索引数据赋值给几何体index属性

通过threejs的属性缓冲区对象BufferAttribute表示几何体顶点索引.index

typescript. 复制代码 
// 设置几何体的顶点位置属性
geometry.attributes.position = attribue;
// 索引数据赋值给几何体index属性
geometry.index = new THREE.BufferAttribute(indexes,1)

第五步、查看效果

顶点法线数据

数学发现概念，比如一个平面，法线就是该平面的垂线，如果是光滑曲面，一点的法线就是该点切面的法线，threeJS中法线和数学中法线概念差不多，姿势定义的时候比较灵活。

typescript 复制代码 
const norlmals = new Float32Array([
    0,0,1, // 顶点1法向量
    0,0,1, // 顶点2法向量
    0,0,1, // 顶点3法向量
    0,0,1, // 顶点4法向量
    0,0,1, // 顶点5法向量
    0,0,1  // 顶点6法向量
])
//定义了顶点法线数据或者说定点法向量数据
geometry.attributes.norlmals = new THREE.BufferAttribute(norlmals,3)

geometry.index = new THREE.BufferAttribute(indexes,1)

const material = new THREE.MeshBasicMaterial({
    color:0x00ffff,
})
// 创建线模型对象
const mesh = new THREE.Mesh(geometry,material)
export default mesh;

自带几何体顶点结构,基类(BufferGeometry)

three提供了矩形平面，长方体，球体等各种形状的几何体，这些几何体都有一个共同的父类BufferGeometry，这意味着这些及课题都有哪些属性和方法可以直接查询BufferGeometry文档即可。

矩形平面

typescript 复制代码 
import * as THREE from 'three'
const geometry = new THREE.PlaneGeometry(100,100) // 定义矩形平面
const material = new THREE.MeshLambertMaterial({
    color:0x00ffff
})
const mesh = new THREE.Mesh(geometry,material)
export default mesh;

矩形几何体

typescript 复制代码 
import * as THREE from 'three'
const geometry = new THREE.BoxGeometry(100,100,150) // 定义矩形几何体
const material = new THREE.MeshLambertMaterial({
    color:0x00ffff
})
const mesh = new THREE.Mesh(geometry,material)
export default mesh;

材质属性.wireframe：线条模式渲染，查看几何体三角形结构。

几何体细分数

threejs很多几何体都提供了细分数相关的参数，这里以矩形平面几何体PlaneGeometry为例 矩形平面几何体至少需要两个三角形拼接而成。 把一个矩形分为两份，每个矩形2个三八角形，总共是4个三角形。 把一个矩形分为4份，每个矩形两个3角形，总共是8个三角形。

球体细分数

typescript 复制代码 
import * as THREE from 'three'
const geometry = new THREE.SphereGeometry(50) // 定义矩形平面
const material = new THREE.MeshLambertMaterial({
    color:0x00ffff,
    wireframe:true
})
const mesh = new THREE.Mesh(geometry,material)
export default mesh;

细分数越多越趋近于圆形： const geometry = new THREE.SphereGeometry(50,6,6) // 定义矩形平面

三角形数量与性能

对于一个曲面而言，细分数越大，表面越光滑，但是三角形和顶点数量却越多，几何体三角形数量或者说顶点数量直接影响three.js的渲染性能，在不影响渲染效果的情况下，一般尽量越少越好。

几何体的旋转

几何体通过.rotateX()，.rotateY()方法可以对几何体进行旋转，本是都是改变几何体的顶点数据。 geometry.rotateX(Math.PI/5)

几何体的缩放

几何体通过scale() 进行缩放：const geometry = new THREE.PlaneGeometry(100,100) // 定义矩形平面

几何体平移方法

几何体通过.translate()进行平移：geometry.translate(50,0,0)

几何体居中

居中：geometry.center()

完结~

相关推荐
离岸听风2 分钟前
Docker 构建文件代码说明文档
前端
VisuperviReborn7 分钟前
前端开发者的知识深度革命，从打牢基础开始
前端·javascript·架构
Nano7 分钟前
Vue响应式系统的进化：从Vue2到Vue3.X的深度解析
前端·vue.js
工业3D_大熊9 分钟前
3D Web轻量化引擎HOOPS Communicator赋能一线场景，支持本地化与动态展示？
前端·3d
某人的小眼睛13 分钟前
vue3 element-plus 大文件切片上传
前端·vue.js
东坡白菜15 分钟前
最快实现的前端灰度方案
前端
curdcv_po19 分钟前
🔴 你老说拿下 react，真的 拿下 了吗
前端
魔都吴所谓20 分钟前
[前端]HTML模拟实现一个基于摄像头的手势识别交互页面
前端·html·交互
来自星星的猫教授22 分钟前
Vue 3.6前瞻：响应式性能革命与Vapor模式展望
前端·javascript·vue.js
涵信25 分钟前
第九节 高频代码题-实现Sleep函数（异步控制）
前端·javascript·typescript
热门推荐
01Coze扣子平台完整体验和实践（附国内和国际版对比）02【图像处理与机器视觉】XJTU期末考点03KGG转MP3工具|非KGM文件|解密音频04从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑05海康Visionmaster-常见问题排查方法-启动阶段06YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】07扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解08DeepSeek各版本说明与优缺点分析09【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！10坚果投影仪J10如何用苹果Siri开关机并和米家联动