如何通過一張圖片給BoxBufferGeometry的6個面貼圖

threejs所用版本為 114dev

為每個面貼相同的圖片

這個簡單，幾句話就搞定。

var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
var texture = new THREE.TextureLoader().load( '**.jpg' );
// 立即使用紋理進行材質創建
var material = new THREE.MeshBasicMaterial( { map: texture } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

如何通過一張圖片為6個面貼圖呢？

首先我們來了解下BoxBufferGeometry中的點。

 

 點保存在attributes的position中，但是array中的數據個數怎么是72個呢？一個正方體8個頂點，一個頂點3個數據（x，y，z）應該是24個數據才對。其實並不是這么理解，在這組數據中不僅包含了點的信息還包含了面的信息，Threejs中的幾何體是有三角面片組成的，一個三角面片需要3個點，所以一個正方體有6個面，這6個面又是由12個三角形組成，那數據個數應該是 12（三角面個數）*3（一個三角面的點個數）*3（一個點的數據個數）=108，通過這個推測出的數據還是和得到的數據不符。

 

 通過這個推斷： 數據個數=6（正方形面的個數）*4（一個正方形面由兩個三角形面組成，需要4個點）*3（一個點的數據個數）=72，這個時候數據對上了。結論12個數據描述一個正方形面。

再來聊聊BoxBufferGeometry中的UV

至於UV映射的原理可以參考博客： https://www.cnblogs.com/yanan-boke/p/7815018.html

 

 有了上面對頂點了解的基礎，這里可以得出數據個數=6（正方形面的個數）*4（一個正方形面由兩個三角形面組成，需要4個點）*2（一個點的數據個數）=48。注意：在面里說的點是三維里面的點有x，y，z三個數據，uv里面的點是二維里面的點只有x，y兩個數據。

 

理解了這些，就可以動手了

這里借用一下博友的圖片（圖片出處）

代碼如下

var vertices = new Float32Array([
                0, 0.33, 0.5, 0.33, 0, 0, 0.5, 0, //  圖片的左下
                0.5, 0.33, 1, 0.33, 0.5, 0, 1, 0, // 圖片右下
                0, 0.66, 0.5, 0.66, 0, 0.33, 0.5, 0.33, // 圖片中左
                0.5, 0.66, 1, 0.66, 0.5, 0.33, 1, 0.33, // 圖片中右
                0, 1, 0.5, 1, 0, 0.66, 0.5, 0.66, //圖片左上
                0.5, 1, 1, 1, 0.5, 0.66, 1, 0.66 // 圖片右上
            ]);
            
            var box = new THREE.BoxBufferGeometry(1, 1, 1);
            box.setAttribute('uv', new THREE.Float32BufferAttribute(vertices, 2));
            var map = new THREE.TextureLoader().load('images/texture-atlas.jpg');
            var boxMaterial = new THREE.MeshBasicMaterial({ map: map });
            var boxMesh = new THREE.Mesh(box, boxMaterial);
            scene.add(boxMesh);

運行結果