使用 Next.js 14、Three.js 和即時物理運算構建 WebGL 3D 工程模擬器

Building a Luxury 3D Engineering Simulator in WebGL: Next.js 14, Three.js, and Real-Time Physics

If you have ever taken a college-level mechanical engineering or physics course, you are intimately familiar with this pain:

You are studying Euler–Bernoulli beam flexure, Fourier thermal conduction networks, or crystalline slip planes, and your only visual aids are either:

Static 2D textbook cross-sections with cryptic arrows from the 1980s.
Clunky, gray Java applets or MATLAB scripts that feel like Windows 95.

Governing equations in physics describe continuous spatial fields: curvatures, thermal gradients, atomic packing, and fracture energies. Staring at static formulas like:

$$\delta_{max} = \frac{P L^3}{48 E I} \quad \text{or} \quad r_{crit} = \frac{k}{h}$$

often fails to convey the physical intuition behind how structures respond when physical constraints change.

I wanted to fix that. I built Mecha Atelier: a luxury visualization studio for mechanical engineering where governing equations become instruments you can touch, tweak, and see in real-time WebGL.

Here is a full technical breakdown of how it works under the hood, how we deform 3D meshes along mathematical curves at 60 FPS, and how we tackled state synchronization and WebGL search engine visibility.

🛠️ The Tech Stack

Framework: Next.js 14.2 (App Router, Server Components & Edge Runtime)
Language: TypeScript 5 (Strict physical unit models & type safety)
3D Graphics Engine: Three.js r172
React 3D Layer: @react-three/fiber (R3F) & @react-three/drei
State Management: Zustand 5 (Fine-grained reactive subscriptions)
Styling: Tailwind CSS + Custom CAD/SolidWorks-inspired luxury palette
Testing: Vitest (Analytical equation verification) + Playwright (WebGL smoke tests)

🏛️ Architecture: Decoupling Physics Solvers from the 3D Render Loop

A major pitfall in building interactive WebGL apps in React is triggering component re-renders when high-frequency user interactions occur (e.g. dragging a load slider or scrubbing a probe).

   ┌────────────────────────────────────────┐
   │            User Interaction            │
   │  (Sliders, Keyboards, Camera Orbit)    │
   └───────────────────┬────────────────────┘
                       │
                       ▼
         ┌───────────────────────────┐
         │       Zustand Store       │
         │ (Decoupled State Slices)  │
         └─────────────┬─────────────┘
                       │
         ┌─────────────┴─────────────┐
         ▼                           ▼
┌──────────────────┐       ┌──────────────────┐
│ Analytical Math  │       │ 3D Stage (R3F)   │
│ Solvers (<1 ms)  │       │ Direct Buffer    │
│ Pure TypeScript  │       │ Vertex Updates   │
└────────┬─────────┘       └────────┬─────────┘
         │                          │
         ▼                          ▼
┌──────────────────┐       ┌──────────────────┐
│ UI Telemetry &   │       │ Locked 60 FPS    │
│ Real-Time Badges │       │ WebGL Viewport   │
└──────────────────┘       └──────────────────┘

State Isolation: User inputs are dispatched directly to dedicated Zustand stores (useBeamStore, useThermalStore, useMaterialStore).
Deterministic Analytical Solvers: All physical computations reside in pure utility functions in utils/. They execute synchronously in <1 ms.
Subscribed Viewports: The 3D canvases subscribe only to their specific state slices, preventing canvas rebuilds.

📐 Deep Dive 1: Real-Time Euler–Bernoulli Beam Mesh Deformation

In the Mechanics of Materials (MOM-01) stage, users analyze beams under point loads, distributed loads (UDL), and cantilever constraints.

Traditional finite element analysis (FEA) solvers take seconds to mesh and solve. To achieve an instantaneous 60 FPS response, we evaluate the exact closed-form Euler–Bernoulli deflection equations and dynamically displace vertices directly within the GPU's buffer attributes.

How Vertex Displacement Works:

We generate an extruded 2D cross-section profile (IPE standard I-beams, rectangular tubes, or circular solid shafts) along the Z-axis using Three.js ExtrudeGeometry.
We rotate the geometry so the beam lies along the global X-axis, centered at the origin.
Instead of recreating geometries when the load changes, we directly mutate the vertex height ($Y$) inside the position buffer attribute:

