Question

即使身体背景颜色为＃135462，下面的代码也会显示黑屏。我认为它由于渲染代码而显示黑屏。但是无法移除黑色屏幕并获得背景颜色。

对象也没有显示在屏幕上。我的对象链接可以在这里找到：https://www.dropbox.com/s/ukw7k1vyqkg4f7d/SupermanSmall.json?dl=0

任何人都有任何想法为什么会发生这种情况？

    <!DOCTYPE html>
<html lang="en">
    <head>
        <title>My three.js</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                background:#135462;
                color:#fff;
                padding:0;
                margin:0;
                overflow:hidden;
                font-family:georgia;
                text-align:center;
            }


        </style>
    </head>

    <body>          

            <script src="js/three.min.js"></script>
            <script src="js/loaders/BinaryLoader.js"></script>

            <script src="js/loaders/ObjectLoader.js"></script>
            <script src="js/Detector.js"></script>

          <script>
          if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

                        var container;
            var camera, scene, renderer;

            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;

            init();
            animate();

            function init() {
                container = document.createElement( 'div' );
                document.body.appendChild( container );

                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 10000 );
                camera.position.z = 5;

                scene = new THREE.Scene();
                scene.add( camera );

                var loader = new THREE.ObjectLoader();
                loader.load( "obj/superman/SupermanSmall.json", function(obj){

                scene.add(obj);

                });

                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );



            }

            function animate() {

                    requestAnimationFrame( animate );
                    camera.lookAt( scene.position );

                    renderer.render( scene, camera );

            }

          </script>

    </body>
</html>

Answer 1

我猜测一旦你修复错误，你可能仍然有黑屏。尝试添加：

renderer.setClearColor(0xEEEEEE);

或者你想要放在那里的任何颜色。如果您愿意，也可以这样做：

renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));

这应该会改变你的背景颜色。

Answer 2

另一种解决方案是将alpha的{{1}}属性设置为renderer。这将允许透明度显示您在CSS中定义的背景，即：

<强> CSS

true

<强>的Javascript

body {
    background: linear-gradient(#e4e0ba, #f7d9aa);
    margin: 0px;
    overflow: hidden;
}

在渲染中获取three.js中的黑屏

2 个答案: