无法使Three.js EffectComposer正常工作 [英] Can't get three.js EffectComposer to work
问题描述
我想开始使用EffectComposer对渲染进行一些后处理，但是我无法获得最基本的设置来渲染到屏幕上.它只是保持空白.我一定在看东西.有人有主意吗?
I want to start doing some postprocessing on my renders with the EffectComposer but I can't get the most basic setup to render to the screen. It just stays blank. I must be looking over something. Does anybody have an idea?
<!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>
如果我取消注释最后一行，我会在屏幕上看到一些东西.
If I uncomment the last line I get something on the screen.
推荐答案
首先， EffectComposer 不属于库的一部分，而是示例的一部分.因此它不受官方支持.
First of all, EffectComposer is not part of the library -- it's part of the examples. So it's not officially supported.
是的，您必须知道引擎盖后面的工作方式."
So yes, you have to "know how it's working behind the hood."
您可以通过添加额外的 CopyPass 来解决问题，如下所示:
You can fix your problem by adding an extra CopyPass like so:
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 );
这篇关于无法使Three.js EffectComposer正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
