点击查看代码
function createBasic() {
// 目标:了解顶点坐标绘制正方形
// 1. 准备 BufferGemotry 缓冲几何图形
// 2. 准备 32 位浮点数的数组,定义矩形的顶点位置
// 3. 准备 BufferAttribute 属性缓冲对象,保存几何图形的属性值
// 4. 把属性设置给几何图形对象
// 5. 准备材质创建物体并加入场景中
// 1. 准备 BufferGemotry 缓冲几何图形(灵活表示图形)
const geometry = new THREE.BufferGeometry();
// 创建一个简单的矩形. 在这里我们左上和右下顶点被复制了两次。
// 因为在两个三角面片里,这两个顶点都需要被用到。
// 注意:three.js 内部需要计算坐标值
// 顶点坐标(逆时针描述-正面渲染)
// 2. 准备 32 位浮点数的数组,定义矩形的顶点位置
const vertices = new Float32Array([
0, 0, 0,
1.0, 0, 0,
0, 1.0, 0,
1.0, 0, 0,
1.0, 1.0, 0,
0, 1.0, 0
]);
// 3. 准备 BufferAttribute 属性缓冲对象,保存几何图形的属性值
// itemSize = 3 因为每个顶点都是一个三元组
// position 顶点坐标
// 4. 把属性设置给几何图形对象
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
// 5. 准备材质创建物体并加入场景中
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh)
}