Question

我在将一个天空盒添加到Three.js中的简单场景时遇到了问题！

我用于天空盒的代码是：

    var skyBox = new THREE.Mesh( new THREE.BoxGeometry( 1500, 1500, 1500 ), shaderMaterial );
        sceneCube.add( skyBox );

shaderMaterial定义如下：

shader = THREE.ShaderLib[ "cube" ];
shader.uniforms[ "tCube" ].value = textureCube;

var shaderMaterial = new THREE.ShaderMaterial( {

    fragmentShader: shader.fragmentShader,
    vertexShader: shader.vertexShader,
    uniforms: shader.uniforms,
    depthWrite: false,
    side: THREE.BackSide

} );

我只想将一些简单的图像显示为Skybox，所以我用它来加载图像：

     var path = "Desert-";
            var format = '.png';
            var urls = [
                path + 'LEFT' + format, path + 'RIGHT' + format,
                path + 'TOP' + format, path + 'BOT' + format,
                path + 'FRONT' + format, path + 'BACK' + format
            ];
            textureCube = new THREE.CubeTextureLoader().load( urls );

运行我的代码不会在Web控制台中引发任何错误。作为基本场景，我使用http://threejs.org/examples/#webgl_geometry_cube。

我真的试图在互联网上找到答案，但我找不到任何我在这里做错的事。

感谢您的帮助！

这里是我使用的完整代码（我发布这个原因我真的尝试将所有解决方案应用到它，这里发布了）。

<script>

        var camera, scene, renderer, cameraCube, sceneCube;
        var mesh, shader;

        init();
        animate();

        function init() {

            camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 2000 );
            camera.position.z = 400;
            cameraCube = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );


            scene = new THREE.Scene();
            sceneCube = new THREE.Scene();


            var path = "textures/Desert-";
            var format = '.png';
            var urls = [
                path + 'LEFT' + format, path + 'RIGHT' + format,
                path + 'TOP' + format, path + 'BOTTOM' + format,
                path + 'FRONT' + format, path + 'BACK' + format
            ];
            console.log(urls);
            textureCube = new THREE.CubeTextureLoader().load( urls );

            // Skybox

            shader = THREE.ShaderLib[ "cube" ];
            shader.uniforms[ "tCube" ].value = textureCube;

            var shaderMaterial = new THREE.ShaderMaterial( {

                fragmentShader: shader.fragmentShader,
                vertexShader: shader.vertexShader,
                uniforms: shader.uniforms,
                depthWrite: false,
                side: THREE.BackSide

            } );


            var skyBox = new THREE.Mesh( new THREE.BoxGeometry( 1500, 1500, 1500 ), shaderMaterial );
            sceneCube.add( skyBox );

            var texture = new THREE.TextureLoader().load( urls[3] );

            var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
            var material = new THREE.MeshBasicMaterial( { map: texture } );

            mesh = new THREE.Mesh( geometry, material );
            scene.add( mesh );

            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 );

            mesh.rotation.x += 0.005;
            mesh.rotation.y += 0.01;

            renderer.render( sceneCube, cameraCube );
            renderer.render( scene, camera );

        }

Answer 1

如果您使用多个渲染过程，请执行以下操作：

renderer.render( sceneCube, cameraCube );
renderer.render( scene, camera );

您需要设置

renderer.autoClear = false;

防止第二个渲染过程清除第一个渲染过程。

three.js r.76

Three.js - Skybox显示黑色

1 个答案: