Javascript 这个Three.js skybox代码有什么问题？_Javascript_Three.js

Javascript 这个Three.js skybox代码有什么问题？

javascript three.js

Javascript 这个Three.js skybox代码有什么问题？,javascript,three.js,Javascript,Three.js,我试图用3JS代码创建一个SkyBox。它不起作用。它只闪烁了一秒钟就变成了黑色。代码如下： <html> <head> </head> <body> <script src="js/three.js"></script> <script> var scene = new THREE.Scene(); var camera = new THREE.Perspect

我试图用3JS代码创建一个SkyBox。它不起作用。它只闪烁了一秒钟就变成了黑色。代码如下：

<html>
<head>

</head>
<body>
    <script src="js/three.js"></script>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 100000 );

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

        camera.position.z=5;

        var geometry=new THREE.CubeGeometry(10000,10000,10000);
        var cubeMaterials=camera
        [
            new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load("img/skydome.jpg"), side:THREE.DoubleSide}),
            new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load("img/skydome.jpg"), side:THREE.DoubleSide}),
            new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load("img/skydome.jpg"), side:THREE.DoubleSide}),
            new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load("img/grass-texture.jpg"), side:THREE.DoubleSide}),
            new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load("img/skydome.jpg"), side:THREE.DoubleSide}),
            new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load("img/skydome.jpg"), side:THREE.DoubleSide})
        ];

        //var cubeMaterial=new THREE.MeshBasicMaterial(cubeMaterials);
        var cube=new THREE.Mesh(geometry,cubeMaterials);
        scene.add(cube);

        renderer.render(scene,camera);


    </script>
</body>
</html>


var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（75，window.innerWidth/window.innerHeight，0.11000）；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
摄像机位置z=5；
var几何=新的三立方测量法（100001000010000000）；
var立方体材料=摄像机
[
新的THREE.MeshBasicMaterial（{map:new THREE.TextureLoader（）.load（“img/skydome.jpg”），side:THREE.DoubleSide}），
新的THREE.MeshBasicMaterial（{map:new THREE.TextureLoader（）.load（“img/skydome.jpg”），side:THREE.DoubleSide}），
新的THREE.MeshBasicMaterial（{map:new THREE.TextureLoader（）.load（“img/skydome.jpg”），side:THREE.DoubleSide}），
新的THREE.MeshBasicMaterial（{map:new THREE.TextureLoader（）.load（“img/grass texture.jpg”），side:THREE.DoubleSide}），
新的THREE.MeshBasicMaterial（{map:new THREE.TextureLoader（）.load（“img/skydome.jpg”），side:THREE.DoubleSide}），
新的THREE.MeshBasicMaterial（{map:new THREE.TextureLoader（）.load（“img/skydome.jpg”），side:THREE.DoubleSide}）
];
//var cubeMaterial=新的三种网状基本材料（cubeMaterials）；
var cube=新的三网格（几何体、立方体材料）；
场景.添加（立方体）；
渲染器。渲染（场景、摄影机）；

我不知道里面怎么了。那么，这段代码中的问题是什么

    var cubeMaterials=camera
    [

这是错误的

必须确保仅在加载所有纹理后执行渲染。我使用

LoadingManager

更新了您的代码，向您展示了一种可能的解决方案

const scene=new THREE.scene（）；
const-camera=新的三视角摄像机（75，window.innerWidth/window.innerHeight，0.11000）；
const renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
常数几何=新的三立方测量法（100001000010000000）；
const-manager=new-THREE.LoadingManager（）；
常量加载器=新的三个.TextureLoader（管理器）；
const tex1=加载程序。加载（'https://threejs.org/examples/textures/crate.gif' );
const tex2=加载程序。加载（'https://threejs.org/examples/textures/uv_grid_opengl.jpg' );
manager.onLoad=函数（）{
常数立方材料=[
新的三点网格基本材质（{map:tex1，side:THREE.DoubleSide}），
新的三点网格基本材质（{map:tex1，side:THREE.DoubleSide}），
新的三点网格基本材质（{map:tex1，side:THREE.DoubleSide}），
新的3.MeshBasicMaterial（{map:tex2，side:THREE.DoubleSide}），
新的3.MeshBasicMaterial（{map:tex2，side:THREE.DoubleSide}），
新的三点网格基本材质（{map:tex2，side:THREE.DoubleSide}）
];
常量立方体=新的三网格（几何体、立方体材料）；
场景.添加（立方体）；
渲染器。渲染（场景、摄影机）；
};
这是做什么的：src=“js/three.js”
预期的结果是什么？请让愿意帮助您了解所需结果和您在实现结果方面的进展的人更容易。src=“js/three.js”引用three.js脚本。预期结果是显示一个加载了所有纹理的立方体天空盒。那么可能的解决方案是什么？