我想开始使用 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>
如果我取消注释最后一行，我会在屏幕上看到一些内容。
首先，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 );
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
