I built a 3D Physics Engine for the Browser because textbooks are too flat 💎

#showdev #webdev #nextjs #threejs

Let’s be honest: trying to understand Solid State Physics from a 2D textbook is a nightmare.

I’m currently finishing my M.Sc. in Physics, and like many students, I spent hours squinting at diagrams of "Brillouin Zones" and "Reciprocal Space." These are complex, 3D mathematical shapes that define how electrons move in a crystal. On paper, they look like a mess of overlapping lines. In reality, they are beautiful, symmetric architectures.

I decided that if I couldn't find a way to see them clearly, I’d build one.

That’s how SolidState3D was born.

The Stack
I wanted the tool to be accessible to anyone with a browser—no heavy software installs or Python environments required.

Framework: Next.js (App Router)

3D Rendering: React Three Fiber / Three.js

Styling: Tailwind CSS

The "Brain": Custom geometric logic to calculate vertices for the 14 Bravais Lattices and their corresponding Brillouin Zones.

The Biggest Challenge: The "Reciprocal Flip"
The hardest part wasn't the UI; it was the math. In crystallography, the "Reciprocal" of a Body-Centered Cubic (BCC) lattice is actually a Face-Centered Cubic (FCC) shape.

To render the First Brillouin Zone, I had to calculate the Wigner-Seitz cell of the reciprocal lattice. This involved:

Generating high-symmetry points (Γ,H,N,P).

Using ConvexGeometry to wrap a mesh around those calculated vertices.

Ensuring everything scales dynamically when a user changes the lattice constant.

What’s inside?
Beyond just looking at atoms, I wanted to build a professional toolkit:

Miller Index Visualizer: You type in (hkl), and it slices the crystal in real-time.

CIF Viewer: You can drop a .cif file into the browser and it renders the structure instantly.

Crystal-AI: I integrated a chat interface to help users identify materials and understand the underlying physics.

Why I'm sharing this
I built this under the supervision of my professor, Arpon Chakraborty, at Gopalganj Science and Technology University. It started as a thesis project, but I realized it could help anyone studying Material Science or Physics.

I’d love for the Dev.to community to take a look. How’s the performance? Is the Three.js implementation smooth on your devices?

Check it out here: solidstate3d.com

I’m looking forward to your feedback (and your favorite crystal structures)!