二、几何体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, //设置只有背面可见
});