自定义three 正方体

微信截图_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);