时间戳

首页 > 解决方案 > 这个 Three.js skybox 代码里面有什么问题？

javascript - 这个 Three.js skybox 代码里面有什么问题？

问题描述

我试图用 ThreeJS 代码创建一个 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>

我不知道里面出了什么问题。那么这段代码里面有什么问题呢？

标签： javascriptthree.js

解决方案

您必须确保仅在加载所有纹理后执行渲染。我已经通过LoadingManager向您展示一种可能的解决方案来更新您的代码。

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

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

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

const manager = new THREE.LoadingManager();
const loader = new THREE.TextureLoader(manager);

const tex1 = loader.load( 'https://threejs.org/examples/textures/crate.gif' );
const tex2 = loader.load( 'https://threejs.org/examples/textures/uv_grid_opengl.jpg' );

manager.onLoad = function() {

	const cubeMaterials= [
		new THREE.MeshBasicMaterial({map:tex1, side:THREE.DoubleSide}),
		new THREE.MeshBasicMaterial({map:tex1, side:THREE.DoubleSide}),
		new THREE.MeshBasicMaterial({map:tex1, side:THREE.DoubleSide}),
		new THREE.MeshBasicMaterial({map:tex2, side:THREE.DoubleSide}),
		new THREE.MeshBasicMaterial({map:tex2, side:THREE.DoubleSide}),
		new THREE.MeshBasicMaterial({map:tex2, side:THREE.DoubleSide})
	];

	const cube=new THREE.Mesh(geometry,cubeMaterials);
	scene.add(cube);

	renderer.render(scene,camera);

};
<script src="https://cdn.jsdelivr.net/npm/three@0.117.1/build/three.js"></script>

推荐阅读