three.js r81：我怎样才能制作一个每个面上都有不同纹理的立方体

Question

我刚更新到最新版本three.js， THREE.ImageUtils.loadTexture 不再起作用了。所以我搜索了不同面孔的立方体，但它们都是使用旧技术“new 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 个不同面的立方体，那就太棒了！谢谢！

Answer 1

THREE.js 有一个未记录的 material，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 平面，并将每个 material 应用于一个面 (mrdoob himself)。换句话说，如果此方法停止工作，您的替代方法是手动从 6 个平面制作一个立方体，使它们成为空对象的子对象，以便您可以将它们视为一个立方体，然后将您的 material 应用于每个平面单独。

如果您不需要在运行时动态确定立方体面并且可以 "bake" 将它们放入纹理中，技术上更好（但更难）的选择是使用 UV 贴图。

three.js r81：我怎样才能制作一个每个面上都有不同纹理的立方体

three.js r81: How can do i make a cube with diffrent textures on each face

javascript

textures

three.js