几何体是由坐标点绘制成线,线绘制成三角形,多个三角形拼接成的。
这次学习了两个自定义几何体的方法,第一个通过编写完整的顶点坐标,绘制一个正方形。
// 创建一个简单的矩形. 在这里我们左上和右下顶点被复制了两次。
// 因为在两个三角面片里,这两个顶点都需要被用到。(按照x,y,z的顺序编写坐标)
const vertices = new Float32Array([
-1.0, -1.0, 1.0, // 左下
1.0, -1.0, 1.0, // 右下
1.0, 1.0, 1.0, // 右上
1.0, 1.0, 1.0, // 右上
-1.0, 1.0, 1.0, // 左上
-1.0, -1.0, 1.0 // 左下
]);
// itemSize = 3 因为每个顶点都是一个三元组。
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
第二种方法是只编写出需要的坐标,不编写完整绘制点,顺序也可以打乱,通过索引,控制编写的坐标应该按照什么顺序进行绘制
去掉重复的右上和坐下坐标点,然后编写索引,这样就会按照索引来取坐标点进行绘制
// 创建一个简单的矩形. 在这里我们左上和右下顶点被复制了两次。
// 因为在两个三角面片里,这两个顶点都需要被用到。(按照x,y,z的顺序编写坐标)
const vertices = new Float32Array([
-1.0, -1.0, 1.0, // 左下
1.0, -1.0, 1.0, // 右下
1.0, 1.0, 1.0, // 右上
-1.0, 1.0, 1.0, // 左上
]);
// itemSize = 3 因为每个顶点都是一个三元组。
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
/**
0对应-1.0, -1.0, 1.0, // 左下
1对应1.0, -1.0, 1.0, // 右下
2对应1.0, 1.0, 1.0, // 右上
3对应-1.0, 1.0, 1.0, // 左上
绘制顺序为:左下、右下、右上、右上、左上、左下
**/
const indexs = new Uint16Array([
0, 1, 2,
2, 3, 0,
]);
geometry.index = new THREE.BufferAttribute(indexs, 1);