A comprehensive 3D Möbius strip generator optimized for web backgrounds and interactive visualizations. This project recreates the mathematical beauty of the Möbius strip using Three.js with multiple implementation options.
- Mathematically Accurate: Uses parametric equations to create a true Möbius strip
- Interactive Controls: Real-time manipulation of shape properties
- Multiple Color Schemes: Golden, blue, rainbow, and monochrome themes
- Responsive Design: Adapts to different screen sizes
- Performance Optimized: Lightweight implementation for web backgrounds
- Multiple Formats: Standalone HTML, React component, and vanilla JS class
index.html- Full-featured interactive demo with controlsmobius-generator.js- Complete generator with advanced featuresmobius-background.js- Lightweight version optimized for backgroundsbackground-demo.html- Demo showing background implementationMobiusBackground.jsx- React component version
<!DOCTYPE html>
<html>
<head>
<style>
#mobius-container {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
</style>
</head>
<body>
<div id="mobius-container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="mobius-background.js"></script>
<script>
const mobius = new MobiusBackground('mobius-container', {
color: 0xFFD700,
opacity: 0.7,
wireframe: true,
rotationSpeed: 0.004
});
</script>
</body>
</html>import MobiusBackground from './MobiusBackground';
function App() {
return (
<div style={{ position: 'relative', height: '100vh' }}>
<MobiusBackground
style={{
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: -1
}}
color={0xFFD700}
opacity={0.7}
wireframe={true}
rotationSpeed={0.004}
/>
<div style={{ position: 'relative', zIndex: 1 }}>
{/* Your content here */}
</div>
</div>
);
}majorRadius(default: 3) - Main radius of the stripminorRadius(default: 0.8) - Width of the stripsegments(default: 80) - Grid density (higher = smoother)rotationSpeed(default: 0.003) - Animation speedcolor(default: 0xFFD700) - Hex coloropacity(default: 0.6) - Transparency (0-1)wireframe(default: true) - Show wireframe or solidautoRotate(default: true) - Enable automatic rotationresponsive(default: true) - Auto-resize on window resize
- Major/Minor radius adjustment
- Grid density control
- Rotation speed
- Color schemes (Golden, Blue, Rainbow, Monochrome)
- Wireframe toggle
- Pause/Resume animation
The Möbius strip is created using parametric equations:
x = (R + r * cos(φ/2)) * cos(φ)
y = (R + r * cos(φ/2)) * sin(φ)
z = r * sin(φ/2)
Where:
- R = major radius
- r = minor radius
- φ = parameter from 0 to 2π
- The φ/2 term creates the half-twist characteristic
- Uses
requestAnimationFramefor smooth 60fps animation - Automatically adjusts pixel ratio for different displays
- Optimized geometry generation for web performance
- Responsive design with efficient resize handling
- Modern browsers with WebGL support
- Chrome, Firefox, Safari, Edge (recent versions)
- Mobile browsers with WebGL support
To run locally:
- Clone the repository
- Open
index.htmlin a modern browser, or - Use a local server for the React component version
MIT License - Feel free to use in your projects!
The Möbius strip demonstrates fascinating topological properties:
- Non-orientable surface: Has only one side
- Single boundary: One continuous edge
- Genus zero: Topologically equivalent to a disk with a twist
- Infinite loop: Represents mathematical infinity concepts