無法獲得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的工作

回答

相關問題