Open Source · EdTech · Next.js 15

ScienceLab 3D: Building 40+ Interactive 3D Science Experiments with Next.js 15 and React Three Fiber

A deep dive into architecting a free, open-source STEM education platform — from tech stack decisions to experiment design, performance engineering, and open-source release.

12 min read  ·  View on GitHub  ·  Live Demo

Introduction: Why Another Science Simulator?

If you have ever tried to explain quantum tunneling with a whiteboard sketch, or asked a student to imagine a DNA double helix from a printed diagram, you already know the problem. STEM education is fundamentally spatial — it lives in three dimensions — but almost every learning tool forces it onto a flat page or a low-resolution video frame.

I am Rudra Sarker, a third-year Industrial and Production Engineering student at Shahjalal University of Science and Technology (SUST), Sylhet, Bangladesh. My engineering journey spans robotics, IoT, web development, and assistive technology, and it has taught me one recurring lesson: the gap between understanding something intellectually and understanding it intuitively is often just one good visualization away.

ScienceLab 3D is my attempt to close that gap for every student on the planet — for free, in a web browser, with no installation and no account required. The project is fully open source on GitHub at github.com/rudra496/sciencelab3d and live at sciencelab-two.vercel.app.

What makes this project different from the many science simulators that already exist? Three things: modern production-grade tech stack (Next.js 15 + React 19 + TypeScript), genuine depth of experiment coverage (40+ simulations across four STEM disciplines at multiple difficulty levels), and an obsessive focus on performance on the low-end Android devices that most students in South Asia actually own.

The Tech Stack — Every Choice Explained

Before writing a single line of code, I spent several days evaluating the technology stack. The choices I made shaped everything — from development speed to final bundle size to the quality of the 3D visuals. Here is every decision and the reasoning behind it.

Next.js 15 with the App Router

I chose Next.js 15 over plain React for two reasons: the App Router's nested layout system allows me to share the experiment shell (header, sidebar, controls panel) across all 40+ experiment routes with zero duplication, and the built-in image optimisation and font subsetting give measurable improvements to Largest Contentful Paint without any manual configuration. Next.js 15 also ships with React 19 support out of the box, unlocking the new concurrent features described below.

React 19 and Concurrent Rendering

React 19's concurrent rendering is not just a marketing headline — for this project it has tangible benefits. The 3D canvas is computationally expensive. With concurrent rendering, React can schedule state updates (slider values, camera positions, simulation parameters) at lower priority than the animation loop, preventing UI jank when the user rapidly adjusts controls. The new useOptimistic hook also makes the "favorites" feature (bookmarking experiments) feel instant without any loading state.

TypeScript Throughout

Every file in the codebase is TypeScript. For a project with 40+ separate experiment modules, each with their own parameter schemas and simulation state, type safety is not optional — it is essential. TypeScript caught dozens of subtle bugs during development, including a particularly nasty one where a physics simulation was receiving angle values in degrees when it expected radians. The type definitions for Three.js (via @types/three) are exceptionally comprehensive and make working with 3D geometry feel safe and self-documenting.

Three.js via React Three Fiber

I use React Three Fiber (R3F) as the React renderer for Three.js rather than calling the Three.js API imperatively. R3F maps Three.js's scene-graph objects to JSX components, which means a scene that would have required 40 lines of imperative Three.js code becomes 10 lines of declarative JSX. It also integrates cleanly with React's reconciler, so Three.js objects are created, updated, and disposed in sync with the React component lifecycle — a major improvement over manually managing GPU resource cleanup.

