javascript - 天空盒未显示，但立方体

我试图使一个带有旋转立方体的天空盒出现，但是天空盒不显示而旋转立方体却出现。

我正在本地Web服务器上运行它
我已经尝试从我所遵循的教程中进行复制和粘贴，这似乎很好，但是我却没有，也不知道问题出在哪里，因为它们看起来都非常相似。教程：https://redstapler.co/create-3d-world-with-three-js-and-skybox-technique/

<!DOCTYPE html>
<html>
<head>
        <title>FirstPersonGame</title>
<style>

canvas {
        width: 100%;
        height: 100%
        position: absolute;
}

body {
        margin: 0px;
}

</style>
</head>
<body>
    <script src = "three.min.js"></script>
    <script>
        var slowDownBy = 8;
        var scene = new THREE.Scene();
        var camera = new
        THREE.PerspectiveCamera(90,window.innerWidth/window.innerHeight,0.1,30000);

        var renderer = new THREE.WebGLRenderer({antialias:false});
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var geometry = new THREE.BoxGeometry(1,1,1);
        var material = new THREE.MeshBasicMaterial({color: 0xffff00})
        var cube = new THREE.Mesh(geometry, material);

        let materialArray = [];
        let SkyBox_1 = new THREE.TextureLoader().load('arid2_bk.jpg');
        let SkyBox_2 = new THREE.TextureLoader().load('arid2_dn.jpg');
        let SkyBox_3 = new THREE.TextureLoader().load('arid2_ft.jpg');
        let SkyBox_4 = new THREE.TextureLoader().load('arid2_lf.jpg');
        let SkyBox_5 = new THREE.TextureLoader().load('arid2_rt.jpg');
        let SkyBox_6 = new THREE.TextureLoader().load('arid2_up.jpg');

        materialArray.push(new THREE.MeshBasicMaterial({map: SkyBox_1}));
        materialArray.push(new THREE.MeshBasicMaterial({map: SkyBox_2}));
        materialArray.push(new THREE.MeshBasicMaterial({map: SkyBox_3}));
        materialArray.push(new THREE.MeshBasicMaterial({map: SkyBox_4}));
        materialArray.push(new THREE.MeshBasicMaterial({map: SkyBox_5}));
        materialArray.push(new THREE.MeshBasicMaterial({map: SkyBox_6}));

        animate();

        for (let i = 0; i < 6; i++){
           materialArray[i].side = THREE.BackSide;
           let skyBoxGeo = new THREE.BoxGeometry(1000,1000,1000);
           let SkyBox = new THREE.MeshBasicMaterial(skyBoxGeo,materialArray);
           scene.add(SkyBox);
        }

        scene.add(cube);

        camera.position.z = 5;

        function animate() {
           requestAnimationFrame( animate );
           cube.rotation.y += 75/slowDownBy;
           renderer.render(scene, camera);
        }
        </script>
</body>
</html>

我也收到错误：

THREE.Object3D.add：对象不是THREE.Object3D的实例。

最佳答案

这部分

let skyBoxGeo = new THREE.BoxGeometry(1000,1000,1000);
let SkyBox = new THREE.MeshBasicMaterial(skyBoxGeo,materialArray);

应该像那样

let skyBoxGeo = new THREE.BoxBufferGeometry(1000, 1000, 1000);
let skyBox = new THREE.Mesh(skyBoxGeo, materialArray); // it must be Mesh(), not MeshBasicMaterial()

而且您不需要这一行：

scene.add(cube); // as there is no variable with the name `cube`

关于javascript - 天空盒未显示，但立方体，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58054970/