三.js:添加后期处理的泛光效果

Question

>我在尝试实现后处理时遇到问题

const renderer = new THREE.WebGLRenderer()
renderer.setSize(sizes.width, sizes.height)
document.body.appendChild(renderer.domElement)
const composer = new EffectComposer(renderer)
var bloomEffect = new BloomEffect();
const effectPass = new EffectPass(camera, bloomEffect);
effectPass.renderToScreen = true;
composer.addPass(effectPass);
effectPass.renderToScreen = true
/* Controls */
var controls = new OrbitControls( camera, renderer.domElemen );
controls.maxDistance = 50;
controls.minDistance = 0;
/**
* Loop
*/
const loop = () => {
    window.requestAnimationFrame(loop)
    //camera.position.x = cursor.x * 3
    //camera.position.y = - cursor.y * 3
    camera.lookAt(new THREE.Vector3())
    camera.updateMatrixWorld();
    controls.update();
    // Renderer
    //renderer.render(scene, camera)
    composer.render();
}
loop()

你可以在这里找到我的完整代码：https://pastebin.com/RPybJKfX

我尝试得到这个结果 https://vanruesc.github.io/postprocessing/public/demo/#bloom或者如果你有其他解决方案来制作这个（我想制作星云或类似的东西）

谢谢

Answer 1

你错过了这一行

composer.addPass(new RenderPass(scene, camera));

您可以在此链接中确切了解如何实现您所引用的示例：https://vanruesc.github.io/postprocessing/#usage