The Drei library (R3F's companion utility library) provides ready-made components for common 3D patterns: OrbitControls, Html overlays anchored to 3D positions, environment maps, instanced meshes, and more. Using Drei reduced boilerplate in each experiment module by roughly 40%.

Framer Motion for UI Animations

The non-3D parts of the interface — the experiment grid, the sidebar, the control panels — use Framer Motion for animations. Page transitions, staggered card reveal animations, and the experiment selection drawer all use Framer Motion's AnimatePresence and spring physics. The combination of smooth UI transitions and 60fps 3D scenes gives the platform a polished, app-like feel that distinguishes it from the utilitarian aesthetic of most educational simulations.

Tailwind CSS

Tailwind CSS keeps the styling co-located with the components that use it, which matters enormously in a project with 40+ experiment pages. Every experiment has a slightly different colour scheme and layout; with Tailwind, customising a single experiment's appearance is a matter of changing class names in that experiment's file rather than hunting through a global stylesheet. Tailwind's JIT compiler also ensures the final CSS bundle contains only the classes actually used — resulting in a stylesheet of just a few kilobytes.

Vercel Deployment

The platform is deployed on Vercel, which provides automatic preview deployments on every pull request, edge caching for static assets, and zero-config HTTPS. Vercel's edge network means the platform loads quickly from Dhaka, Mumbai, Jakarta, and Lagos — all regions where students without fast internet connections are likely to access it.

Tech Stack Summary
  • Framework: Next.js 15 (App Router) + React 19
  • Language: TypeScript 5
  • 3D Engine: Three.js via React Three Fiber + Drei
  • Animations: Framer Motion
  • Styling: Tailwind CSS
  • Icons: Lucide React
  • Deployment: Vercel
  • License: MIT (fully open source)

Application Architecture

The application follows a feature-based directory structure inside Next.js's src/app directory. Each of the four science disciplines (Physics, Chemistry, Biology, Mathematics) has its own route segment, and each experiment lives inside its discipline's segment as a dynamic route.

The core architectural pattern is a shared experiment shell: every experiment page renders inside a layout component that provides the persistent sidebar (experiment browser), the top bar (search, favorites, theme toggle), and the control panel drawer (sliders, buttons, readouts specific to the current experiment). The experiment itself only needs to export three things: a React Three Fiber scene component, a parameter definition object (which drives the control panel UI automatically), and metadata (title, description, difficulty, tags).

This convention-over-configuration approach makes adding a new experiment fast. I can scaffold a complete new experiment — 3D scene, controls, metadata — in roughly two hours. The system automatically registers it in the experiment browser, generates its route, and includes it in the search index.

State management is intentionally minimal. Each experiment's simulation state lives in a local useReducer hook. Globally shared state (theme, favorites list) lives in a React Context backed by localStorage for persistence. There is no Redux, no Zustand, no external state library — the built-in React primitives are sufficient for this use case and keep the bundle lean.

The Experiment Library: 40+ Simulations Across 4 Disciplines

ScienceLab 3D currently ships with over 40 interactive experiments, organized into four disciplines at three difficulty levels (Beginner, Intermediate, Advanced). Every experiment is self-contained, runnable in isolation, and designed to reinforce a specific concept from the standard secondary or early tertiary science curriculum.

⚛️ Physics (10 Experiments)

The physics module covers mechanics, waves, optics, and electromagnetism. Standout experiments include the Double-Slit Experiment (Advanced), which visualises quantum wave-particle duality through an animated interference pattern that updates in real time as slit separation and wavelength are adjusted; and Gravitational Orbits (Intermediate), a full N-body simulation where students can place planets of arbitrary mass and watch the emergent orbital dynamics. The Simple Pendulum (Beginner) uses a fourth-order Runge-Kutta integrator for accurate period behaviour at large amplitudes — a detail that matters for students who are explicitly studying the departure from simple harmonic motion.

🧪 Chemistry (10 Experiments)

The chemistry module spans atomic structure, chemical bonding, thermodynamics, and reactions. The Crystal Lattice Structures experiment (Intermediate) renders the full unit cells of common crystal systems (cubic, hexagonal, orthorhombic) with interactive atom labelling — something genuinely difficult to convey on a 2D diagram. Acid-Base Titration (Intermediate) simulates the indicator colour change and plots the titration curve in real time as the student adds virtual titrant. The Periodic Table Trends experiment (Beginner) lets students sweep across periods and groups while watching atomic radius, ionisation energy, and electronegativity values animate on a live chart.

🧬 Biology (10 Experiments)

The biology module is the most visually demanding section of the platform, featuring fully modelled 3D cell organelles, animated DNA replication, and an ecosystem food-web simulation. The DNA Replication experiment (Advanced) shows the double helix unwinding base by base, with each complementary base pair snapping into place as the replication fork progresses — animated at a speed and zoom level the student controls. The Immune System Response experiment (Advanced) visualises antibody-antigen binding in 3D, with cartoon-style surface proteins that make the lock-and-key model immediately intuitive. The Ecosystem Food Web (Beginner) is an interactive node-graph simulation where students can add or remove species and observe the cascade effects on population dynamics.

📐 Mathematics (10 Experiments)

The mathematics module is the most algorithmically complex. The Fourier Transform Visualizer (Advanced) draws any user-sketched waveform and decomposes it into rotating Fourier circles in real time — a visual proof of the decomposition theorem that consistently generates the strongest reactions from students. The Mandelbrot Fractal (Intermediate) renders the fractal on the GPU using a custom GLSL fragment shader, allowing deep zooms that run at full frame rate. The Topology & Surfaces experiment (Advanced) renders a Möbius strip, Klein bottle, and torus, each with interactive cross-section cuts that reveal the surface's non-orientable properties.

UX & Accessibility Design

Good science education requires that the interface gets out of the way of the learning. Every UX decision in ScienceLab 3D is subordinate to one principle: minimise the steps between "student opens the site" and "student has an aha moment."

The experiment browser on the home screen shows all 40+ experiments as a filterable, searchable grid of cards. Each card shows the experiment title, discipline, difficulty badge, and a static preview image. The smart search indexes experiment names, topics, concepts, and difficulty — a student who searches "pendulum period" finds the Simple Pendulum immediately even though the word "period" does not appear in the experiment's title.

The dark/light theme toggle is persistent across sessions and respects the user's OS-level preference on first visit. The 3D renderer is colour-calibrated for both themes — atoms, bonds, and labels are legible whether the background is near-black or near-white.

Accessibility is a non-negotiable constraint. Every 3D canvas element has an aria-label describing the current scene state. All interactive controls are keyboard-navigable: arrow keys rotate the orbit camera, plus/minus keys step through simulation parameter values, and Tab moves focus through the control panel in logical order. For users who rely on screen readers, a live region announces changes to key simulation outputs (e.g., "Period: 2.1 seconds") as they update.

Performance Engineering

Performance is the most unglamorous part of building a 3D web application — and the most important. A simulation that stutters at 15 frames per second is not just unpleasant; it is actively confusing for a student trying to observe a physical phenomenon. Here are the specific techniques that brought ScienceLab 3D to a consistent 55–60fps on mid-range 2020 Android hardware.

Dynamic Import and Code Splitting

Each experiment's 3D scene is loaded only when the student navigates to that experiment. Next.js's dynamic() import with ssr: false ensures Three.js is not bundled into the initial page load at all. The home screen — the experiment grid — loads in under one second on a standard 4G connection. The 3D engine loads only when needed, and each experiment's specific assets load only when that experiment is opened.

Instanced Meshes and GPU Batching

Experiments with many identical 3D objects (atom spheres in a molecular viewer, stars in a gravitational simulation, neurons in the synapse model) use Three.js's InstancedMesh to batch all instances into a single draw call. This is the single biggest performance win in the entire codebase — reducing per-frame draw calls from hundreds to single digits for several experiments.

Animation Loop Management

The R3F render loop runs only when the 3D canvas is visible. An Intersection Observer pauses the loop when the user scrolls the canvas out of view and resumes it instantly when it comes back. This eliminates the background CPU and GPU drain of invisible canvases — critical on mobile devices where thermal throttling is a real concern during extended study sessions.

Pixel Ratio Capping and Resolution Scaling

High-DPI displays are beautiful but punishing for the GPU. On a 3× retina phone, rendering at native pixel ratio means the GPU must process 9× as many pixels as at 1× resolution. ScienceLab 3D caps the renderer pixel ratio at Math.min(devicePixelRatio, 2) — visually indistinguishable from native at normal viewing distance, but with a 44% reduction in GPU workload on 3× devices.

Asset Optimisation

Geometric assets are authored as compact glTF/GLB files with Draco mesh compression where the polygon count justifies it. Textures are converted to WebP and served through Vercel's edge CDN. The next/image component handles responsive image sizing automatically — the experiment grid thumbnails are served at the exact pixel dimensions the browser needs, not as large originals scaled down in CSS.

Open Source & Contributing

ScienceLab 3D is released under the MIT License, which means anyone can use, modify, and redistribute it for any purpose. The full source code is on GitHub at github.com/rudra496/sciencelab3d.

I believe the open-source nature of the project is part of its educational mission. Students who want to understand how a pendulum simulation works can read the actual code. Teachers who want to customise an experiment for their curriculum can fork the repository. Developers who want to contribute new simulations can open a pull request — the CONTRIBUTING.md guide explains the process in detail.

Getting started locally takes three commands: 

git clone https://github.com/rudra496/sciencelab3d.git
cd sciencelab3d
npm install && npm run dev

Then open http://localhost:3000 in your browser. No environment variables, no external services, no paid accounts. The entire platform runs completely locally for development.

If you want to add a new experiment, the process is:

  1. Create a new directory inside the appropriate discipline folder (src/experiments/physics/, etc.).
  2. Export a React Three Fiber scene component, a parameter schema object, and an experiment metadata object.
  3. The platform's automatic registration system picks up the new experiment and adds it to the browser, search, and routing — no configuration file to edit.
  4. Submit a pull request with the new experiment and a brief description of the scientific concept it covers.

Lessons Learned

Building ScienceLab 3D across many weeks of development produced lessons that no course or tutorial could have given me.

Scientific Accuracy Is a Product Requirement

Early versions of the pendulum simulation used Euler integration, which accumulates energy error over time — the pendulum gradually swings to a larger amplitude than physically correct. A physics student immediately notices this and loses trust in the entire platform. Switching to RK4 took an afternoon, but the credibility gain was permanent. Every simulation should be reviewed by someone with domain expertise before it is published.

The Right Abstraction for 3D

Starting with raw Three.js and migrating to React Three Fiber midway through development taught me the value of the right abstraction. Imperative Three.js code is powerful but verbose; object lifecycle management is manual and error-prone. R3F's declarative model lets me focus on what the scene should contain rather than how to construct it. For any new 3D web project, I would start with R3F from day one.

Mobile-First Is Not Optional for Global EdTech

In Bangladesh and across South and Southeast Asia, the primary internet device for most students is a mid-range Android phone, not a laptop. Designing for desktop first and then "optimising for mobile later" is a path to a product that fails the students who most need it. Every performance decision, every layout choice, every interaction pattern was evaluated first on a budget 2020 Android device.

Open Source Improves Quality

Within days of making the repository public, contributors caught a unit inconsistency in the Ohm's Law simulation and a label placement bug in the animal cell model. Code that is visible to the world is code that gets fixed faster. The accountability of public code is a feature.

What's Next

ScienceLab 3D's current release is a foundation. Here is where it is going:

  • More experiments: 15+ new simulations planned — optics (ray tracing, lens refraction), thermodynamics (Carnot cycle), and advanced mathematics (complex analysis, differential equations).
  • Multilingual support: Bengali and Hindi interfaces to serve students in Bangladesh and India in their native languages. Contributions from native speakers are especially welcome.
  • PWA / offline mode: A service worker cache so the platform works without internet after the first visit — essential for schools in areas with unreliable connectivity.
  • Teacher dashboard: Assignment creation, progress tracking, and curriculum alignment features to make ScienceLab 3D viable as an institutional tool rather than just an individual study resource.
  • WebXR / VR support: Three.js has first-class WebXR support. With an affordable VR headset, students could explore a fully immersive science lab — the architecture is already compatible.
  • Collaborative mode: WebSocket-based real-time sharing so a teacher and class can interact with the same simulation simultaneously, turning the platform into a live classroom tool.

If you are a developer, educator, student, or institution interested in contributing, collaborating, or simply using ScienceLab 3D — please reach out. The platform is built on the belief that every student deserves a world-class science education regardless of where they live, what their school can afford, or what device they own.

🚀 Try ScienceLab 3D Live View Source on GitHub

Related Posts

Connect With Me

Follow my work and reach out across platforms:

Back to Blog