当前位置：首页 > SEO基础 >

Three.js中缓冲类型几何体的学习指南是什么？

96SEO 2026-02-19 11:42 4

href="https://www.cnblogs.com/ljbguanli/p/19623452"
title="发布于
aria-level="2">实用指南：学习Three.js--缓冲类型几何体(BufferGeometry)
xmlns="http://www.w3.org/2000/svg">
d="M5,0
style="-webkit-tap-highlight-color:
rgba(0,
0)">
学习Three.js–缓冲类型几何体(BufferGeometry)
id="_2">前置核心说明
`BufferGeometry`
Three.js
中所有几何体的底层核心（BoxGeometry/SphereGeometry
等预设几何体均基于它构建），也是官方唯一推荐使用的几何体类型（旧版
BufferGeometry）

类型	核心特点	性能	官方态度
BufferGeometry（缓冲几何体）	顶点数据存储在「类型化数组」（Float32Array 等）中，直接对接直接读取，无数据转换）	主推，唯一维护
Geometry（旧版几何体）	顶点数据存储在普通数组中，需转换后才能给 GPU 使用	较低（多一层数据转换）	废弃，不再维护

类型

核心特点

性能

官方态度

BufferGeometry（缓冲几何体）

顶点数据存储在「类型化数组」（Float32Array

等）中，直接对接

直接读取，无数据转换）

主推，唯一维护

Geometry（旧版几何体）

顶点数据存储在普通数组中，需转换后才能给

GPU

使用

较低（多一层数据转换）

废弃，不再维护

id="_12">核心逻辑

BufferGeometry

本身是「空容器」，没有任何预设形状，你需要通过定义顶点数据（坐标、颜色、纹理坐标等）来「自定义任意几何形状」，核心是：
类型化数组（顶点数据）→

渲染对象（Mesh/Line/Points）

一、BufferGeometry

核心概念与基础用法

核心术语解释

顶点（Vertex）：3D
X/Y/Z
三个坐标值组成，是构成几何体的最基本单元；
类型化数组：如
Float32Array（32位浮点数组），专门用于存储顶点数据，比普通数组更节省内存、GPU
读取更快；
BufferAttribute：Three.js
Three.js
「数组中的数据如何分组解析」（比如每3个值为一组表示一个顶点坐标）；
属性（Attribute）：几何体的「数据维度」，如
position（顶点坐标）、color（顶点颜色）、uv（纹理坐标）、normal（法线）等，一个几何体可绑定多个属性。

2.
基础使用流程

以下是从「创建空几何体」到「渲染自定义形状」的完整流程

