Hugging Face's logo

Spaces:
etnom
/
mobius
Running

App Files Community
mobius / index.html
etnom's picture
etnom
Add 2 files
1d03a64 verified
Raw History Blame Contribute Delete
12.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Metallic Infinity Möbius Strip</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}
#info {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
color: white;
font-family: 'Arial', sans-serif;
pointer-events: none;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.title {
position: absolute;
top: 20px;
width: 100%;
text-align: center;
color: white;
font-family: 'Arial', sans-serif;
font-size: 2.5rem;
font-weight: bold;
text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
}
.controls {
position: absolute;
top: 80px;
right: 20px;
background: rgba(0,0,0,0.5);
padding: 15px;
border-radius: 10px;
color: white;
font-family: 'Arial', sans-serif;
z-index: 100;
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 215, 0, 0.3);
}
.control-group {
margin-bottom: 12px;
}
label {
display: block;
margin-bottom: 5px;
color: #ffd700;
}
input[type="range"] {
-webkit-appearance: none;
width: 100%;
height: 6px;
background: rgba(255, 215, 0, 0.2);
border-radius: 3px;
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
background: #ffd700;
border-radius: 50%;
cursor: pointer;
}
button {
transition: all 0.3s ease;
}
</style>
</head>
<body>
<div class="title">Metallic Infinity Möbius Strip</div>
<div class="controls">
<div class="control-group">
<label for="rotationSpeed">Rotation Speed</label>
<input type="range" id="rotationSpeed" min="0" max="0.02" step="0.001" value="0.005">
</div>
<div class="control-group">
<label class="flex items-center">
<input type="checkbox" id="wireframe" class="mr-2 h-4 w-4 accent-yellow-400">
<span>Show Wireframe</span>
</label>
</div>
<div class="flex space-x-2 mt-4">
<button id="pauseBtn" class="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-lg font-medium shadow-md hover:shadow-lg transform hover:-translate-y-0.5 transition-all">
Pause
</button>
</div>
</div>
<div id="info">Drag to rotate | Scroll to zoom</div>
<script>
// Initialize Three.js scene
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);
// Create Infinity Möbius strip geometry
const createInfinityMobiusStrip = (radius = 1, tubeRadius = 0.3, radialSegments = 128, tubularSegments = 128) => {
const geometry = new THREE.BufferGeometry();
const vertices = [];
const indices = [];
const normals = [];
const uvs = [];
for (let i = 0; i <= radialSegments; i++) {
const v = i / radialSegments * Math.PI * 2;
for (let j = 0; j <= tubularSegments; j++) {
const u = j / tubularSegments * Math.PI * 4;
// Infinity shape parametric equations (lemniscate of Bernoulli) with Möbius twist
const scale = 1.5;
const x = scale * Math.cos(u) / (1 + Math.sin(u)*Math.sin(u));
const y = scale * Math.sin(u) * Math.cos(u) / (1 + Math.sin(u)*Math.sin(u));
// Add tube offset with Möbius twist
const nx = x + tubeRadius * Math.cos(v/2) * Math.cos(u);
const ny = y + tubeRadius * Math.cos(v/2) * Math.sin(u);
const nz = tubeRadius * Math.sin(v/2);
vertices.push(nx, ny, nz);
// Calculate normals
const normal = new THREE.Vector3(
Math.cos(u) * Math.cos(v/2),
Math.sin(u) * Math.cos(v/2),
Math.sin(v/2)
).normalize();
normals.push(normal.x, normal.y, normal.z);
uvs.push(j / tubularSegments, i / radialSegments);
}
}
// Create indices
for (let i = 0; i < radialSegments; i++) {
for (let j = 0; j < tubularSegments; j++) {
const a = i * (tubularSegments + 1) + j;
const b = a + tubularSegments + 1;
const c = a + 1;
const d = b + 1;
indices.push(a, b, d);
indices.push(a, d, c);
}
}
geometry.setIndex(indices);
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));
geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
return geometry;
};
// Create ultra-metallic gold material
const material = new THREE.MeshPhysicalMaterial({
color: 0xffd700, // Gold color
metalness: 1.0,
roughness: 0.1,
clearcoat: 1.0,
clearcoatRoughness: 0.05,
ior: 2.5,
specularIntensity: 1.5,
envMapIntensity: 2.0,
emissive: 0xffcc00,
emissiveIntensity: 0.2,
side: THREE.DoubleSide,
});
const wireframeMaterial = new THREE.MeshBasicMaterial({
color: 0xffffff,
wireframe: true,
transparent: true,
opacity: 0.3
});
// Create Infinity Möbius strip mesh
const mobiusStrip = new THREE.Mesh(createInfinityMobiusStrip(2, 0.4, 128, 128), material);
scene.add(mobiusStrip);
mobiusStrip.rotation.x = Math.PI / 4;
mobiusStrip.rotation.y = Math.PI / 4;
// Add wireframe version
const wireframe = new THREE.Mesh(mobiusStrip.geometry, wireframeMaterial);
scene.add(wireframe);
wireframe.visible = false;
// Add lights for dramatic metallic appearance
const ambientLight = new THREE.AmbientLight(0x404040, 0.3);
scene.add(ambientLight);
// Main directional light
const directionalLight1 = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight1.position.set(2, 2, 2);
directionalLight1.castShadow = true;
directionalLight1.shadow.mapSize.width = 2048;
directionalLight1.shadow.mapSize.height = 2048;
scene.add(directionalLight1);
// Secondary directional light for contrast
const directionalLight2 = new THREE.DirectionalLight(0xff9d00, 0.6);
directionalLight2.position.set(-1, -1, -1);
scene.add(directionalLight2);
// Point light to enhance metallic reflections
const pointLight = new THREE.PointLight(0xffcc00, 2, 15);
pointLight.position.set(3, 5, 0);
pointLight.castShadow = true;
scene.add(pointLight);
// Add another point light for balance
const pointLight2 = new THREE.PointLight(0xff6600, 1.5, 15);
pointLight2.position.set(-3, -5, 0);
scene.add(pointLight2);
// Camera position with better angle for the infinity shape
camera.position.set(0, 3, 10);
camera.lookAt(0, 0, 0);
// Orbit controls with smooth damping
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.screenSpacePanning = false;
controls.minDistance = 5;
controls.maxDistance = 20;
controls.maxPolarAngle = Math.PI * 0.9;
controls.minPolarAngle = Math.PI * 0.1;
// Add environment map for better reflections
const cubeTextureLoader = new THREE.CubeTextureLoader();
const envMap = cubeTextureLoader.load([
'https://threejs.org/examples/textures/cube/MilkyWay/dark-s_px.jpg',
'https://threejs.org/examples/textures/cube/MilkyWay/dark-s_nx.jpg',
'https://threejs.org/examples/textures/cube/MilkyWay/dark-s_py.jpg',
'https://threejs.org/examples/textures/cube/MilkyWay/dark-s_ny.jpg',
'https://threejs.org/examples/textures/cube/MilkyWay/dark-s_pz.jpg',
'https://threejs.org/examples/textures/cube/MilkyWay/dark-s_nz.jpg'
]);
scene.background = envMap;
scene.environment = envMap;
material.envMap = envMap;
// UI controls
const rotationSpeedInput = document.getElementById('rotationSpeed');
const wireframeCheckbox = document.getElementById('wireframe');
const pauseBtn = document.getElementById('pauseBtn');
let isPaused = false;
let autoRotateSpeed = 0.005;
wireframeCheckbox.addEventListener('change', function() {
wireframe.visible = this.checked;
});
pauseBtn.addEventListener('click', function() {
isPaused = !isPaused;
pauseBtn.textContent = isPaused ? 'Play' : 'Pause';
pauseBtn.classList.toggle('bg-yellow-700');
pauseBtn.classList.toggle('bg-yellow-600');
});
// Animation loop with smoother rotation
let time = 0;
function animate() {
requestAnimationFrame(animate);
time += 0.01;
if (!isPaused) {
// Auto rotation with slight variation for visual interest
mobiusStrip.rotation.x += autoRotateSpeed * 0.8;
mobiusStrip.rotation.y += autoRotateSpeed * 0.5;
mobiusStrip.rotation.z += autoRotateSpeed * 0.2;
// Add subtle breathing effect to the light
pointLight.intensity = 2 + Math.sin(time) * 0.5;
pointLight2.intensity = 1.5 + Math.cos(time * 0.8) * 0.3;
// Update rotation speed from UI
autoRotateSpeed = parseFloat(rotationSpeedInput.value);
wireframe.rotation.copy(mobiusStrip.rotation);
}
controls.update();
renderer.render(scene, camera);
}
// Handle window resize
window.addEventListener('resize', function() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
animate();
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=etnom/mobius" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>