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. 使用 new THREE.CubeTextureLoader()
加载立方体纹理
2. 使用立方体纹理创建新材质
3. 使用这种材料创建一个立方体
4. 绘制立方体

相关代码如下.我可以使用 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屋！