无法让three.js EffectComposer工作

Question

无法让three.js EffectComposer工作

我想开始使用EffectComposer对渲染进行一些后处理,但是我无法获得最基本的渲染到屏幕的设置.它只是留空.我一定是在寻找一些东西.有人有想法吗？

<!doctype html>
<html>
  <head>
    <title>game</title>
    <style type="text/css">
      html, body {        
        margin: 0px;
        width: 100%;
        height: 100%;
      }

      canvas {
        display: block;
      }
    </style>    
  </head>
  <body>
    <canvas id="viewport"></canvas>
    <script type="text/javascript" src="three.js"></script>
    <script type="text/javascript" src="CopyShader.js"></script>
    <script type="text/javascript" src="ShaderPass.js"></script>
    <script type="text/javascript" src="EffectComposer.js"></script>
    <script type="text/javascript" src="RenderPass.js"></script>
    <script type="text/javascript" src="MaskPass.js"></script>
    <script type="text/javascript">
      var width = document.body.clientWidth;
      var height = document.body.clientHeight;      
      var canvas = document.querySelector('#viewport');
      var renderer = new THREE.WebGLRenderer({canvas: canvas});
      renderer.setSize(width, height);

      var scene = new THREE.Scene();

      var cube = new THREE.Mesh(
        new THREE.CubeGeometry(30, 30, 30), 
        new THREE.MeshPhongMaterial({color: 0xFF0000}));
      scene.add(cube);

      var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
      camera.position = new THREE.Vector3(60, 60, 60);
      camera.lookAt(cube.position);
      camera.updateMatrix();
      scene.add(camera);      

      var pointLight = new THREE.PointLight(0xFFFFFF);
      pointLight.position = new THREE.Vector3(100, 80, 20);
      scene.add(pointLight);

      var renderPass = new THREE.RenderPass(scene, camera);
      renderPass.renderToScreen = true;      
      var composer = new THREE.EffectComposer(renderer);
      composer.addPass(renderPass);
      renderer.clear();
      composer.render();

      //renderer.render(scene, camera);
    </script>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

如果我取消注释最后一行,我会在屏幕上显示一些内容.

Answer 1

Wes*_*ley 10

首先,EffectComposer它不是库的一部分 - 它是示例的一部分.所以它没有得到官方的支持.

所以,是的,你必须"知道它是如何在引擎盖下工作的."

你可以通过添加额外的CopyPass东西来修复你的问题:

var renderPass = new THREE.RenderPass( scene, camera );

var copyPass = new THREE.ShaderPass( THREE.CopyShader );
copyPass.renderToScreen = true;

var composer = new THREE.EffectComposer( renderer );
composer.addPass( renderPass );
composer.addPass( copyPass );

composer.render( 0.05 );

Run Code Online (Sandbox Code Playgroud)

要了解发生了什么：RenderPass仅渲染到composer缓冲区，它没有“ renderToScreen”标志。它不打算单独使用，因此，如果您的作曲家是“空的”，则需要最少的CopyShader。 (2认同)

归档时间：	13 年前
查看次数：	9121 次
最近记录：	13 年前