javascript - THREE.MeshFaceMaterial 已被删除。改用数组

Question

当前尝试在 three.js 上将图像环绕立方体并出现以下错误“THREE.MeshFaceMaterial 已被删除。请改用数组。'，从以前的搜索来看，我尝试使用的方法可能不再可用，是否有任何人知道的新方法？我将在下面附上代码。任何帮助将不胜感激。提前致谢，迈克。

<script src="js/three.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script src="js/ParallaxBarrierEffect.js"></script>

    <script>
        (function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='//rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})()

        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        window.addEventListener('resize', function ()
        {
            var width = window.innerWidth;
            var height = window.innerHeight;
            renderer.setSize(width, height);
            camera.aspect = width / height;
            camera.updateProjectionMatrix();
        });

        //var effect = new THREE.ParallaxBarrierEffect(renderer);
        //effect.setSize(window.innerWidth, window.innerHeight);

        controls = new THREE.OrbitControls(camera, renderer.domElement)

        /* var loader = new THREE.ObjectLoader();

        loader.load
        (
            'models/skull.json',

            function(object)
            {
                scene.add(object);
            }
        );

        */

        var geometry = new THREE.CubeGeometry(10000,10000,10000);

        var cubeMaterials = 
        [
            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('skybox/right.png'), side: THREE.DoubleSide}), // RIGHT SIDE
            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('skybox/left.png'), side: THREE.DoubleSide}), // LEFT SIDE
            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('skybox/top.png'), side: THREE.DoubleSide}), // TOP SIDE
            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('skybox/bottom.png'), side: THREE.DoubleSide}), // BOTTOM SIDE
            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('skybox/front.png'), side: THREE.DoubleSide}), // FRONT SIDE
            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('skybox/back.png'), side: THREE.DoubleSide}) // BACK SIDE
        ];

        var cubeMaterial = new THREE.MeshFaceMaterial(cubeMaterials);
        var cube = new THREE.Mesh(geometry, cubeMaterial);

        scene.add(cube);


        camera.position.z = 3;

        var ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.3);
        scene.add(ambientLight);


        var light1 = new THREE.PointLight(0xFF0040, 4, 5);
        //scene.add(light1);

        var light2 = new THREE.PointLight(0x0040FF, 2, 5);
        //scene.add(light2);

        var light3 = new THREE.PointLight(0x80FF80, 4, 5);
        //scene.add(light3);

        var directionalLight = new THREE.DirectionalLight(0xFFFFFF, 1);
        directionalLight.position.set(0,1,0);
        //scene.add(directionalLight);

        var spotLight = new THREE.SpotLight(0xFF45F6, 200);
        spotLight.position.set(0,3,3);
        //scene.add(spotLight);

        var update = function()
        {
            //cube.rotation.x += 0.01;
            //cube.rotation.z += 0.005;

            var time = Date.now() * 0.0005;

            light1.position.x = Math.sin(time + 0.7) * 30;
            light1.position.x = Math.cos(time + 0.5) * 40;
            light1.position.x = Math.cos(time + 0.3) * 30;

            light2.position.x = Math.cos(time + 0.3) * 30;
            light2.position.x = Math.sin(time + 0.5) * 40;
            light2.position.x = Math.sin(time + 0.7) * 30;

            light3.position.x = Math.sin(time + 0.7) * 30;
            light3.position.x = Math.cos(time + 0.3) * 40;
            light3.position.x = Math.sin(time + 0.5) * 30;

        };

        var render = function()
        {
            renderer.render(scene, camera);
        };



        var GameLoop = function()
        {
            requestAnimationFrame(GameLoop);

            update();
            render();
        };

        GameLoop();
    </script>

Answer 1

如果您尝试创建天空盒，您可以将 THREE.MeshFaceMaterial(cubeMaterials) 更改为 THREE.MeshBasicMaterial(cubeMaterials)。但是请注意，你的透视相机一直渲染到 1000，而你的盒子有 10000 个单位，所以如果你想看到天空盒，你将不得不更改你的相机变量。