这一小节学习THREE.js中的物理模型。
什么是geometry？(英文解释，翻译为中文就看不懂了，直接看英语吧)
- Composed of vertices (point coordinates in 3D spaces)and faces
- (triangles that join those vertices to create a surface)
- Can be used for meshes but also for particles
- Can store more data than the positions(UV coordinates,normals,colors or anything we want)
所有的Geometry都继承于BufferGeometry，这个类包含了很多内置的方法，例如.translate,.rotateX 和.normalize等
探索其他Geometry
BoxGeometry
PlaneGeometry
CapsuleGeometry
CircleGeometry
ConeGeometry
CylinderGeometry
DodecahedronGeometry
RingGeometry
TorusGeometry
TorusKnotGeometry
深入BoxGeometry
BoxGeometry有六个参数。
width — X 轴上面的宽度，默认值为 1。
height — Y 轴上面的高度，默认值为 1。
depth — Z 轴上面的深度，默认值为 1。
widthSegments — （可选）宽度的分段数，默认值是 1。
heightSegments — （可选）高度的分段数，默认值是 1。
depthSegments — （可选）深度的分段数，默认值是 1。
分段数(细分)对应于构成一个面的三角形的数量。
1 = 每面2个三角形，2 = 每面8个三角形
const BoxGeometry = new THREE.BoxGeometry( 1, 1, 1 );
const BoxGeometry = new THREE.BoxGeometry( 1, 1, 1 , 2 , 2 , 2 );
在材质中，可以将线框模式打开
const cubeMaterial = new THREE.MeshBasicMaterial({
color: 0xff0000,
wireframe: true
});
然后渲染结果是
CREATING YOUR OWN BUFFER GEOMETRY
在创建几何体之前，我们需要了解几何数据是如何存储缓冲区，我们将使用[Float32Array](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Float32Array)，`Float32Array`具有以下特点 * 是数组形式 * 只能缓存浮点类型数据 * 更容易被电脑所处理使用Float32Array创建一个三角形,因为三角形有三个顶点，每个顶点有x,y,z三个坐标值，所以总共有九个值
//Float32Array
const positionsArray = new Float32Array(9);
//第一个顶点 First vertice
positionsArray[0] = 0
positionsArray[1] = 0
positionsArray[2] = 0
//第二个顶点
positionsArray[3] = 0
positionsArray[4] = 1
positionsArray[5] = 0
//第三个顶点
positionsArray[5] = 1
positionsArray[6] = 0
positionsArray[7] = 0
//也可以这样写
const positionsArray = new Float32Array([
0, 0, 0,
0, 1, 0,
1, 0, 0,
]);
然后我们可以将Float32Array转换为BufferProperty，其中3这个参数对应于构成一个顶点的值的数量
const positionsAttribute = new THREE.BufferAttribute(positionsArray, 3);
通过.setAttribute(...)将BufferAttribute添加到BufferGeometry
position is the name that will be used in the shaders
position是将在材质球中使用的名称
const geometry = new THREE.BufferGeometry()
geometry.setAttribute('position', positionsAttribute);
创建一个新的网格模型，并且添加到场景中
geometry.setAttribute('position', positionsAttribute);
const trangle = new THREE.Mesh(geometry, material);
scene.add(trangle)
渲染成功！
创建一大堆三角形，(Math.random() - 0.5)是为了让渲染的三角形堆居中显示。
某些几何体的面共享公共顶点
创建BufferGeometry的时候，我们可以指定一堆顶点，然后用于创建面并多次重复使用顶点的索引
const geometry = new THREE.BufferGeometry()
const count = 50
const positionsArray = new Float32Array(count * 3 * 3)
for (let i = 0; i < count * 3 * 3; i++) {
positionsArray[i] = (Math.random() - 0.5)
}
const positionsAttribute = new THREE.BufferAttribute(positionsArray, 3)
geometry.setAttribute('position', positionsAttribute)
const material = new THREE.MeshBasicMaterial({
color: 0xff0000,
wireframe: true
});
const trangles = new THREE.Mesh(geometry, material);
scene.add(trangles)
渲染结果