// components/three/AppBeam.tsx
const geometry = useMemo(() => {
  const profile = buildProfile(shape, widthWorld, depthWorld, inputs);
  const geo = new THREE.ExtrudeGeometry(profile, {
    depth: worldLength,
    bevelEnabled: false,
    steps: segments,
    curveSegments: shape === "circle" ? 32 : 1,
  });

  // Extrusion runs along +Z; rotate so beam lies along +X, then center
  geo.rotateY(Math.PI / 2);
  geo.translate(-worldLength / 2, 0, 0);

  const position = geo.attributes.position;
  for (let i = 0; i < position.count; i++) {
    const x = position.getX(i);
    const t = worldLength > 0 ? (x + worldLength / 2) / worldLength : 0.5;

    // Displace Y based on exact governing Euler-Bernoulli equation
    position.setY(i, position.getY(i) + worldDeflectionAt(t));
  }

  position.needsUpdate = true;
  geo.computeVertexNormals(); // Recalculate normals for proper metallic reflections
  return geo;
}, [shape, worldLength, depthWorld, widthWorld, worldDeflectionAt, segments, inputs]);

Pairing this metallic material with Drei’s <Edges threshold={30} color="#33465C" /> achieves the sleek, technical blueprint aesthetic reminiscent of CAD software like SolidWorks or Siemens NX.

🌡️ Deep Dive 2: Concentric Thermal Networks & The Critical Radius

In the Thermal Systems (THERM-01) stage, we model:

Multi-layer series thermal resistance networks: $$R_{th} = \sum \frac{L_i}{k_i A} + \frac{1}{h A}$$
Concentric cylindrical conduction and the Critical Radius of Insulation: $$r_{crit} = \frac{k}{h}$$
Transient lumped capacitance cooling with automated Biot Number validation ($Bi < 0.1$).

A classic engineering paradox taught in heat transfer is that adding insulation to a small pipe actually increases heat loss up until $r = r_{crit}$, after which heat loss begins to decrease.

In Mecha Atelier, as you drag the insulation thickness slider, the 3D concentric cylinder dynamically resizes its geometry shells, updating radial isotherm shader colors and live resistance curves simultaneously.

🔨 Deep Dive 3: ASTM E23 Charpy Impact Tester in WebGL

To model dynamic fracture behavior, we built an interactive virtual ASTM E23 Charpy Impact Testing Machine:

Heavy cast-iron base plinth with standardized 40mm anvil shoulders.
Kinematic pendulum swinging through release angle $\theta_1$ down to the notched specimen, rising to residual angle $\theta_2$.
Absorbed fracture energy computed via: $$KV = m g (h_1 - h_2)$$
Ductile-to-Brittle Transition Temperature (DBTT): Users can chill the specimen down to cryogenic temperatures ($-60^\circ\text{C}$) or heat it to ($+100^\circ\text{C}$).

At sub-zero temperatures, the specimen fractures cleanly with zero plastic shear lip (cleavage fracture). Above the transition temperature, the material undergoes extensive plastic necking and absorption before tear.

🔍 Solving the WebGL SEO & Generative Engine Optimization (GEO) Problem

One major issue with WebGL applications is discoverability. Search engine crawlers (Googlebot, Bingbot) and AI search agents (PerplexityBot, ChatGPT-User, ClaudeBot) do not execute WebGL contexts or extract meaning from dynamic 3D scenes.

To ensure Mecha Atelier remains indexable:

Semantic Fallback Crawl Layer: Underneath each WebGL stage, we render an accessible semantic layer containing standard HTML definitions, formula derivations, and summary data tables.
Schema.org JSON-LD: Every stage injects structured metadata for SoftwareApplication, EducationalOrganization, and TechArticle.
Dynamic OpenGraph Previews: Utilizing Next.js 14’s edge runtime (app/opengraph-image.tsx), we dynamically render 1200x630 branded social cards showing live discipline statistics.

💡 Key Takeaways

Analytical solvers beat FEA for real-time web interactivity: By evaluating exact closed-form solutions rather than discrete meshing loops, we keep 3D scenes locked at 60 FPS.
Zustand is essential for Three.js in React: Decoupling high-frequency slider state from React's top-level render tree prevents canvas tearing and dropped frames.
Design elevates engineering tools: Technical software doesn’t have to look gray and utilitarian. Crisp typography, blueprint gridlines, and subtle lighting make complex concepts exciting to explore.

🚀 Try It Yourself

Live Demo: Mecha Atelier
GitHub Repository: Fall-Of-The-Dawn/mecha-atelier

I’d love to hear your feedback in the comments:
What engineering or physics concept did you find hardest to visualize in school that you wish had an interactive 3D model?