Three.js - 使用CubeTextureLoader在立方体的每个面上创建不同的图像

Question

我想使用 CubeTextureLoader 创建一个有不同图像的立方体。实现步骤如下：

1. 使用 new THREE.CubeTextureLoader() 加载立方体纹理。
2. 使用该立方体纹理创建新材料。
3. 使用该新材料创建立方体。
4. 绘制该立方体。

下面是相关代码。使用 THREE.TextureLoader() 可以为所有面绘制单一材料的立方体，但使用 CubeTextureLoader 时，屏幕上没有任何内容或控制台错误提示。

var textureLoader = new THREE.CubeTextureLoader();

textureLoader.load([
    'textures/face-1.jpg',
    'textures/face-2.jpg',
    'textures/face-3.jpg',
    'textures/face-4.jpg',
    'textures/face-5.jpg',
    'textures/face-6.jpg'
 ], function (texture) {
    var material = new THREE.MeshBasicMaterial({
        color: 0xffffff,
        map: texture
    });

    var cube = new THREE.Mesh(
        new THREE.BoxGeometry(20, 20, 20),
        material
    );

    // add & draw calls happen after all this
});

我猜我使用的材质类型或网格可能不正确，但是找不到任何关于如何正确执行此操作的信息或示例。有什么想法吗？

- Stuart Memo

---

请查看关于这个问题的评论。 - micnil

Answer 1

THREE.MultiMaterial已被移除，详情请参见：https://github.com/mrdoob/three.js/issues/10931

现在，您可以在网格构造函数中使用材质数组。例如：

let cubeGeometry = new THREE.BoxGeometry(1,1,1);
let loader = new THREE.TextureLoader();
let materialArray = [
    new THREE.MeshBasicMaterial( { map: loader.load("xpos.png") } ),
    new THREE.MeshBasicMaterial( { map: loader.load("xneg.png") } ),
    new THREE.MeshBasicMaterial( { map: loader.load("ypos.png") } ),
    new THREE.MeshBasicMaterial( { map: loader.load("yneg.png") } ),
    new THREE.MeshBasicMaterial( { map: loader.load("zpos.png") } ),
    new THREE.MeshBasicMaterial( { map: loader.load("zneg.png") } ),
];
let mesh = new THREE.Mesh( cubeGeometry, materialArray );

- Stemkoski

Answer 2

如Micnil所述，CubeTextureLoader用于制作用于SkyBox或EnvMap的CubeMap。请改用MeshFaceMaterial。

var textureLoader = new THREE.TextureLoader();

var texture0 = textureLoader.load( './0.jpg' );
var texture1 = textureLoader.load( './1.jpg' );
var texture2 = textureLoader.load( './2.jpg' );
var texture3 = textureLoader.load( './3.jpg' );
var texture4 = textureLoader.load( './4.jpg' );
var texture5 = textureLoader.load( './5.jpg' );

var materials = [
    new THREE.MeshBasicMaterial( { map: texture0 } ),
    new THREE.MeshBasicMaterial( { map: texture1 } ),
    new THREE.MeshBasicMaterial( { map: texture2 } ),
    new THREE.MeshBasicMaterial( { map: texture3 } ),
    new THREE.MeshBasicMaterial( { map: texture4 } ),
    new THREE.MeshBasicMaterial( { map: texture5 } )
];
var faceMaterial = new THREE.MeshFaceMaterial( materials );

var geometry = new THREE.BoxGeometry( 20, 20, 20 );
var boxMesh = new THREE.Mesh( geometry, faceMaterial );

- yomotsu

---

自r72起，THREE.MeshFaceMaterial已被替换为THREE.MultiMaterial。 - micnil

@yomotsu，如何在v0.91.0中实现这个？自v0.72起，MeshFaceMaterial已被删除.. :( - Adson Cicilioti

@AdsonCicilioti 在当前版本（v93）中，您使用了一个材料数组，请参阅我发布的答案。 - Stemkoski