id="1_BufferGeometry__28">步骤1：创建空的
BufferGeometry
punctuation">.BufferGeometry
class="token
punctuation">;
id="2_34">步骤2：定义顶点数据（类型化数组）
顶点数据必须用
类型化数组（不能用普通数组），常用：
`Float32Array`：存储浮点型数据（坐标、颜色、UV
等，最常用）；
`Uint16Array`：存储无符号16位整数（索引数据）。
顶点坐标数据：每3个值为一组（X,Y,Z），表示一个顶点的3D坐标
class-name">Float32Array
class="token
punctuation">;
id="3_BufferAttribute_52">步骤3：创建
BufferAttribute
punctuation">.BufferAttribute
class="token
punctuation">(vertices
class="token
punctuation">;
BufferAttribute
参数
类型默认值核心说明
`array` TypedArray — 必传，存储顶点数据的类型化数组
`itemSize` Number — 必传，每组的元素数量（坐标=3，颜色=3/4，UV=2）
`normalized` Boolean `false` 是否归一化数据（颜色数据常用，将0-255转为0-1）
`usage` Number `THREE.StaticDrawUsage` 数据使用方式（静态/动态，默认静态即可）
id="4_65">步骤4：将属性绑定到几何体
"position"（坐标）、"color"（颜色）、"uv"（纹理）
geometry
function">setAttribute
class="token
punctuation">;
id="5_72">步骤5：创建材质和渲染对象
punctuation">.MeshBasicMaterial
class="token
property">wireframe
class="token
是否显示线框（true=线框，false=实体）
punctuation">.DoubleSide
punctuation">.Mesh
class="token
punctuation">(geometry
class="token
punctuation">;
核心参数与常用属性
punctuation">.BufferGeometry
class="token
punctuation">;
2.
核心属性
属性名类型说明示例
`attributes` Object 存储所有绑定的属性（position/color/uv
等）
`geometry.attributes.position`
获取坐标属性
`index` BufferAttribute 索引缓冲区（优化顶点重复，下文详解） `geometry.setIndex(索引数组)`
`boundingBox` Box3 几何体的包围盒（自动计算，用于碰撞检测/裁剪） `geometry.computeBoundingBox()`
计算包围盒
`boundingSphere` Sphere 几何体的包围球 `geometry.computeBoundingSphere()`
`drawRange` Object 渲染范围（只渲染部分顶点） `geometry.drawRange start: 只渲染前3个顶点`
id="3__107">3.
核心方法
方法名说明示例
`setAttribute(name,`
`attribute)`
绑定属性到几何体 `geometry.setAttribute('position',`
`attr)`
`getAttribute(name)` 获取已绑定的属性 `geometry.getAttribute('position')`
`removeAttribute(name)` 移除属性 `geometry.removeAttribute('color')`
`setIndex(array)` 设置索引缓冲区 `geometry.setIndex(new`
`Uint16Array([0,1,2]))`
`computeBoundingBox()` 计算几何体包围盒 `geometry.computeBoundingBox()`
`computeBoundingSphere()` 计算几何体包围球 `geometry.computeBoundingSphere()`
`computeVertexNormals()` 计算顶点法线（让光照生效） `geometry.computeVertexNormals()`
`dispose()` 销毁几何体（释放内存） `geometry.dispose()`
三、BufferGeometry
进阶用法
索引缓冲区（Index）：减少顶点重复
问题场景
绘制一个矩形（由两个三角面组成），直接定义顶点需要6个（重复2个）：
`(0,0,0)、(1,0,0)、(0,1,0)、(1,0,0)、(1,1,0)、(0,1,0)`
id="_128">索引解决方案
定义4个唯一顶点
6个索引（指定三角面的顶点顺序），节省内存：
punctuation">.BufferGeometry
class="token
class-name">Float32Array
class="token
punctuation">.BufferAttribute
class="token
punctuation">(vertices
class="token
function">setAttribute
class="token
步骤3：定义索引（每3个值为一组，指定三角面的顶点索引）
第一个三角面：顶点0→1→2；第二个三角面：顶点1→3→2
class-name">Uint16Array
class="token
punctuation">.BufferAttribute
class="token
punctuation">(indices
class="token
punctuation">.MeshBasicMaterial
class="token
punctuation">.DoubleSide
punctuation">.Mesh
class="token
punctuation">(geometry
class="token
punctuation">;
核心优势
顶点数量从6个减少到4个，数据量降低33%；
复杂几何体（如球体）可减少大量重复顶点，性能提升显著。
顶点颜色（Color
Attribute）：每个顶点自定义颜色
id="_163">核心逻辑
给几何体绑定
`color`
true，即可让每个顶点显示自定义颜色，三角面内自动渐变。
punctuation">.BufferGeometry
class="token
class-name">Float32Array
class="token
function">setAttribute
class="token
punctuation">.BufferAttribute
class="token
punctuation">(vertices
class="token
步骤2：定义顶点颜色（每3个值为一组，RGB，0-1范围）
class-name">Float32Array
class="token
function">setAttribute
class="token
punctuation">.BufferAttribute
class="token
punctuation">(colors
class="token
punctuation">.MeshBasicMaterial
class="token
property">vertexColors
class="token
punctuation">.DoubleSide
punctuation">.Mesh
class="token
punctuation">(geometry
class="token
punctuation">;
效果
三角面会从红色顶点渐变到绿色，再渐变到蓝色，实现多彩渐变效果。
id="3_Normal_196">3.
法线属性（Normal）：让光照生效
`MeshStandardMaterial`
等受光照影响的材质，需要「法线数据」才能计算光影，可手动定义或自动计算：
function">computeVertexNormals
class="token
class-name">Float32Array
class="token
function">setAttribute
class="token
punctuation">.BufferAttribute
class="token
punctuation">(normals
class="token
punctuation">;
坐标（0-1范围）用于将2D图片贴到3D几何体上，每2个值为一组（U=横向，V=纵向）：
class-name">Float32Array
class="token
function">setAttribute
class="token
punctuation">.BufferAttribute
class="token
punctuation">.TextureLoader
class="token
string">'texture.jpg'
class="token
punctuation">.MeshBasicMaterial
class="token
punctuation">;
id="_230">四、完整实战示例（自定义三角面+索引+顶点颜色）
punctuation">>
class="token
punctuation"><html
punctuation">"zh-CN
class="token
punctuation">"
class="token
punctuation">>
class="token
punctuation"><head
class="token
punctuation">>
class="token
punctuation"><meta
punctuation">"UTF-8
class="token
punctuation">"
class="token
punctuation">>
class="token
punctuation"><title
class="token
punctuation">>BufferGeometry
完整示例
punctuation"></title
class="token
punctuation">>
class="token
punctuation"><style
class="token
punctuation">>
class="token
punctuation">}
class="token
punctuation"></style
class="token
punctuation">>
class="token
punctuation"></head
class="token
punctuation">>
class="token
punctuation"><body
class="token
punctuation">>
class="token
punctuation"><script
punctuation">"module
class="token
punctuation">"
class="token
punctuation">>
class="token
string">'https://threejsfundamentals.org/threejs/resources/threejs/r132/build/three.module.js'
class="token
string">"https://threejsfundamentals.org/threejs/resources/threejs/r132/examples/jsm/controls/OrbitControls.js"
class="token
punctuation">.Scene
class="token
punctuation">.PerspectiveCamera
class="token
punctuation">.innerWidth
class="token
punctuation">.innerHeight
class="token
punctuation">.WebGLRenderer
class="token
property">antialias
class="token
punctuation">;renderer
class="token
punctuation">(window
class="token
punctuation">.innerWidth
class="token
punctuation">.innerHeight
class="token
punctuation">;document
class="token
function">appendChild
class="token
punctuation">(renderer
class="token
punctuation">.domElement
class="token
punctuation">;camera
class="token
punctuation">.position
class="token
BufferGeometry（带索引+顶点颜色）
class="token
punctuation">.BufferGeometry
class="token
class-name">Float32Array
class="token
punctuation">;geometry
class="token
function">setAttribute
class="token
punctuation">.BufferAttribute
class="token
punctuation">(vertices
class="token
class-name">Float32Array
class="token
punctuation">;geometry
class="token
function">setAttribute
class="token
punctuation">.BufferAttribute
class="token
punctuation">(colors
class="token
class-name">Uint16Array
class="token
punctuation">;geometry
class="token
punctuation">.BufferAttribute
class="token
punctuation">(indices
class="token
计算法线（可选，若用受光照材质则需要）geometry
class="token
function">computeVertexNormals
class="token
punctuation">.MeshBasicMaterial
class="token
property">vertexColors
class="token
punctuation">.DoubleSide
class="token
property">wireframe
class="token
punctuation">.Mesh
class="token
punctuation">(geometry
class="token
punctuation">;scene
class="token
punctuation">.OrbitControls
class="token
punctuation">(camera
class="token
punctuation">.domElement
class="token
punctuation">;controls
class="token
punctuation">.enableDamping
punctuation">;controls
class="token
punctuation">.dampingFactor
function">requestAnimationFrame
class="token
punctuation">(animate
class="token
punctuation">.rotation
class="token
punctuation">.rotation
class="token
punctuation">;controls
class="token
punctuation">;renderer
class="token
punctuation">(scene
class="token
function">addEventListener
class="token
punctuation">{camera
class="token
punctuation">.innerWidth
punctuation">.innerHeight
class="token
punctuation">;camera
class="token
function">updateProjectionMatrix
class="token
punctuation">;renderer
class="token
punctuation">(window
class="token
punctuation">.innerWidth
class="token
punctuation">.innerHeight
class="token
punctuation">;
class="token
punctuation"></script
class="token
punctuation">>
class="token
punctuation"></body
class="token
punctuation">>
class="token
punctuation"></html
class="token
punctuation">>
alt="在这里插入图片描述"
src="https://i-blog.csdnimg.cn/direct/9a2f2d8a71fe48b595316052e4d8662c.png">
场景中显示一个彩色矩形（由两个三角面组成）；
矩形顶点分别为红、绿、蓝、黄，面内自动渐变；
支持鼠标旋转/缩放视角，矩形缓慢旋转。
id="_327">五、注意事项与性能优化
1.
关键注意点
类型化数组必须正确：顶点坐标用
`Uint16Array`/`Uint32Array`，不能混用；
itemSize
必须匹配：坐标=3，颜色=3/4，UV=2，索引=1，错误会导致几何体显示异常；
双面渲染：自定义几何体默认只渲染正面，需设置
`side:`
`避免背面不可见；`
`内存释放：不再使用的几何体，必须调用 geometry.dispose() id="2__334">2. 性能优化技巧`
`使用索引缓冲区：减少重复顶点，降低数据量；`
`控制顶点数量：复杂几何体按需分段，避免顶点过多；`
`静态数据复用：相同形状的几何体复用，无需重复创建；`
`drawRange局部渲染：只渲染需要显示的顶点范围，减少计算。`
`id="_342">核心总结`
`核心地位：BufferGeometry Three.js 所有几何体的底层核心，官方唯一推荐使用；`
`核心流程：类型化数组→BufferAttribute→setAttribute→绑定到渲染对象；`
`核心优化：索引缓冲区可减少顶点重复，是高性能自定义几何体的关键；`
`核心属性：position（坐标）、color（颜色）、uv（纹理）、normal（法线）是最常用的属性；`
`性能原则：用类型化数组、复用几何体、释放无用数据，最大化 GPU class="post-meta-container">`

