Description: In large-scale 3D experiences—such as virtual open worlds, learning platforms simulating geography, or nature-based games—handcrafting every detail becomes impractical. Procedural generation empowers developers to algorithmically create terrains, landscapes, and objects dynamically at runtime. By using height maps, noise functions, and GPU-accelerated techniques, Three.js can render complex, high-detail terrain with smooth performance, even in WebXR.… Continue reading Procedural World Generation and Terrain Rendering in Three.js
Tag: threejs
carto/api-client
carto/api-client JavaScript (and TypeScript) client library for CARTO APIs and framework-agnostic CARTO + deck.gl applications. Includes: Widget APIs … TBD Installation Install @carto/api-client: npm install –save @carto/api-client Documentation Fetching data Import vectorTableSource, vectorQuerySource, and other data source functions from the @carto/api-client package. These are drop-in replacements for the equivalent functions from the @deck.gl/carto package, and the same data source may be used with any number of layers… Continue reading carto/api-client
AnimationAction
AnimationActions schedule the performance of the animations which are stored in AnimationClips. Note: Most of AnimationAction’s methods can be chained. For an overview of the different elements of the three.js animation system see the “Animation System” article in the “Next Steps” section of the manual. Constructor AnimationAction( mixer : AnimationMixer, clip : AnimationClip, localRoot : Object3D ) mixer – the AnimationMixer that is… Continue reading AnimationAction
Proximity Fading Effects in ThreeJS
Overview Subtle visual cues can dramatically improve clarity in 3D interfaces. One elegant and efficient approach is to make objects fade in and out based on how close the player or camera is to them. The applyDistanceFade utility is a minimalist function that does exactly this — fading an object’s opacity based on proximity. Let’s… Continue reading Proximity Fading Effects in ThreeJS
Billboards
A CanvasTexture to make labels / badges on characters. Sometimes we’d like to make labels or other things that always face the camera. Three.js provides the Sprite and SpriteMaterial to make this happen. function makePerson(x, labelWidth, size, name, color) { const canvas = makeLabelCanvas(labelWidth, size, name); const texture = new THREE.CanvasTexture(canvas); // because our canvas is likely not a power of… Continue reading Billboards
Animation System
Within the three.js animation system you can animate various properties of your models: the bones of a skinned and rigged model, morph targets, different material properties (colors, opacity, booleans), visibility and transforms. The animated properties can be faded in, faded out, crossfaded and warped. The weight and time scales of different simultaneous animations on the… Continue reading Animation System
GPU-Driven Particle Systems and Visual Effects in Three.js
Description: In immersive WebXR experiences like simulations, sci-fi learning environments, or natural ecosystems, visual feedback plays a major role. Particle systems—used for effects like fire, smoke, dust, magic, electricity, or even swarm behaviors—can become performance bottlenecks if CPU-bound. Three.js, combined with GPU-based computations, enables real-time visual effects by offloading heavy tasks to the GPU using… Continue reading GPU-Driven Particle Systems and Visual Effects in Three.js
Animated Emission Effects with Procedural Noise in GLSL
Emissive materials are commonly used in real-time graphics to simulate glowing surfaces — whether it’s a flickering sci-fi interface, a magical rune, or an energy pulse moving through a forcefield. These materials not only enhance visual appeal but also serve functional purposes, like drawing the viewer’s attention or indicating interactivity. This article outlines how to… Continue reading Animated Emission Effects with Procedural Noise in GLSL
Fragment Nodes
Essentially, a node is a placeholder for a unit of GPU computation, a representation of anything from a basic arithmetic operation, a lighting algorithm, a struct, a line of code, a shader, or a series of post-process passes. The specifics of how any given node works aren’t really important to understand. Nonetheless, they are the… Continue reading Fragment Nodes
Drawing Lines
Let’s say you want to draw a line or a circle, not a wireframe Mesh. First we need to set up the renderer, scene and camera (see the Creating a scene page). Here is the code that we will use: const renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); const camera = new… Continue reading Drawing Lines