three.js 入门四：THREE.BoxGeometry 解析

news2025/1/19 17:16:01

环境：

three.js 0.159.0

问题：如何理解BoxGeometry?

BoxGeometry在创建的时候, 内部划分成了6个小组, 每个小组就是一个面有4个点, 假设长宽深的segments都是1的话(默认是1), 那么每个小组拥有2个三角面, 如下面创建的代码:

var geometry = new THREE.BoxGeometry(100, 100, 100, 1, 1, 1);
// geometry.attributes.position: 这里面有24个点, 每个面4个点
// 注意: 虽然8个点也能表示了, 但分开后的好处是, 每个面的顶点可以单独设置uv值

//geometry.attributes.uv: 这里面有24个uv值, 与上面的点一一对应

//geometry.attributes.normal: 这里面也有24个值, 与上面的点一一对应

//geometry.index: 这面有36个点位索引, 共12个三角面, 12*3 = 36

// geometry.groups 如下: 
// 0: {start: 0, count: 6, materialIndex: 0}
// 1: {start: 6, count: 6, materialIndex: 1}
// 2: {start: 12, count: 6, materialIndex: 2}
// 3: {start: 18, count: 6, materialIndex: 3}
// 4: {start: 24, count: 6, materialIndex: 4}
// 5: {start: 30, count: 6, materialIndex: 5}
// 这里面表示将 geometry.index 分成了6组, 每组6个, 前六后点位索引使用材质1, 后面六个使用材质2, 后面依次

问题: BoxGeomtry 六个小组分别表示哪个侧面?

顺序是:

右: normal:(1,0,0)
左: normal:(-1,0,0)
上: normal:(0,1,0)
下: normal:(0,-1,0)
前: normal:(0,0,1)
后: normal:(0,0,-1)

对于每个小组, 他们的每个点的uv值是多少呢?

分别用六张图片贴上去就能很明显的看出来:

 let boxGeometry = new THREE.BoxGeometry(200, 200, 200);
 //全景图切六面图示例
 let materials = ['r', 'l', 'u', 'd', 'f', 'b'].map(i => `panorama_${i}.jpg`).map(i => {
     const texture = new THREE.TextureLoader().load(i);
     texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
     texture.repeat.set(1, 1);
     //准备material
     return new THREE.MeshBasicMaterial({
         side: THREE.DoubleSide,
         map: texture,
         transparent: true,
         opacity: 0.8,
     });
 });
 let mesh = new THREE.Mesh(boxGeometry, materials);
 scene.add(mesh);