I am following a tutorial for a volumetric shading "godrays" in threejs.However, when I run it, the screen is completely black and nothing shows up. By the way, the scene is running, the only problem is that it isn't being rendered. And I got the godrays from this github repo. Thanks so much!
//there are other objects in this scene, but the code is too long to add everything here.
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor(0xff0000)// -- for debuging, makes background red
document.body.appendChild( renderer.domElement );
camera.position.set(
5,
5,
5
);
camera.lookAt(0,0,0);
//snip
const sunGeo = new THREE.SphereGeometry( 1, 16, 16 );
const sunColor = new THREE.MeshPhongMaterial( {color: 0xfff222, emissive: 0xfff222, emissiveIntensity: 2} )
const sun = new THREE.Mesh( sunGeo, sunColor );
scene.add(sun)
let godraysEffect = new POSTPROCESSING.GodRaysEffect(camera, sun, {
resolutionScale: 1,
density: 0.6,
decay: 0.95,
weight: 0.9,
samples: 100
})
let renderPass = new POSTPROCESSING.RenderPass(scene, camera);
let effectPass = new POSTPROCESSING.EffectPass(camera,godraysEffect);
effectPass.renderToScreen = true;
composer = new POSTPROCESSING.EffectComposer(renderer);
composer.enabled = true
composer.addPass(renderPass);
composer.addPass(effectPass);
// snip
function animate(){
//snip
requestAnimationFrame(animate)
composer.render(.1) //Btw I don't know what this argument does. Can someone tell me?
}
animate()<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r99/three.min.js"></script>
<script src = "./node_modules/postprocessing/build/postprocessing.min.js"></script>
<script src="./index.js"></script>