如何在Three.js立方體中使用多種材質？

我正在嘗試使用Three.js來渲染一個面上有6個不同圖像的立方體。如何在Three.js立方體中使用多種材質？

THREE.CubeGeometry的構造是這樣的：

THREE.CubeGeometry = function (width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides)

我可以從代碼的「材料」預計是任一種材料，或6種不同的材料的陣列看到的，但這些材料在這裏傳遞的時候，似乎永遠不會在渲染時使用。

取而代之的是，給Mesh構造函數提供的單個材質用於所有6個面。

var face_materials = ... <load 6 textures here>... 
var cube_g = new THREE.CubeGeometry(400,400,400,1,1,1, face_materials); // <= ignored? 
var cube = new THREE.Mesh(cube_g, some_material); // <= this is used instead

即使我將null或undefined作爲「some_material」傳遞，它似乎會覆蓋face_materials並不會呈現任何內容。

有沒有辦法使用CubeGeometry進行這項工作？或者我必須單獨創建6個面並將它們添加到場景中？

來源

2012-01-11 Chris Perkins

您需要爲網格使用THREE.MeshFaceMaterial。下面是示例代碼：

var materials = []; 
for (var i=0; i<6; i++) { 
    var img = new Image(); 
    img.src = i + '.png'; 
    var tex = new THREE.Texture(img); 
    img.tex = tex; 
    img.onload = function() { 
    this.tex.needsUpdate = true; 
    }; 
    var mat = new THREE.MeshBasicMaterial({color: 0xffffff, map: tex}); 
    materials.push(mat); 
} 
var cubeGeo = new THREE.CubeGeometry(400,400,400,1,1,1, materials); 
var cube = new THREE.Mesh(cubeGeo, new THREE.MeshFaceMaterial());

來源

2012-01-27 16:41:58

哇，這工作！謝謝。 MeshFaceMaterial是缺少的成分 - 相當不直觀，因爲其定義如下：THREE.MeshFaceMaterial（）= function（）{}; 也許有一天我會弄清楚爲什麼那些作品... – 2012-02-28 13:43:32

在r53中不適合我。 – mpso 2012-12-10 06:08:47

請參閱http://stackoverflow.com/questions/13795354/verification-of-using-multiple-textures-with-three-js-cubes以獲取有關在更新的three.js版本中執行此操作的信息。 – mpso 2012-12-11 02:45:25

對於使用立方體多種材料，對於新版本的three.js所版本56（2013年3月），在http://stemkoski.github.com/Three.js/Textures.html檢查出的例子的源代碼的例子 - 最近最大的變化是THREE.MeshFaceMaterial需要通過CubeGeometry中使用的材料陣列。

來源

2013-03-13 13:58:52

如何在Three.js立方體中使用多種材質？

回答

相關問題