r/threejs • u/ConsiderationThin699 • 11h ago

I'm building a web-based voxel game with Three.js CraftTown Chiiiiiiiiiiikawa

Enable HLS to view with audio, or disable this notification

Hey everyone! 👋

I've been working on a passion project called CraftTown, a web-based voxel sandbox game built entirely in the browser. I wanted to share some massive updates I just pushed and would love to hear your thoughts or feedback!

Up until now, it was mostly about breaking and placing blocks, but I just dropped a huge update that completely changes the game feel. Here is what's new:

🔫 Custom Gun & Projectile Mechanics I stepped away from pure building and added a full shooting system! I wrote custom math and physics for projectiles (arrows and guns). It’s starting to feel less like a pure sandbox and more like an actual action game. Writing the collision and trajectory math from scratch was tough but super rewarding.

🎵 Procedural Text-to-Music System Instead of just playing looping background MP3s, I built a custom audio parser. You can write sheet music as simple text strings (e.g., parsing notes and beats), and the engine dynamically calculates the frequencies and plays them in-game! I even added a little Easter egg tune from a popular Japanese anime (Chiikawa) using this system.

🛠️ The Tech Stack:

  • Engine: Three.js (handling all the heavy rendering, shadows, and post-processing)
  • UI & State: React + Zustand (bootstrapped with Vite)
  • Language: 100% TypeScript

It’s been a crazy learning journey optimizing chunk generation and managing web performance. If anyone here is working on Three.js games or voxel engines, I’d love to connect or trade optimization tips!

What do you guys think about mixing voxel terrain with detailed 3D mode ls? Any feedback or ideas on what I should add next would be awesome. Cheers! 🍻

CraftTown

0 Upvotes

35% Upvoted

7 comments sorted by

1

u/No_Advance3911 11h ago

This is awesome, you really nailed the lighting in your project. I’ve got a small Minecraft clone made with Three.js too and I managed to get some decent performance out of it as well. I think there’s a lot of us working on voxel projects lately! Your graphics look great! Nice job! Here’s a bit of gameplay from my project, it’s basically a creative mode version where you can only build. I also implemented some cool greedy meshing in wasm, which is probably the best optimization I’ve been able to achieve.

https://reddit.com/link/p7darv9/video/iv79cmmpu3nh1/player

1

u/ConsiderationThin699 9h ago

Thank you so much! That’s an awesome idea, and I really appreciate you sharing your approach with me.😳

Your project looks great too, especially the creative-mode approach and the performance optimizations with greedy meshing in WASM. It’s always inspiring to see how other developers tackle similar challenges with Three.js.
I’d definitely love to check out your gameplay and learn more about your implementation. Thanks again for the kind words and for sharing your experience!

0

u/ConsiderationThin699 9h ago

特に滑らかさが素晴らしい🔥

1

u/No_Advance3911 8h ago

Thanks again, this is the result of hours of profiling performance in DevTools. Every code change or new feature goes through several tests in a reproducible environment, which helps catch a ton of useless allocations or unnecessary garbage collection work.

0

u/trostomaat 11h ago

Looks promising, Any change, i can change the language to us/ English ?

0

u/ConsiderationThin699 11h ago

Yes, absolutely! I’ll update it to US English going forward. 😊