Introduction to Volumetric Rendering Volumetric rendering visualizes 3D scalar fields where each voxel contributes to the final image based on its density and optical properties. Unlike surface rendering, volumetric techniques capture internal structures, making them perfect for: Atmospheric effects: Clouds, fog, and smoke simulation Scientific visualization: Medical CT/MRI data, seismic volumes VFX: Explosions, fire, and… Continue reading Volumetric Rendering in Three.js
Tag: threejs
VectorKeyframeTrack
A Track of vector keyframe values. Constructor VectorKeyframeTrack( name : String, times : Array, values : Array, interpolation : Constant ) name – (required) identifier for the KeyframeTrack. times – (required) array of keyframe times. values – values for the keyframes at the times specified, a flat array of vector components. interpolation – the type of interpolation to use. See Animation Constants for possible values. Default… Continue reading VectorKeyframeTrack
Substepping: Reducing Character Tunneling
Physics simulations in real-time 3D experiences depend on discrete time steps to update motion, collisions, and forces. When objects move too far between frames—due to frame drops, high velocities, or gravity—they may pass through solid surfaces without registering a collision. This issue is known as tunneling. Substepping addresses this by splitting each frame’s physics update… Continue reading Substepping: Reducing Character Tunneling
VR – Look to Select
The simplest and possibly most common is the Google Cardboard style of VR which is basically a phone put into a face mask. This kind of VR has no controller so people have to come up with creative solutions for allowing user input. The most common solution is “look to select” where if the user… Continue reading VR – Look to Select
EffectComposer
Used to implement post-processing effects in three.js. The class manages a chain of post-processing passes to produce the final visual result. Post-processing passes are executed in order of their addition/insertion. The last pass is automatically rendered to screen. Import EffectComposer is an add-on, and must be imported explicitly. See Installation / Addons. import { EffectComposer }… Continue reading EffectComposer
Advanced Character Animation with Three.js and Skeletal Rigging
Overview Three.js is a powerful JavaScript library for creating 3D graphics in the browser, and its capabilities extend to advanced character animation through skeletal rigging and inverse kinematics (IK). This article explores how to import and rig 3D character models from tools like Blender, leverage Three.js’s SkinnedMesh and AnimationMixer for complex animations, and implement inverse… Continue reading Advanced Character Animation with Three.js and Skeletal Rigging
LatheGeometry
Creates meshes with axial symmetry like vases. The lathe rotates around the Y axis. Code Example const points = []; for ( let i = 0; i < 10; i ++ ) { points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i – 5 ) * 2 ) ); }… Continue reading LatheGeometry
Real-Time Lighting and Shadow Optimization in Three.js
Lighting and shadows define mood, depth, and realism in 3D experiences, but they can also be performance bottlenecks—especially in WebXR and browser-based environments. Three.js provides multiple lighting techniques, ranging from baked lightmaps to real-time dynamic shadows. Balancing realism with performance is key to creating immersive yet smooth-running applications. By combining efficient shadow techniques, light probes,… Continue reading Real-Time Lighting and Shadow Optimization in Three.js
Attaching a Camera to a Character’s Head in Three.js for First-Person and Cinematic Views
In many interactive 3D applications, there’s a need for the camera to follow a specific point on a moving character — often the head. This technique allows for realistic first-person perspectives, dynamic over-the-shoulder shots, and immersive VR experiences without constantly recalculating the camera position in the render loop. A reliable way to achieve this in… Continue reading Attaching a Camera to a Character’s Head in Three.js for First-Person and Cinematic Views
VectorKeyframeTrack
A Track of vector keyframe values. Constructor VectorKeyframeTrack( name : String, times : Array, values : Array, interpolation : Constant ) name – (required) identifier for the KeyframeTrack. times – (required) array of keyframe times. values – values for the keyframes at the times specified, a flat array of vector components. interpolation – the type of interpolation to use. See Animation Constants for possible values. Default… Continue reading VectorKeyframeTrack