无法获得three.js EffectComposer的工作

我想开始使用EffectComposer对渲染进行一些后处理，但我无法获取最基本的设置以渲染到屏幕。它只是保持空白。我一定在看东西。有人有想法吗？无法获得three.js 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>

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

来源

2012-11-12 Jan

，除非我可以把它渲染，但它呈现为一个完整的一塌糊涂。另外我不认为“renderPass.renderToScreen = true;”实际上是renderpass的一个选项（我知道它应该有，因为电影有它，但是如果你看RenderPass.js的源代码，它没有renderToScreen选项。 – james

你是否尝试过我的示例，因为当我使用'renderer.render（scene，camera）;'在这里我正确地在屏幕上显示我的立方体 – Jan

是的，如果你同时启用这两个功能，会发生什么事情？ http://www.cytoweb.co.uk/3ds/examples/ freakout.html <这就是发生什么事时 – james

首先，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-14 14:30:41 WestLangley

感谢您的帮助，希望可以用这个来解决我的问题我不是要求勺喂饱的帮助...但只是为了检查..这是我遇到的问题（相关）http://cytoweb.co.uk/3ds/examples/fr eakout.html ..一个错误或只是我越来越混淆？（这应该是一个立方体，但通过EffectComposer运行后，它会变成对我的所有抽象） – james

@james如果您有问题，请发布新问题。但我想你可以通过消除的过程自己回答这个问题。 – WestLangley

是的，我一直在研究它几天，但还没有能够解决这个问题（但它可能是我迄今错误，我只需要采取一种新的方法）。我会继续:) – james

我对EffectComposer也有一些问题。

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

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

如果添加

var effectFilm = new THREE.FilmPass(0, 0, 0, false); 
effectFilm.renderToScreen = true; 
composer.addPass(effectFilm);

来源

2012-11-14 13:09:17 james

无法获得three.js EffectComposer的工作

回答

相关问题