Physics in the Browser: How I Built a Beam Stress Visualizer with React & Three.js

"You're a mechanical engineer? Why are you coding*?"*

I get asked this in every interview. The assumption is always that engineering and web development are opposites. One deals with steel and forces; the other deals with DOM nodes and pixels.

I disagree. To me, a React component is just a machine with inputs (props) and outputs (UI).

So when I built my portfolio (yogavignesh.me), I didn't want a static "About Me" page. I wanted to prove that the web can handle real engineering physics.

I built a Beam Deflection Visualizer that calculates stress and bending moments in real-time at 60FPS. Here is the engineering behind the code.

1. The Material Data First, I mapped real-world material properties to JavaScript objects.

`// src/components/BeamVisualizer.jsx

const materials = {
steel: {
name: 'Structural Steel',
E: 200, // Young's Modulus in GPa
density: 7850
},
aluminum: {
name: 'Aluminum 6061',
E: 69,
density: 2700
},
wood: {
name: 'Oak Timber',
E: 11,
density: 750
}
};`

1. The Calculation Loop

I used useCallback to memoize the physics calculation. This prevents React from recalculating the physics on every single frame unless the force or material changes.

// Calculating deflection based on Hooke's Law approximation
const calculateDeflection = useCallback(() => {
const E = materials[material].E;
// Simplified deflection logic for visual representation
// Force / Modulus = Raw Deflection Factor
const rawDeflection = (force / E);
return rawDeflection;
}, [force, material, materials]);

Visualizing Stress with SVG Paths

Here is where the "Front End" meets "Mechanical."

Instead of using a heavy 3D model for the beam bending, I used a dynamic SVG Path. By manipulating the Bézier curve control points based on the calculated deflection, I can simulate bending smoothly.

`// 3. VISUALIZATION LOGIC
const deflectionVal = useMemo(() => calculateDeflection(), [calculateDeflection]);

// Clamp the visual bending so it doesn't break the UI
const maxPixels = 100;
const curveDepth = useMemo(() => Math.min(deflectionVal * 0.8, maxPixels), [deflectionVal]);

// The Magic: A Quadratic Bézier Curve (Q) that updates dynamically
const beamPath = useMemo(() =>
M 40 150 Q 250 ${150 + curveDepth} 460 150,
[curveDepth]);`

By binding curveDepth to the Y-axis of the control point, the beam "bends" organically as the user drags the force slider.

Handling 60FPS Interactions

Since this is an interactive portfolio, performance is key. I didn't want the animations to lag on mobile devices.

1. Memoization: Every calculation is wrapped in useMemo or useCallback.

2. GPU Acceleration: I used Framer Motion for the UI elements, which handles transform changes on the GPU thread rather than the main thread

3. Intersection Observer: The grid background animation pauses automatically when the user scrolls away from the component (saving battery life).

// Pausing animations when off-screen
const observer = new IntersectionObserver(
(entries) => {
if (entries[0].isIntersecting) {
gridBg.classList.remove('paused');
} else {
gridBg.classList.add('paused');
}
},
{ threshold: 0.01 }
);

The Result

The final result is a "Digital Twin" of a mechanical stress test. It’s not just a fancy animation; it’s accurate to the material properties. Steel resists bending 3x more than Aluminum, just like in real life.

You can play with the live simulator here: yogavignesh.me

I’m currently looking for roles that bridge the gap between Hardware/Engineering and Full Stack Development. If you're building digital twins or IoT dashboards, let's talk.

Tech Stack: React, Three.js, Framer Motion, Tailwind.

react #webdev #engineering #threejs #javascript