Best of 3D — July 2025

1. 1
   Video

   Wawa Sensei·46w

   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

   Product Hunt·43w

   Nitrode – AI Game Engine: AI Game Engine to Prototype 3D Games in a Day

   Nitrode is an AI-powered game engine designed to help developers rapidly create playable 3D games within hours rather than weeks or months. The platform enables 'vibe coding' for quick prototyping, targeting developers who want to build games they've envisioned but lacked the time or resources to develop using traditional methods.

   58

   2
3. 3
   Article

   Atomic Spin·45w

   Build a 3D Product Configurator with Babylon.js

   A comprehensive guide to building interactive 3D product configurators using Babylon.js, covering the complete workflow from creating 3D models in Blender to implementing custom viewers with TypeScript. The tutorial demonstrates converting SVG logos to 3D models, optimizing bundle sizes, and building beyond basic model viewers to create full product configuration tools with rotation, customization, and interactive features.

   18
4. 4
   Article

   Codrops·44w

   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
5. 5
   Article

   Codrops·45w

   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
6. 6
   Article

   80 LEVEL·47w

   Blender Animation That Came from Dream

   Artist Yusuf Kamal created a surreal Blender animation inspired by his childhood dreams, featuring trains emerging unexpectedly from multiplying railway tracks. The animation uses vintage styling with low bit rate effects and anxiety-inducing camera movements to recreate the nightmarish quality of the original dream experience.

   10