Creating GodRays in ThreeJS using the postprocessing library

In this article, we explore how to create a dynamic Three.js scene by integrating GodRaysEffect from the postprocessing library and loading 3D models using GLTFLoader. We walk through the basics of setting up a scene with a camera, lighting, and controls, and demonstrate how to enhance visual quality using god rays—a stunning light scattering effect that simulates beams of light passing around an object. This guide provides insights into using the postprocessing library to apply multiple visual effects, improving the overall aesthetic of the scene.

Step 1: Setting Up the Scene

The foundation of any Three.js project involves setting up a scene, camera, renderer, and essential controls. Here’s a breakdown of how this is done in the provided code:

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(
 75,
 window.innerWidth / window.innerHeight,
 0.1,
 1000
);
camera.position.set(0, 0, 15);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

Step 2: Lighting the Scene

To properly illuminate the scene, we use PointLight.

light = new THREE.PointLight(0xf6aaaa);
light.position.set(0, 0, 0);
scene.add(light);

PointLight is a dynamic light source that radiates light in all directions from a single point. In this case, its color is a soft pink.

Step 3: Loading a 3D Model with GLTFLoader

The code uses GLTFLoader to load a 3D model into the scene. This loader is essential for importing GLTF or GLB model formats, which are widely used due to their small size and support for animations.

modelLoader = new GLTFLoader();
modelLoader.load("Static/Models/hollow_sphere.glb", (glb) => {
 model = glb.scene;
 glb.scene.scale.set(0.05, 0.05, 0.05); // Rescaling the model
 scene.add(glb.scene); // Adding the model to the scene
});

Step 4: Adding Postprocessing Effects with GodRaysEffect

One of the highlights of this scene is the GodRaysEffect. This effect simulates light rays that scatter when blocked by an object, creating a volumetric lighting effect.

1. Introduction to the Postprocessing Library

The postprocessing library provides a framework to apply multiple postprocessing effects (such as bloom, depth of field, and god rays) to a Three.js scene. It works by rendering the scene into a series of passes, where each pass modifies the visual output in some way before the final frame is displayed.

2. Configuring the GodRaysEffect

let godrayEffect = new GodRaysEffect(camera, mesh, {
 resolutionScale: 1,
 density: 0.9,
 decay: 0.9,
 weight: 0.5,
 samples: 100,
});

• GodRaysEffect takes in three main parameters:

1. camera: The camera through which the effect is viewed.
2. mesh: The object that will block the light and create the god rays.
3. Options such as resolutionScale, density, decay, weight, and samples allow you to fine-tune the appearance of the rays.

3. Applying Postprocessing Passes

To apply the god rays effect, we set up multiple passes within EffectComposer:

let renderPass = new RenderPass(scene, camera);
let effectPass = new EffectPass(camera, godrayEffect);
effectPass.renderToScreen = true;

composer = new EffectComposer(renderer);
composer.addPass(renderPass);
composer.addPass(effectPass);

• RenderPass renders the scene normally.
• EffectPass applies the god rays effect.
• composer combines these passes, and the result is rendered to the screen.

Step 5: Animating the Scene

In the animate function, the EffectComposer is used instead of directly calling renderer.render() to include the postprocessing effects:

function animate() {
 if (model) {
  model.rotation.y += 0.001;
  model.rotation.x += 0.001;
 }
 composer.render(0.1);
 requestAnimationFrame(animate);
}