three.js r81：如何在每个面上制作具有不同纹理的立方体答案

【问题标题】：three.js r81: How can do i make a cube with diffrent textures on each facethree.js r81：如何在每个面上制作具有不同纹理的立方体
【发布时间】：2016-09-28 01:58:27
【问题描述】：

我刚刚更新到了three.js的最新版本，并且 THREE.ImageUtils.loadTexture 不再起作用。所以我搜索了具有不同面孔的立方体，但它们都是使用旧技术“新的 THREE.ImageUtils.loadTexture”。我尝试使用“new THREE.TextureLoader.load(' texture1.png ')”制作一个。这就是我所拥有的：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - geometry - cube</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                margin: 0px;
                background-color: #000000;
                overflow: hidden;
            }
        </style>
    </head>
    <body>

        <script src="library/threejs/build/three.js"></script>

        <script>
            var camera, scene, renderer;
            var head;
            var loader = new THREE.TextureLoader();
            init();
            animate();
            function init() {
                camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
                camera.position.z = 400;
                scene = new THREE.Scene();
            materials = [
            new THREE.TextureLoader().load( 'textures/mob/zombie/zombie_headfront.png' ),
            new THREE.TextureLoader().load( 'textures/mob/zombie/zombie_headback.png' ),
            new THREE.TextureLoader().load( 'textures/mob/zombie/zombie_headleft.png' ),
            new THREE.TextureLoader().load( 'textures/mob/zombie/zombie_headright.png' ),
            new THREE.TextureLoader().load( 'textures/mob/zombie/zombie_headup.png' ),
            new THREE.TextureLoader().load( 'textures/mob/zombie/zombie_headdown.png' )];

    head = new THREE.Mesh(
            new THREE.BoxBufferGeometry(80, 80, 80, 1, 1, 1, materials),
            new THREE.MeshBasicMaterial({ map: materials })
    );
                scene.add( head );
                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                document.body.appendChild( renderer.domElement );
                window.addEventListener( 'resize', onWindowResize, false );
            }
            function onWindowResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize( window.innerWidth, window.innerHeight );
            }
            function animate() {
                requestAnimationFrame( animate );
                head.rotation.x += 0.005;
                head.rotation.y += 0.01;
                renderer.render( scene, camera );
            }
        </script>

    </body>
</html>

但我得到了错误：

TypeError: offset is undefined

和

THREE.WebGLShader: Shader couldn't compile

还有

THREE.WebGLShader: gl.getShaderInfoLog() fragment ERROR: 0:238:   
'mapTexelToLinear' : no matching overloaded function found

所以，如果你知道如何解决这个问题，或者只是知道如何制作一个有 6 个不同面的立方体，那就太棒了！谢谢！

【问题讨论】：

标签： javascript three.js textures

【解决方案1】：

THREE.js 有一个未记录的材料，THREE.MeshFaceMaterial，它已经被弃用了一段时间，但在 r81 中仍然有效。

// Make an array of six regular materials
var materials = [
    new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("https://i.imgur.com/8B1rYNY.png")}),
    new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("https://i.imgur.com/8w6LAV6.png")}),
    new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("https://i.imgur.com/aVCY4ne.png")}),
    new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("https://i.imgur.com/tYOW02D.png")}),
    new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("https://i.imgur.com/nVAIICM.png")}),
    new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("https://i.imgur.com/EDr3ed3.png")})
];
var geometry = new THREE.BoxBufferGeometry(200, 200, 200);

// Use THREE.MeshFaceMaterial for the cube, using the array as the parameter
mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));

Demo

显然，这在内部工作的方式是为立方体的每个面创建一个THREE.BufferGeometry 平面并将每种材料应用于一个面 (mrdoob himself)。换句话说，如果此方法停止工作，您的替代方法是手动制作一个由 6 个平面组成的立方体，将它们设为空对象的子对象，这样您就可以将它们视为单个立方体，然后将您的材质分别应用于每个平面。

如果您不需要在运行时动态确定立方体面并且可以将它们“烘焙”成纹理，那么技术上更好（但更困难）的选项是使用 UV 映射。

【讨论】：

非常感谢！仍然很奇怪，没有在线文档。 :D