Three.js - 使用CubeTextureLoader在立方体的每个面上创建不同的图像 [英] Three.js - Using CubeTextureLoader to create a different image on each face of a cube

问题描述

我正在尝试使用 CubeTextureLoader 创建一个每边都有不同图像的立方体。我的流程是：

I'm trying to create a cube with a different image on each side using CubeTextureLoader. My process is:

1. 使用加载立方体纹理新的THREE.CubeTextureLoader（）


2. 使用立方体纹理创建新材质


3. 使用此材质创建立方体


4. 绘制立方体

1. Load a cube texture using new THREE.CubeTextureLoader()
2. Create a new material using the cube texture
3. Create a cube using this material
4. Draw the cube

相关代码如下。我可以使用 THREE.TextureLoader（）为所有面部绘制一个单一材质的立方体，但是当我使用 CubeTextureLoader 屏幕上没有任何内容或任何控制台错误。

The relevant code is below. I can draw a cube with a single material for all faces fine using THREE.TextureLoader(), but when I use CubeTextureLoader I get nothing onscreen or any console errors.

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

我猜我使用了错误的材料类型或网格但找不到任何信息或关于如何正确执行此操作的示例。任何想法？

I'm guessing I'm using the wrong Material type or Mesh but can't find any info or examples on how to do this correctly. Any ideas?

推荐答案

正如Micnil所说， CubeTextureLoader 适用于CubeMap用于SkyBox或EnvMap。

As Micnil mentioned, CubeTextureLoader is for CubeMap which is used for SkyBox or EnvMap.

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

这篇关于Three.js - 使用CubeTextureLoader在立方体的每个面上创建不同的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！