type
status
date
slug
summary
tags
category
icon
password
Edited
Jul 31, 2023 02:56 AM
Created
Jul 31, 2023 02:31 AM
网格模型(三角形概念)
网格模型Mesh其实就一个一个三角形(面)拼接构成。使用网格模型Mesh渲染几何体geometry，就是几何体所有顶点坐标三个为一组，构成一个三角形，多组顶点构成多个三角形，就可以用来模拟表示物体的表面。
几何体 BufferGeometry
threejs的长方体
BoxGeometry、球体SphereGeometry等几何体都是基于BufferGeometry类构建的，BufferGeometry是一个没有任何形状的空几何体，你可以通过BufferGeometry自定义任何几何形状，具体一点说就是定义顶点数据。顶点数据
通过javascript类型化数组
Float32Array创建一组xyz坐标数据用来表示几何体的顶点坐标。通过threejs的属性缓冲区对象BufferAttribute表示threejs几何体顶点数据。
设置几何体顶点
顶点索引数据
网格模型Mesh对应的几何体BufferGeometry，拆分为多个三角后，很多三角形重合的顶点位置坐标是相同的，这时候如果你想减少顶点坐标数据量，可以借助几何体顶点索引
geometry.index来实现。创建顶点索引
.index数据设置索引数据
顶点法线数据
几何体顶点位置数据
geometry.attributes.position顶点法线(法向量)数据
geometry.attributes.normal你可以测试下，把MeshBasicMaterial材质改为MeshLambertMaterial材质，你会发现原来的矩形平面无法正常渲染，这其实很简单，使用受光照影响的材质，几何体BufferGeometry需要定义顶点法线数据。
无顶点索引
有顶点索引
矩形几何体顶点坐标
一个矩形平面，可以至少通过两个三角形拼接而成。而且两个三角形有两个顶点的坐标是重合的。
BufferGeometry的一些方法
材质属性.wireframe
线条模式渲染，查看几何体三角形结构
旋转、缩放、平移几何体
BufferGeometry通过
.scale()、.translate()、.rotateX()、.rotateY()等方法可以对几何体本身进行缩放、平移、旋转,这些方法本质上都是改变几何体的顶点数据。
Object3D
点模型
Points、线模型Line、网格网格模型Mesh等模型对象的父类都是Object3D，如果想对这些模型进行旋转、缩放、平移等操作，如何实现，可以查询Threejs文档Object3D对相关属性和方法的介绍。Euler
模型的角度属性
.rotation和四元数属性.quaternion都是表示模型的角度状态，只是表示方法不同，.rotation属性值是欧拉对象Euler.quaternion属性值是是四元数对象QuaternionThreeJS自带几何体
threejs提供了各种形状的几何体，他们底层都是基于
BufferGeometry实现的
Demo
最后来做个Demo
内容差不多到这里就介绍完了 🎉🎉🎉
参考链接
- 作者:JinSo
- 链接:https://jinso365.top/article/three-buffergeometry
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。