Best of threejs — July 2025

1. 1
   Video

   Wawa Sensei·41w

   How to Create a Minimap in Three.js with React Three Fiber (Drei View)

   Learn to create an interactive minimap for 3D web games using React Three Fiber's View component. The tutorial covers setting up multiple camera views within a single canvas, implementing global state management with Valtio to sync character position between main scene and minimap, and adding visual elements like character indicators and zoom controls. The minimap displays a top-down view that follows the player character with optional rotation alignment.

   106
2. 2
   Article

   Codrops·38w

   Interactive Text Destruction with Three.js, WebGPU, and TSL

   A comprehensive tutorial demonstrating how to create an interactive 3D text destruction effect using Three.js with WebGPU renderer and Three Shader Language (TSL). The tutorial covers setting up TextGeometry, implementing GPU compute shaders for vertex deformation, adding spring physics for realistic animation, and enhancing the visual effect with noise, rotation, emissive colors, and post-processing effects including ambient occlusion, bloom, and fog.

   14
3. 3
   Article

   Codrops·40w

   Three.js Instances: Rendering Multiple Objects Simultaneously

   Instancing is a WebGL performance optimization technique that allows rendering thousands of 3D objects efficiently by batching them into a single draw call. The article demonstrates how to implement instancing in React Three Fiber using drei's Instances component, create multiple instance sets, work with custom shaders and instanceMatrix attributes, and build complex scenes like forests with minimal GPU draw calls.

   12