BufferAttribute 参数	类型	默认值	核心说明
`array`	TypedArray	—	必传，存储顶点数据的类型化数组
`itemSize`	Number	—	必传，每组的元素数量（坐标=3，颜色=3/4，UV=2）
`normalized`	Boolean	`false`	是否归一化数据（颜色数据常用，将0-255转为0-1）
`usage`	Number	`THREE.StaticDrawUsage`	数据使用方式（静态/动态，默认静态即可）

属性名	类型	说明	示例
`attributes`	Object	存储所有绑定的属性（position/color/uv 等）	`geometry.attributes.position` 获取坐标属性
`index`	BufferAttribute	索引缓冲区（优化顶点重复，下文详解）	`geometry.setIndex(索引数组)`
`boundingBox`	Box3	几何体的包围盒（自动计算，用于碰撞检测/裁剪）	`geometry.computeBoundingBox()` 计算包围盒
`boundingSphere`	Sphere	几何体的包围球	`geometry.computeBoundingSphere()`
`drawRange`	Object	渲染范围（只渲染部分顶点）	`geometry.drawRange start: 只渲染前3个顶点`

方法名	说明	示例
`setAttribute(name,` `attribute)`	绑定属性到几何体	`geometry.setAttribute('position',` `attr)`
`getAttribute(name)`	获取已绑定的属性	`geometry.getAttribute('position')`
`removeAttribute(name)`	移除属性	`geometry.removeAttribute('color')`
`setIndex(array)`	设置索引缓冲区	`geometry.setIndex(new` `Uint16Array([0,1,2]))`
`computeBoundingBox()`	计算几何体包围盒	`geometry.computeBoundingBox()`
`computeBoundingSphere()`	计算几何体包围球	`geometry.computeBoundingSphere()`
`computeVertexNormals()`	计算顶点法线（让光照生效）	`geometry.computeVertexNormals()`
`dispose()`	销毁几何体（释放内存）	`geometry.dispose()`


                    
                        
                            标签：  
                            实用指南：学习Three.js--缓冲类型几何体(BufferGeometry)  
                        
                    
                    
                    
                    
                        
                            
                                 上一篇： 
                                如何设置流程定时任务的参数以优化工作效率？  
                            
                            
                                 下一篇： 
                                如何为我的网站建设进行网站备案？


                
                    为您推荐
                    
                    
                        
                             
                            
                                如何设置流程定时任务的参数以优化工作效率？
                            
                            
                            
                                如何优化廊坊网站，使之在未包含的上获得排名？
                            
                            
                            
                                如何有效监测大数据领域内的环保科技数据？
                            
                            
                            
                                钢坝闸厂家：创新水工解决方案的领导者，如何打造差异化竞争优势？
                            
                            
                            
                                如何将一流的网站建设案例有效推广至朋友圈？
                            
                            
                            
                                如何为我的网站建设进行网站备案？
                            
                            
                            
                                如何建立一个专门针对家电维修服务的在线平台？
                            
                            
                            
                                如何将美食网站转化为手机APP？
                            
                            
                            
                                如何打造一个创新的网站建设排行榜以吸引用户？
                            
                            
                            
                                泰兴地区哪家公司能提供专业的猫眼网站建设服务？

