Three.js Cube - 不同的纹理不起作用答案

【问题标题】：Three.js Cube - Different textures didn't workThree.js Cube - 不同的纹理不起作用
【发布时间】：2016-03-26 08:15:56
【问题描述】：

大家好，我想在我的 thee.js theard 的每个面上放置 6 个纹理以符合这个 theard：Three.js - Using CubeTextureLoader to create a different image on each face of a cube

这是我的代码：

scene = new THREE.Scene();
    var textureLoader = new THREE.TextureLoader();

    var texture0 = textureLoader.load( 'crate1.gif' );
    var texture1 = textureLoader.load( 'crate3.gif' );
    var texture2 = textureLoader.load( 'crate4.gif' );
    var texture3 = textureLoader.load( 'crate5.gif' );
    var texture4 = textureLoader.load( 'crate6.gif' );
    var texture5 = textureLoader.load( 'crate7.gif' );

    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.MultiMaterial( materials );

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

    scene.add( mesh );
    renderer = new THREE.WebGLRenderer();

当我加载页面时，没有立方体；没有什么。当我只使用一个纹理时它可以工作......

【问题讨论】：

我为我检查了这个 sn-p 工作，你可以通过任何方式尝试这个（你是在服务器实例上运行这个（感觉你的系统上的不同负载）试试这个：var texture0 = new THREE.TextureLoader ().load('crate1.gif'); var texture1 = new THREE.TextureLoader().load('crate3.gif'); var texture2 = new THREE.TextureLoader().load('crate4.gif'); var texture3 = new THREE.TextureLoader().load('crate5.gif'); var texture4 = new THREE.TextureLoader().load('crate6.gif'); var texture5 = new THREE.TextureLoader().load( 'crate7.gif' );

标签： javascript three.js

【解决方案1】：

这个 jsfiddle 可能会有所帮助：http://jsfiddle.net/plotnik/8RtTy/3/

如果它适用于单个纹理，请以这种方式初始化，然后设置：

mesh.material = faceMaterial;
mesh.material.needsUpdate = true;

拨打render()之后。

【讨论】：