3

我想开始使用 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>

如果我取消注释最后一行，我会在屏幕上看到一些东西。

4

2 回答 2

11

首先，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 );
于 2012-11-14T14:30:41.263 回答
1

我也遇到了 EffectComposer 的一些问题。

但我认为这纯粹归结为不知道它是如何在幕后工作的。

你可以解决你的问题（作为一个黑客）

如果你添加

var effectFilm = new THREE.FilmPass( 0, 0, 0, false );
effectFilm.renderToScreen = true;
composer.addPass( effectFilm );
于 2012-11-14T13:09:17.007 回答