服务项目	基础套餐	标准套餐	高级定制
关键词优化数量	10-20个核心词	30-50个核心词+长尾词	80-150个全方位覆盖
内容优化	基础页面优化	全站内容优化+每月5篇原创	个性化内容策略+每月15篇原创
技术SEO	基本技术检查	全面技术优化+移动适配	深度技术重构+性能优化
外链建设	每月5-10条	每月20-30条高质量外链	每月50+条多渠道外链
数据报告	月度基础报告	双周详细报告+分析	每周深度报告+策略调整
效果保障	3-6个月见效	2-4个月见效	1-3个月快速见效

SEO基础

Three.js中缓冲类型几何体的学习指南是什么？

title="发布于

d="M5,0

rgba(0,

学习Three.js–缓冲类型几何体(BufferGeometry)

id="_2">前置核心说明

Three.js

等）中，直接对接

GPU

id="_12">核心逻辑

一、BufferGeometry

核心概念与基础用法

核心术语解释

X/Y/Z

Three.js

2.基础使用流程

BufferGeometry

class="token

id="2_34">步骤2：定义顶点数据（类型化数组）

class="token

id="3_BufferAttribute_52">步骤3：创建BufferAttribute

BufferAttribute

class="token

class="token

id="4_65">步骤4：将属性绑定到几何体

class="token

id="5_72">步骤5：创建材质和渲染对象

class="token

class="token

class="token

class="token

核心参数与常用属性

punctuation">.BufferGeometryclass="tokenpunctuation">;2.核心属性

class="token

2.

start:

id="3__107">3.核心方法

id="3__107">3.

三、BufferGeometry

进阶用法

索引缓冲区（Index）：减少顶点重复

问题场景

id="_128">索引解决方案

class="token

class="token

class="token

class="token

class="token

class="token

class="token

class="token

class="token

class="token

class="token

核心优势

顶点颜色（ColorAttribute）：每个顶点自定义颜色

顶点颜色（Color

id="_163">核心逻辑

color

class="token

class="token

class="token

class="token

class="token

class="token

class="token

class="token

class="token

class="token

class="token

class="token

class="token

效果

id="3_Normal_196">3.法线属性（Normal）：让光照生效

id="3_Normal_196">3.

class="token

class="token

class="token

class="token

2.
基础使用流程

id="3_BufferAttribute_52">步骤3：创建
BufferAttribute

punctuation">.BufferGeometry
class="token
punctuation">;
2.
核心属性

id="3__107">3.
核心方法

顶点颜色（Color
Attribute）：每个顶点自定义颜色

`color`

id="3_Normal_196">3.
法线属性（Normal）：让光照生效