Implementing Object Glow Effect in Three.js Using EffectComposer
This tutorial demonstrates how to create a glowing effect for 3D objects in three.js by setting up a basic HTML framework, loading a GLTF model, configuring EffectComposer with RenderPass, UnrealBloomPass, and OutputPass, adding automatic rotation, a GUI for parameter tweaking, and a performance monitor, all illustrated with complete source code.
The article introduces a common requirement in three.js projects: adding a realistic glow (bloom) effect to 3D objects, such as illuminated buildings, and explains that the EffectComposer post‑processing pipeline is the key tool for achieving this.
Technical setup : A minimal HTML page is created with a <!DOCTYPE html> <html lang="en"> <head> <title>three.js object glow effect</title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/> <link rel="stylesheet" href="./main.css"/> </head> <body> <div id="container"></div> <script type="importmap"> {"imports":{"three":"https://unpkg.com/[email protected]/build/three.module.js","three/addons/":"https://unpkg.com/[email protected]/examples/jsm/"}} </script> </body> </html> structure loads three.js and its addons via an import map.
Model loading : The GLTF model PrimaryIonDrive.glb is placed in the project root and loaded with new GLTFLoader().load("./PrimaryIonDrive.glb", function (gltf) { scene.add(gltf.scene); mixer = new THREE.AnimationMixer(gltf.scene); mixer.clipAction(gltf.animations[0].optimize()).play(); animate(); }); . A basic scene, perspective camera, ambient light, point light, and orbit controls are also created.
EffectComposer configuration : Four passes are assembled: const renderScene = new RenderPass(scene, camera); const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85); bloomPass.threshold = params.threshold; bloomPass.strength = params.strength; bloomPass.radius = params.radius; const outputPass = new OutputPass(); composer = new EffectComposer(renderer); composer.addPass(renderScene); composer.addPass(bloomPass); composer.addPass(outputPass); This chain renders the scene, applies bloom, and outputs the final image.
Animation loop : An animation loop updates the mixer and renders via the composer: function animate() { requestAnimationFrame(animate); const delta = clock.getDelta(); mixer.update(delta); stats.update(); composer.render(); }
GUI for parameter tweaking : Using lil‑gui , a panel is created to adjust threshold , strength , radius , and exposure in real time, directly modifying the bloom pass and renderer tone‑mapping exposure.
Performance monitor : The Stats module is added to display FPS and rendering statistics. stats = new Stats(); container.appendChild(stats.dom);
Responsive handling : A resize listener updates the camera aspect, renderer size, and composer size to keep the view consistent on window size changes.
Complete demo : The article provides the full HTML, JavaScript, and CSS source files, allowing readers to copy the code and run the demo locally.
Conclusion : By combining three.js core features with EffectComposer and its passes, developers can easily add customizable glow effects, automatic rotation, GUI controls, and performance monitoring to their 3D web applications.
Rare Earth Juejin Tech Community
Juejin, a tech community that helps developers grow.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.