Katana 3D Engine
A modular, extensible Three.js + React framework for building rich 3D web experiences without the boilerplate.
Project Overview
Three.js is insanely powerful. But as projects grow? Things get messy real fast. Scattered logic, repetitive setup, interaction systems that make you want to cry... yeah, been there. So I built Katana Engine — a production-ready 3D framework that gives you the creative freedom of Three.js with a clean, structured workflow inspired by modern game engines. It handles lifecycle management, modular features, raycasting, camera controls, asset loading, and React UI integration out of the box. The included demo (an interactive katana room with clickable objects, animated parts, and live shader effects) shows exactly what's possible. It's open source, MIT licensed, and free forever. Go build something cool.
Gallery
Key Features
- 1
Game Engine Workflow, On The Web
Engine lifecycle, module registration, centralized update loop, scene orchestration — all the good stuff from modern game engines, now running in your browser. No more spaghetti code.
- 2
React + 3D, Best Friends Forever
Use React as your actual application layer connected to the 3D world. HUDs, product selectors, settings panels, runtime editors — your UI stays modular, fully customizable, and completely in control.
- 3
Plug & Play Modules
Need interaction? Add the Interaction Module. Orbit controls? Orbit Module. Selection highlighting, post-processing, auto-rotate, stats? Yep, yep, yep and yep. Each module can be added, removed, or extended independently. Build exactly what you need, nothing more.
- 4
Interactivity
A built-in interaction system that handles hover/leave states, select/deselect actions, raycasting, and object-specific behaviors. Click a door? It opens. Hover over a katana? It glows. Add gameplay-style mechanics without fighting the framework.
- 5
Scalable Project Structure (That Actually Scales)
Reusable systems, centralized managers, a project layout that doesn't fall apart when you hit 10,000 lines. Built for real-world growth — whether it's a portfolio or a full-blown product configurator.
- 6
Live Tweak Panel (Because Why Not)
Optional React-powered tooling system with sliders, color pickers, floating windows, and live tweaking panels. Perfect for product configurators, demos, debugging, or just messing around until it looks right.
Interested in working together?
I'm always open to discussing new projects, creative ideas, or opportunities to be part of your vision.
Get in Touch