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 に答える