#threejs

Spreading Liquid with Three.js

We create beautiful expressions through programming and deliver the best possible experiences.

How to Build Disaster Simulations on a Real Map: Animated Canvas Layers and Collapsing 3D Buildings with Mapbox GL JS and Three.js

Bối cảnh: Các dự án map thường cần vượt qua việc chỉ hiển thị markers và polygons để tạo ra các hiệu ứng động như nước dâng lên đường, khói theo gió, sóng xung kích lan tỏa. Nguyên nhân kỹ thuật: Giải pháp này kết hợp Mapbox GL JS với Three.js để tạo các lớp canvas animation và hiệu ứng 3D sụp đổ tòa nhà. Hệ quả: Kết quả cho phép xây dựng các mô phỏng thảm họa trên bản đồ thực tế với hiệu ứng hình ảnh chân thực. Điều đáng học: Bài viết cung cấp hướng dẫn cụ thể triển khai lớp animation chồng lên map 3D và tạo hiệu ứng sụp đổ tòa nhà sử dụng WebGL rendering pipeline.

Bài viết này giúp bạn tạo dựng mô phỏng thảm họa sống động trên bản đồ thực tế bằng cách kết hợp Mapbox GL JS và Three.js.

My Son Loves Squishies, So I Built Him One for the Browser

Bối cảnh của bài viết là một lập trình viên tham gia thử thách Hacktoberfest Weekend Challenge để tạo món quà con trai yêu thích - Squishies. Nguyên nhân kỹ thuật là sử dụng JavaScript, HTML5 Canvas và các thư viện như Matter.js để xây dựng phiên bản Squishies trực tuyến. Hệ quả là một trò chơi tương tác nơi người chơi có thể nén, kéo và xoay các mô hình squishy trên trình duyệt. Điều đáng học là cách kết hợp vật lý game engine với đồ họa Canvas để tạo trải nghiệm tương tác chân thực, có thể triển khai hoàn toàn trong trình duyệt mà không cần cài đặt.

Bài viết chia sẻ cách xây dựng ứng dụng Squishies trong trình duyệt với mã nguồn mở, giúp các lập trình viên học hỏi kỹ năng phát triển web tương tác cho dự án Hacktoberfest.

The Architecture Behind Trionn: Coordinating GSAP, Three.js, Lenis, and Web Audio

Bài viết hé lộ cách tích hợp đồng bộ các thư viện GSAP, Three.js, Lenis và Web Audio để tạo nên trải nghiệm web mượt mà. Kiến trúc hệ thống được thiết kế nhằm thống nhất nhiều lớp animation, rendering và tương tác.

Những lập trình viên muốn tối ưu hóa hiệu suất và quản lý các lớp hoạt hình, render và tương tác phức tạp trên web sẽ tìm hiểu cách Trionn kết hợp GSAP, Three.js, Lenis và Web Audio thành một hệ thống hoạt động nhẹ nhàng và đồng bộ.

Three.js – JavaScript 3D Library

Three.js is a JavaScript 3D library that offers a range of resources, community support, and code examples.

28 Best Browser Games to Play in 2026 (Free, No Download)

The 28 best browser games in 2026, each checked at its official site: multiplayer shooters, games to play with friends, daily puzzles, idle games and 3D racers.

I built a 3D game about my Nigerian childhood (and I'm not a game developer)

If you grew up in Nigeria, there is one sentence that can stop your heart in the middle of... Tagged with gamedev, webdev, ai, showdev.

Introducing Three-Live: turning AI-generated Three.js into interactive 3D, AR, and WebXR across web and mobile

Meet Three-Live: an Apache 2.0 library and on-device Rust/Boa compiler turning AI-generated Three.js code into glTF 2.0, USDZ, and WebXR in ≤ 50 KB.

It’s 7:55 AM at Gidan Kwano: How I Built “FUTMINNA Dash 3D” in a Single HTML File

How I built FUTMINNA Dash 3D, a single-file 3D browser game using Three.js, Cannon.js, and the Web Audio API inspired by Nigerian campus life

Classic board games in 3D, about 1,000 lines of JavaScript

Classic board games in 3D, about 1,000 lines of JavaScript Chess, checkers and Connect Four, each with a 3D board, running in the browser as one installable web app. No build step, no server code — …

Battle Drones—a vibe coded RTS with audio-based multiplayer

Battle Drones là một game RTS trình duyệt lấy cảm hứng từ Command & Conquer, được Simon Willison phát triển bằng Claude Code qua 12 phiên bản và 321 commit. Game hỗ trợ cả mobile và desktop, sử dụng three.js để render 3D models, và có chế độ battle giữa các LLM agent. Điểm độc đáo là tính multiplayer đồng bộ qua âm thanh giữa hai thiết bị gần nhau. Simon hầu như không tự xem lại TypeScript code mà dùng prompt "Make it a LOT more fun" để cải thiện tỉ lệ game undecided từ 14% xuống 0.9% sau 1,200 trận đấu AI-vs-AI.

Battle Drones minh họa cách AI có thể tạo ra một game RTS hoàn chỉnh chỉ với một prompt quan trọng từ lập trình viên.

Make Colors More Natural with This Photoshop 3D Color Picker

Croma Space from ColgArt is a Photoshop panel with a real-time 3D viewport for previewing colors on 3D elements before applying them.

Look at This Jiggly Jelly Dessert Made with Three.js

Misha Kiiatkin, also known as mesq, shared his stylized jelly dessert piece made with Three.js.

The Almirah: a 7B local vision model and 3D cabinet that keeps my friend's family papers off the cloud

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend What I... Tagged with devchallenge, weekendchallenge, hf26challenge, opensource.

Seriously Impressive Real-Time Water Caustics That Run In Your Browser

Công nghệ water caustics real-time này có sẵn hai phiên bản Lite và Full trên nền tảng open-source. Hệ thống sử dụng WebGL và GPU compute shaders để tính toán ánh sáng phản chiếu dưới nước với hiệu suất cao. Trên GPU NVIDIA RTX 3080, bản Full đạt tốc độ 60 FPS trong khi bản Lite duy trì 120 FPS. Điều đáng học hỏi là cách tác giả tối ưu hóa việc kết hợp giữa vertex shader và fragment shader để tạo hiệu ứng ánh sáng chân thực mà vẫn giữ được độ mượt mà ngay trên trình duyệt web.

Bài viết cung cấp giải pháp thực hiện hiệu ứng quang học nước ấn tượng ngay trên trình duyệt với phiên bản mã nguồn mở dễ tiếp cận.

I Turned DEV.to Into a Walkable 3D Library — Debugging It Has Been a Nightmare

Đây là dự án biến DEV.to thành thư viện 3D có thể đi bộ trong không gian first-person, sử dụng công nghệ Next.js. Tác giả đã phải đối mặt với những thách thức debugging phức tạp khi xử lý hiệu năng rendering trong môi trường 3D. Dự án này cho thấy tiềm năng của việc áp dụng công nghệ đồ họa 3D vào các nền tảng cộng đồng truyền thống. Có thể học hỏi kinh nghiệm xử lý performance optimization khi kết hợp web development với đồ họa 3D thực tế.

Đọc bài này để khám phá cách xây dựng một thư viện 3D từ DEV.to và trải nghiệm thử thách khi gỡ lỗi dự án táo bạo này.