threejs所用版本為114dev

為每個面貼相同的圖片

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

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

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

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

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

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

再來聊聊BoxBufferGeometry中的UV

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

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

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

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

代碼如下

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);

運行結(jié)果

總結(jié)

以上是生活随笔為你收集整理的如何通过一张图片给BoxBufferGeometry的6个面贴图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。