Question

我正在尝试创建一个应用程序，我将场景拆分为三个视图，类似于此处提供的示例：http://threejs.org/examples/webgl_multiple_views.html

我附上了我的应用程序的一个非常简化的版本，除了在三个视图中分割场景之外，它没有显示任何内容。

我注意到如果我有以下组合：

directionalLight.castShadow = true;

和

renderer.shadowMapEnabled = true;

场景崩溃，即大约2/3的场景全黑。如果我注释掉这两个语句中的任何一个，则场景会正确显示。

有人可以建议为什么会发生这种情况以及解决方法可能是什么？整个代码如下。谢谢。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>three.js webgl - multiple views</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  </head>
  <body>
    <div id="container"></div>
    <div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - multiple views - webgl</div>

    <script src="vendor/three.js/three.js"></script>
    <script src="vendor/three.js/Detector.js"></script>

    <script>

      if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

      var container, stats;
      var views, scene, renderer;
      var mesh, group1, group2, group3, light;
      var mouseX = 0, mouseY = 0;
      var windowWidth, windowHeight;

      init();
      animate();

      function init() {
        container = document.getElementById( 'container' );

        camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.x = 0;
        camera.position.y = 100;
        camera.position.z = 0;
        camera.up.x = 0;
        camera.up.y = 1;
        camera.up.z = 0;

        scene = new THREE.Scene();

        var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
        directionalLight.position.set( 0, 50, 50 );
        directionalLight.castShadow = true; // <------------------ COMMENT OUT
        scene.add( directionalLight );

        renderer = new THREE.WebGLRenderer({
          antialias    : true,
          preserveDrawingBuffer  : true
        });
        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.shadowMapEnabled = true; // <-------------------- COMMENT OUT

        container.appendChild( renderer.domElement );
      }

      function updateSize() {
        if ( windowWidth != window.innerWidth || windowHeight != window.innerHeight ) {
          windowWidth  = window.innerWidth;
          windowHeight = window.innerHeight;
          renderer.setSize ( windowWidth, windowHeight );
        }
      }

      function animate() {
        render();
        requestAnimationFrame( animate );
      }

      function render() {
        updateSize();

        renderer.setViewport(0, 0, windowWidth * 0.75, windowHeight);
        renderer.setScissor(0, 0, windowWidth * 0.75, windowHeight);
        renderer.enableScissorTest( true );
        renderer.setClearColor( new THREE.Color().setRGB( 0.5, 0.5, 0.7 ));
        renderer.render( scene, camera );

        renderer.setViewport(windowWidth * 0.75, 0, windowWidth * 0.25, windowHeight * 0.5);
        renderer.setScissor(windowWidth * 0.75, 0, windowWidth * 0.25, windowHeight * 0.5);
        renderer.enableScissorTest( true );
        renderer.setClearColor( new THREE.Color().setRGB( 0.7, 0.5, 0.5 ));
        renderer.render( scene, camera );

        renderer.setViewport(windowWidth * 0.75, windowHeight * 0.5, windowWidth * 0.25, windowHeight * 0.5);
        renderer.setScissor(windowWidth * 0.75, windowHeight * 0.5, windowWidth * 0.25, windowHeight * 0.5);
        renderer.enableScissorTest( true );
        renderer.setClearColor( new THREE.Color().setRGB( 0.5, 0.7, 0.5 ));
        renderer.render( scene, camera );
      }

    </script>

  </body>
</html>

当shadowMapEnabled = true

0 个答案: