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有一个未记录的材料，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个平面中制作一个立方体，使它们成为空对象的子项，以便将它们视为单个立方体，然后将材质分别应用于每个平面。 / p>

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

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

1 个答案: