二、Three.js几何体BufferGeometry顶点笔记
一、几何体顶点位置数据和点模型
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, //顶点3坐标0, 0, 10, //顶点4坐标0, 0, 100, //顶点5坐标50, 0, 10, //顶点6坐标
])
// 创建属性缓冲区对象
//3个为一组，表示一个顶点的xyz坐标
const attribue = new THREE.BufferAttribute(vertices, 3)
//绑定几何体
geometry.attributes.position = attribue;
// 点渲染模式
const material = new THREE.PointsMaterial({color: 'green',size: 20,
})
const points = new THREE.Points(geometry, material)export default pointsimport cube from './model.js'const scene = new THREE.Scene();
scene.add(cube);
二、线模型对象
1、线模型Line渲染顶点数据
下面代码是把几何体作为线模型Line 的参数，你会发现渲染效果是从第一个点开始到最后一个点，依次连成线。
// 线材质对象
const material = new THREE.LineBasicMaterial({color: '#fff'
})
// 创建线模型对象
const Line = new THREE.Line(geometry,material)
2、线模型LineLoop
连续闭合
// 线材质对象
const material = new THREE.LineBasicMaterial({color: '#fff'
})
// 创建线模型对象
const Line = new THREE.LineLoop(geometry,material)
3、 线模型LineSegments
一段一段的
// 线材质对象
const material = new THREE.LineBasicMaterial({color: '#fff'
})
// 创建线模型对象
const Line = new THREE.LineSegments(geometry,material)
三、网格模型(三角形概念)
网格模型Mesh渲染自定义几何体BufferGeometry的顶点坐标
1、三角形(面)
网格模型Mesh其实就一个一个三角形(面)拼接构成。使用网格模型Mesh渲染几何体geometry，就是几何体所有顶点坐标三个为一组，构成一个三角形，多组顶点构成多个三角形，就可以用来模拟表示物体的表面。
// 渲染网格模型
const material = new THREE.MeshBasicMaterial({color: 'green',size: 20,
})
const points = new THREE.Mesh(geometry, material)
2、网格模型三角形：正反面
- 正面：逆时针
- 反面：顺时针
空间中一个三角形有正反两面，那么Three.js的规则是如何区分正反面的？非常简单，你的眼睛(相机)对着三角形的一个面，如果三个顶点的顺序是逆时针方向，该面视为正面，如果三个顶点的顺序是顺时针方向，该面视为反面。
注意：默认单面可见，默认正面可见，反面不可见
3、双面可见
Three.js的材质默认正面可见，反面不可见。
const material = new THREE.MeshBasicMaterial({color: 0x0000ff, //材质颜色side: THREE.FrontSide, //默认只有正面可见
});
const material = new THREE.MeshBasicMaterial({side: THREE.DoubleSide, //两面可见
});
const material = new THREE.MeshBasicMaterial({side: THREE.BackSide, //设置只有背面可见
});
四、构建一个矩形平面几何体
1、定义矩形几何体顶点坐标
一个矩形平面，可以至少通过两个三角形拼接而成。而且两个三角形有两个顶点的坐标是重合的。
注意三角形的正反面问题：保证矩形平面两个三角形的正面是一样的，也就是从一个方向观察，两个三角形都是逆时针或顺时针。
const vertices = new Float32Array([0,0,0,50,50,0,0,50,0,0,0,0,50,0,0,50,50,0
])
五、几何体顶点索引数据
网格模型Mesh对应的几何体BufferGeometry，拆分为多个三角后，很多三角形重合的顶点位置坐标是相同的，这时候如果你想减少顶点坐标数据量，可以借助几何体顶点索引geometry.index来实现。
1、定义顶点位置坐标数据
每个三角形3个顶点坐标，矩形平面可以拆分为两个三角形，也就是6个顶点坐标。
const vertices = new Float32Array([0,0,0,50,50,0,0,50,0,0,0,0,50,0,0,50,50,0
])如果几何体有顶点索引geometry.index，那么你可以吧三角形重复的顶点位置坐标删除。
const vertices = new Float32Array([0,0,0,//050,50,0,//10,50,0,//250,50,0//3
])2、BufferAttribute定义顶点索引.index数据
通过javascript类型化数组Uint16Array创建顶点索引.index数据。
const index = new Uint16Array([0, 1, 2,0, 3, 1
])
geometry.index = new THREE.BufferAttribute(index, 1)全部代码：
import * as THREE from 'three'//创建一个空的几何体对象
const geometry = new THREE.BufferGeometry();
//类型化数组创建顶点数据
const vertices = new Float32Array([0, 0, 0,//050, 50, 0,//10, 50, 0,//250,0,0,//3
])// 创建属性缓冲区对象
//3个为一组，表示一个顶点的xyz坐标
const attribue = new THREE.BufferAttribute(vertices, 3)
//绑定几何体
geometry.attributes.position = attribue;const index = new Uint16Array([0, 1, 2,0, 3, 1
])
geometry.index = new THREE.BufferAttribute(index, 1)// 线材质对象
const material = new THREE.MeshBasicMaterial({color: '#fff',// side:THREE.DoubleSide
})
// 创建线模型对象
const Line = new THREE.Mesh(geometry, material)export default Line六、顶点法线数据
1、数学上的法线概念：
2、测试改成MeshLambertMaterial
MeshLambertMaterial受光照影响，所以显示不出来
// 线材质对象
const material = new THREE.MeshLambertMaterial({color: '#fff',// side:THREE.DoubleSide
})
// 创建线模型对象
const Line = new THREE.Mesh(geometry, material)
3、定义顶点法线数据， MeshLambertMaterial显示出来
注意：定义出每一个点的法线数据
1.1、没有顶点的定义法线
const norlmals = new Float32Array([0, 0, 1,//0法向量0, 0, 1,//10, 0, 1,//20, 0, 1,//30, 0, 1,//30, 0, 1,//3
])
geometry.attributes.normal = new THREE.BufferAttribute(norlmals,3)
1.2、有顶点
注意：一一对应就可以了
const norlmals = new Float32Array([0, 0, 1,//0法向量0, 0, 1,//10, 0, 1,//20, 0, 1,//3
])
geometry.attributes.normal = new THREE.BufferAttribute(norlmals,3)
七、查看threejs自带几何体顶点
three.js提供的矩形平面PlaneGeometry、长方体BoxGeometry、球体SphereGeometry等各种形状的几何体，他们都有一个共同的父类BufferGeometry。这意味着这些几何体有哪些属性或方法，你可以查询文档关于BufferGeometry的介绍。
const geometry = new THREE.PlaneGeometry(100,50); //矩形平面几何体
// const geometry = new THREE.BoxGeometry(50,50,50); //长方体console.log('几何体',geometry);
console.log('顶点位置数据',geometry.attributes.position);
console.log('顶点索引数据',geometry.index);
1、材质属性.wireframe
线条模式渲染，查看几何体三角形结构
const material = new THREE.MeshLambertMaterial({color: 0x00ffff, wireframe:true,//线条模式渲染mesh对应的三角形数据
});
2、几何体细分数
Three.js很多几何体都提供了细分数相关的参数，
矩形平面几何体至少需要两个三角形拼接而成
const scene = new THREE.Scene();const geometry = new THREE.BoxGeometry(100, 100, 100, 2, 1);
const material = new THREE.MeshBasicMaterial({color: 'green',wireframe: true,
})const cube = new THREE.Mesh(geometry, material);scene.add(cube);
矩形平面几何体至少需要两个三角形拼接而成。
//矩形几何体PlaneGeometry的参数3,4表示细分数，默认是1,1
const geometry = new THREE.PlaneGeometry(100,50,1,1);
把一个矩形分为2份，每个矩形2个三角形，总共就是4个三角形
const geometry = new THREE.PlaneGeometry(100,50,2,1);
把一个矩形分为4份，每个矩形2个三角形，总共就是8个三角形
const geometry = new THREE.PlaneGeometry(100,50,2,2);
3、球体SphereGeometry细分数
球体SphereGeometry参数2、3分别代表宽、高度两个方向上的细分数，默认32,16，具体多少以你所用版本为准。
const geometry = new THREE.SphereGeometry( 50, 32, 16 );
如果球体细分数比较低，表面就不会那么光滑。
const geometry = new THREE.SphereGeometry( 15, 8, 8 );
4、三角形数量与性能
对于一个曲面而言，细分数越大，表面越光滑，但是三角形和顶点数量却越多。
几何体三角形数量或者说顶点数量直接影响Three.js的渲染性能，在不影响渲染效果的情况下，一般尽量越少越好。
八、旋转、缩放、平移几何体
BufferGeometry通过.scale()、.translate()、.rotateX()、.rotateY()等方法可以对几何体本身进行缩放、平移、旋转,这些方法本质上都是改变几何体的顶点数据。
1、缩放.scale()
// 几何体xyz三个方向都放大2倍
geometry.scale(2, 2, 2);// 几何体旋转、缩放或平移之后，查看几何体顶点位置坐标的变化
// BufferGeometry的旋转、缩放、平移等方法本质上就是改变顶点的位置坐标
console.log('顶点位置数据', geometry.attributes.position);
2、平移.translate()
// 几何体沿着x轴平移50
geometry.translate(50, 0, 0);
3、旋转.rotateX()、.rotateY()、.rotateZ()
// 几何体绕着x轴旋转45度
geometry.rotateX(Math.PI / 4);
4、居中.center()
居中：已经偏移的几何体居中，执行.center()，你可以看到几何体重新与坐标原点重合
geometry.translate(50, 0, 0);//偏移
// 居中：已经偏移的几何体居中，执行.center()，你可以看到几何体重新与坐标原点重合
geometry.center();