微信截图_20220309173253.png
git仓库地址
创建长方体主代码
import {
BufferGeometry,
Object3D,
Mesh,
MeshStandardMaterial,
BufferAttribute,
DoubleSide,
Texture,
TextureLoader,
} from 'three';
export const cubeList:Object3D[] = [];
//声明一个空几何体对象
const geometry: BufferGeometry = new BufferGeometry();
// 大小
const size: number = 10;
// 顶点信息(以z轴正方向视角)
const vertices: Float32Array = new Float32Array([
// 顶部四个坐标点位置
-size, size, size,
size, size, size,
size, size, -size,
-size, size, -size,
// 前面四个左边点位置
-size, -size, size,
size, -size, size,
size, size, size,
-size, size, size,
// 左边四个位置
-size, -size, -size,
-size, -size, size,
-size, size, size,
-size, size, -size,
// 右边四个位置
size, -size, size,
size, -size, -size,
size, size, -size,
size, size, size,
// 后面四个位置
size, -size, -size,
-size, -size, -size,
-size, size, -size,
size, size, -size,
// 底部四个位置
size, -size, size,
size, -size, -size,
-size, -size, -size,
-size, -size, size,
]);
// 向量的方向(不知道光照颜色显示不出来)
const normal: Float32Array = new Float32Array([
// y 轴正方向
0, 1, 0,
0, 1, 0,
0, 1, 0,
0, 1, 0,
// z轴正方向
0, 0, 1,
0, 0, 1,
0, 0, 1,
0, 0, 1,
// x轴负方向
-1, 0, 0,
-1, 0, 0,
-1, 0, 0,
-1, 0, 0,
// x轴正方向
1, 0, 0,
1, 0, 0,
1, 0, 0,
1, 0, 0,
// z轴负方向
0, 0, -1,
0, 0, -1,
0, 0, -1,
0, 0, -1,
// y轴负方向
0, -1, 0,
0, -1, 0,
0, -1, 0,
0, -1, 0,
]);
// vertices里面的索引,(3个点确定一个三角形，2个三角形确定一个面)
const index: number[] = [
// 顶部
0, 1, 2,
2, 3, 0,
// 前面
4, 5, 6,
6, 7, 4,
// 左边
8, 9, 10,
10, 11, 8,
// 右边
12, 13, 14,
14, 15, 12,
// 后边
16, 17, 18,
18, 19, 16,
// 底部
20, 21, 22,
22, 23, 20,
];
const uv: Float32Array = new Float32Array([
0, 0,
1, 0,
1, 1,
0, 1,
0, 0,
1, 0,
1, 1,
0, 1,
0, 0,
1, 0,
1, 1,
0, 1,
0, 0,
1, 0,
1, 1,
0, 1,
]);
// 设置几何体的位置信息
geometry.setAttribute('position', new BufferAttribute(vertices, 3 ) );
// 设置几何体的向量
geometry.setAttribute('normal', new BufferAttribute(normal, 3));
// 设置几何体 position 的信息(未设置该值 position里面默认三个一组)
geometry.setIndex(index);
// 设置每个面的图片
geometry.setAttribute('uv', new BufferAttribute(uv, 2));
const textureLoader: TextureLoader = new TextureLoader();
const picOne: Texture = textureLoader.load('/1.jpg');
const picTwo: Texture = textureLoader.load('/2.jpg');
// 材质
const material: MeshStandardMaterial = new MeshStandardMaterial({
color: 'white',
// 是否两面设置渲染(会耗性能)
side: DoubleSide,
map: picOne,
});
const mesh: Mesh = new Mesh(geometry, material);
cubeList.push(mesh);
