Best of threejs — June 2025

  1. 1
    Article
    Avatar of codropsCodrops·43w

    Coding a 3D Audio Visualizer with Three.js, GSAP & Web Audio API

    A comprehensive guide to building an interactive 3D audio visualizer that combines Three.js for 3D rendering, Web Audio API for real-time sound analysis, and GSAP for smooth animations and draggable UI elements. The tutorial covers creating custom GLSL shaders for audio-reactive effects, implementing frequency analysis to drive visual distortions, and building a sci-fi interface with momentum-based interactions. The result is a glowing orb that pulses and morphs in sync with music while users can drag control panels around the screen.

  2. 2
    Article
    Avatar of 80lv80 LEVEL·43w

    Beautiful Liquid Glass Effect Made with Three.js

    Web developer Faraz Shaikh created a liquid glass effect using Three.js JavaScript 3D library. The effect features smooth drop-like shapes using MeshPhysicalMaterial with ray-marched surfaces built from Signed Distance Fields (SDFs). The demo and source code are available online, showcasing advanced 3D rendering techniques for creating realistic glass materials in web browsers.

  3. 3
    Video
    Avatar of wawasenseiWawa Sensei·43w

    Real-Time Lipsync for Web: Build AI Chatbots & Games with Wawa-Lipsync (Free & Open-Source!)

    Wawa-Lipsync is a new open-source JavaScript library that enables real-time lip synchronization for web applications. Unlike existing solutions that are either expensive or slow, this library analyzes audio frequencies in real-time to generate visemes (visual representations of phonemes) that can animate 2D or 3D characters. The library works by using the browser's analyzer node to detect audio patterns and deduce mouth movements, making it suitable for AI chatbots, games, and interactive web experiences without server-side processing delays.

  4. 4
    Article
    Avatar of codropsCodrops·45w

    Building a Real-Time Dithering Shader

    A detailed walkthrough of creating a real-time dithering shader using GLSL and WebGL. The implementation uses a 4x4 Bayer matrix for ordered dithering, supports optional pixelation and grayscale modes, and integrates with the postprocessing library as a composable effect. The shader transforms smooth gradients into stylized pixel patterns reminiscent of 8-bit graphics, offering customizable parameters like grid size and pixel ratio for retro visual effects in modern web applications.

See all threejs archives