Scale of Things

Scroll to explore sizes

1 m

Human

,object:import * as THREE from 'three'; export function createObjectGeometry(data) { const group = new THREE.Group(); const material = new THREE.MeshStandardMaterial({ color: data.color }); switch (data.type) { case 'molecule': const molGroup = new THREE.Group(); const atomGeo = new THREE.SphereGeometry(0.2 * data.size, 8, 8); const bondGeo = new THREE.CylinderGeometry(0.05 * data.size, 0.05 * data.size, 0.4 * data.size, 6); // Central atom molGroup.add(new THREE.Mesh(atomGeo, material)); // Attached atoms for(let i=0; i<3; i++) { const bond = new THREE.Mesh(bondGeo, new THREE.MeshStandardMaterial({color: 0xcccccc})); const angle = (i / 3) * Math.PI * 2; bond.position.set(Math.cos(angle) * 0.2 * data.size, Math.sin(angle) * 0.2 * data.size, 0); bond.rotation.z = angle + Math.PI/2; molGroup.add(bond); const attached = new THREE.Mesh(atomGeo, new THREE.MeshStandardMaterial({color: 0x8888ff})); attached.position.set(Math.cos(angle) * 0.4 * data.size, Math.sin(angle) * 0.4 * data.size, 0); attached.scale.setScalar(0.7); molGroup.add(attached); } group.add(molGroup); break; case 'helix': const helixPoints = []; for (let i = 0; i <= 40; i++) { const angle = (i / 10) * Math.PI * 2; helixPoints.push(new THREE.Vector3( Math.cos(angle) * 0.2 * data.size, (i / 40 - 0.5) * data.size, Math.sin(angle) * 0.2 * data.size )); } const helixCurve = new THREE.CatmullRomCurve3(helixPoints); const helixGeo = new THREE.TubeGeometry(helixCurve, 64, 0.05 * data.size, 8, false); group.add(new THREE.Mesh(helixGeo, material)); // Second strand const helixPoints2 = helixPoints.map(p => new THREE.Vector3(-p.x, p.y, -p.z)); const helixCurve2 = new THREE.CatmullRomCurve3(helixPoints2); const helixGeo2 = new THREE.TubeGeometry(helixCurve2, 64, 0.05 * data.size, 8, false); group.add(new THREE.Mesh(helixGeo2, material)); break; case 'virus': // Icosahedral-ish virus const virusGeo = new THREE.IcosahedronGeometry(0.5 * data.size, 1); const virus = new THREE.Mesh(virusGeo, material); group.add(virus); // Add some spikes for (let i = 0; i < 12; i++) { const spike = new THREE.Mesh(new THREE.CylinderGeometry(0.02 * data.size, 0.05 * data.size, 0.3 * data.size), material); const phi = Math.acos(-1 + (2 * i) / 12); const theta = Math.sqrt(12 * Math.PI) * phi; spike.position.setFromSphericalCoords(0.4 * data.size, phi, theta); spike.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), spike.position.clone().normalize()); group.add(spike); } break; case 'bacteria': const bacGeo = new THREE.CapsuleGeometry(0.2 * data.size, 0.6 * data.size, 4, 8); const bacteria = new THREE.Mesh(bacGeo, material); bacteria.rotation.z = Math.PI / 2; group.add(bacteria); break; case 'salt': const saltGeo = new THREE.BoxGeometry(data.size, data.size, data.size); const salt = new THREE.Mesh(saltGeo, material); group.add(salt); break; case 'human': // Body const bodyGeo = new THREE.CapsuleGeometry(0.15 * data.size, 0.4 * data.size, 4, 8); const body = new THREE.Mesh(bodyGeo, material); body.position.y = 0.5 * data.size; group.add(body); // Head const headGeo = new THREE.SphereGeometry(0.12 * data.size, 8, 8); const head = new THREE.Mesh(headGeo, material); head.position.y = 0.9 * data.size; group.add(head); // Arms const armGeo = new THREE.CapsuleGeometry(0.04 * data.size, 0.3 * data.size, 2, 4); const leftArm = new THREE.Mesh(armGeo, material); leftArm.position.set(-0.25 * data.size, 0.6 * data.size, 0); group.add(leftArm); const rightArm = new THREE.Mesh(armGeo, material); rightArm.position.set(0.25 * data.size, 0.6 * data.size, 0); group.add(rightArm); // Legs const legGeo = new THREE.CapsuleGeometry(0.05 * data.size, 0.4 * data.size, 2, 4); const leftLeg = new THREE.Mesh(legGeo, material); leftLeg.position.set(-0.1 * data.size, 0.2 * data.size, 0); group.add(leftLeg); const rightLeg = new THREE.Mesh(legGeo, material); rightLeg.position.set(0.1 * data.size, 0.2 * data.size, 0); group.add(rightLeg); break; case 'banana': const curve = new THREE.CatmullRomCurve3([ new THREE.Vector3(-0.4, 0.2, 0), new THREE.Vector3(0, 0, 0), new THREE.Vector3(0.4, 0.2, 0) ].map(v => v.multiplyScalar(data.size))); const bananaGeo = new THREE.TubeGeometry(curve, 20, 0.1 * data.size, 8, false); const banana = new THREE.Mesh(bananaGeo, material); group.add(banana); break; case 'ant': const antBody = new THREE.Mesh(new THREE.SphereGeometry(0.2 * data.size, 6, 6), material); antBody.scale.set(1.5, 0.8, 0.8); group.add(antBody); const headAnt = new THREE.Mesh(new THREE.SphereGeometry(0.12 * data.size, 6, 6), material); headAnt.position.x = 0.3 * data.size; group.add(headAnt); // Legs for (let i = 0; i < 3; i++) { const leg = new THREE.Mesh(new THREE.BoxGeometry(0.02 * data.size, 0.3 * data.size, 0.02 * data.size), material); leg.rotation.z = Math.PI / 4; leg.position.set((i - 1) * 0.1 * data.size, -0.1 * data.size, 0.15 * data.size); group.add(leg); const legR = leg.clone(); legR.position.z = -0.15 * data.size; group.add(legR); } break; case 'mite': const miteBody = new THREE.Mesh(new THREE.SphereGeometry(0.5 * data.size, 6, 6), material); miteBody.scale.set(1.2, 0.7, 1); group.add(miteBody); break; case 'car': const carBody = new THREE.Mesh(new THREE.BoxGeometry(data.size, 0.25 * data.size, 0.45 * data.size), material); carBody.position.y = 0.2 * data.size; group.add(carBody); const cabin = new THREE.Mesh(new THREE.BoxGeometry(0.5 * data.size, 0.2 * data.size, 0.4 * data.size), material); cabin.position.set(-0.1 * data.size, 0.42 * data.size, 0); group.add(cabin); // Wheels const wheelGeo = new THREE.CylinderGeometry(0.1 * data.size, 0.1 * data.size, 0.1 * data.size, 12); const wheelMat = new THREE.MeshStandardMaterial({ color: 0x111111 }); const wheelPos = [ [0.3, 0.1, 0.2], [0.3, 0.1, -0.2], [-0.3, 0.1, 0.2], [-0.3, 0.1, -0.2] ]; wheelPos.forEach(p => { const w = new THREE.Mesh(wheelGeo, wheelMat); w.rotation.x = Math.PI / 2; w.position.set(p[0] * data.size, p[1] * data.size, p[2] * data.size); group.add(w); }); break; case 'whale': const whaleBody = new THREE.Mesh(new THREE.CapsuleGeometry(0.15 * data.size, 0.6 * data.size, 4, 12), material); whaleBody.rotation.z = Math.PI / 2; group.add(whaleBody); const tail = new THREE.Mesh(new THREE.BoxGeometry(0.2 * data.size, 0.05 * data.size, 0.4 * data.size), material); tail.position.x = -0.45 * data.size; group.add(tail); const finL = new THREE.Mesh(new THREE.BoxGeometry(0.1 * data.size, 0.02 * data.size, 0.3 * data.size), material); finL.position.set(0.1 * data.size, -0.05 * data.size, 0.2 * data.size); finL.rotation.y = 0.4; group.add(finL); const finR = finL.clone(); finR.position.z = -0.2 * data.size; finR.rotation.y = -0.4; group.add(finR); break; case 'statue': { // Simple stylized statue (column + abstract figure) const baseGeo = new THREE.CylinderGeometry(0.12 * data.size, 0.12 * data.size, 0.1 * data.size, 12); const base = new THREE.Mesh(baseGeo, new THREE.MeshStandardMaterial({ color: 0x555555 })); base.position.y = 0.05 * data.size; group.add(base); const pedestalGeo = new THREE.BoxGeometry(0.2 * data.size, 0.2 * data.size, 0.2 * data.size); const pedestal = new THREE.Mesh(pedestalGeo, new THREE.MeshStandardMaterial({ color: 0x777777 })); pedestal.position.y = 0.18 * data.size; group.add(pedestal); const figureGeo = new THREE.CapsuleGeometry(0.06 * data.size, 0.5 * data.size, 4, 8); const figure = new THREE.Mesh(figureGeo, material); figure.position.y = 0.5 * data.size; group.add(figure); // Simple torch-like arm const armGeo = new THREE.CylinderGeometry(0.02 * data.size, 0.02 * data.size, 0.25 * data.size, 8); const arm = new THREE.Mesh(armGeo, material); arm.position.set(0.12 * data.size, 0.65 * data.size, 0); arm.rotation.z = -0.6; group.add(arm); break; } case 'animal': { // Simple low-poly stylized quadruped (lion/generic) const body = new THREE.Mesh(new THREE.BoxGeometry(0.9 * data.size, 0.4 * data.size, 0.35 * data.size), material); body.position.y = 0.25 * data.size; group.add(body); const neck = new THREE.Mesh(new THREE.BoxGeometry(0.18 * data.size, 0.18 * data.size, 0.18 * data.size), material); neck.position.set(0.45 * data.size, 0.45 * data.size, 0); neck.rotation.z = -0.25; group.add(neck); const head = new THREE.Mesh(new THREE.BoxGeometry(0.22 * data.size, 0.18 * data.size, 0.14 * data.size), material); head.position.set(0.65 * data.size, 0.45 * data.size, 0); group.add(head); // Legs const legGeo = new THREE.BoxGeometry(0.08 * data.size, 0.3 * data.size, 0.08 * data.size); for (let i = -1; i <= 1; i += 2) { for (let j = -1; j <= 1; j += 2) { const leg = new THREE.Mesh(legGeo, material); leg.position.set(0.2 * data.size, 0.12 * data.size, j * 0.12 * data.size); leg.position.x += i * 0.2 * data.size; group.add(leg); } } // Tail const tail = new THREE.Mesh(new THREE.CylinderGeometry(0.02 * data.size, 0.02 * data.size, 0.5 * data.size, 6), material); tail.position.set(-0.48 * data.size, 0.35 * data.size, 0); tail.rotation.z = 0.6; group.add(tail); break; } case 'animalLarge': { // Larger quadruped (elephant-like stylized) const body = new THREE.Mesh(new THREE.BoxGeometry(1.6 * data.size, 0.8 * data.size, 0.9 * data.size), material); body.position.y = 0.45 * data.size; group.add(body); const head = new THREE.Mesh(new THREE.BoxGeometry(0.5 * data.size, 0.4 * data.size, 0.45 * data.size), material); head.position.set(0.95 * data.size, 0.5 * data.size, 0); group.add(head); // Trunk (cylinder) const trunk = new THREE.Mesh(new THREE.CylinderGeometry(0.08 * data.size, 0.1 * data.size, 0.6 * data.size, 8), material); trunk.rotation.z = -0.6; trunk.position.set(1.2 * data.size, 0.35 * data.size, 0); group.add(trunk); // Legs const legGeo = new THREE.BoxGeometry(0.18 * data.size, 0.6 * data.size, 0.2 * data.size); for (let x of [-0.5, 0.3]) { for (let z of [-0.25, 0.25]) { const leg = new THREE.Mesh(legGeo, material); leg.position.set(x * data.size, 0.12 * data.size, z * data.size); group.add(leg); } } break; } case 'plant': { // Simple stylized sunflower: stem + disk + petals const stem = new THREE.Mesh(new THREE.CylinderGeometry(0.03 * data.size, 0.03 * data.size, 1.0 * data.size, 8), new THREE.MeshStandardMaterial({ color: 0x2b8a2b })); stem.position.y = 0.5 * data.size; group.add(stem); const disk = new THREE.Mesh(new THREE.CircleGeometry(0.25 * data.size, 16), new THREE.MeshStandardMaterial({ color: 0x6b3a0a })); disk.position.set(0, 1.02 * data.size, 0.01 * data.size); group.add(disk); const petMat = new THREE.MeshStandardMaterial({ color: data.color }); for (let i = 0; i < 12; i++) { const pet = new THREE.Mesh(new THREE.BoxGeometry(0.08 * data.size, 0.25 * data.size, 0.02 * data.size), petMat); const angle = (i / 12) * Math.PI * 2; pet.position.set(Math.cos(angle) * 0.32 * data.size, 1.02 * data.size + Math.sin(angle) * 0.02 * data.size, Math.sin(angle) * 0.06 * data.size); pet.rotation.z = angle; group.add(pet); } break; } case 'tower': const towerGeo = new THREE.CylinderGeometry(0.01 * data.size, 0.1 * data.size, data.size, 8); const tower = new THREE.Mesh(towerGeo, material); tower.position.y = 0.5 * data.size; group.add(tower); break; case 'mountain': const mountainGeo = new THREE.ConeGeometry(0.8 * data.size, data.size, 4); const mountain = new THREE.Mesh(mountainGeo, material); mountain.position.y = 0.5 * data.size; group.add(mountain); break; case 'earth': case 'mercury': case 'mars': case 'venus': case 'ceres': case 'makemake': case 'eris': case 'haumea': case 'pluto': case 'neptune': case 'uranus': case 'saturn': case 'jupiter': { // Textured planet cases using local project assets when available. const loader = new THREE.TextureLoader(); // map type -> local asset path const texMap = { earth: 'https://threejs.org/examples/textures/land_ocean_ice_cloud_2048.jpg', // fallback external mercury: '/2k_mercury.jpg', mars: '/2k_mars.jpg', venus: '/2k_venus_surface.jpg', ceres: '/2k_ceres_fictional.jpg', makemake: '/2k_makemake_fictional.jpg', eris: '/2k_eris_fictional.jpg', haumea: '/2k_haumea_fictional.jpg', pluto: '/pluto_texture_by_planetboiearth_dgn4rrr-pre.jpg', neptune: '/2k_neptune.jpg', uranus: '/2k_uranus.jpg', saturn: '/2k_saturn.jpg', jupiter: '/2k_jupiter.jpg' }; const key = data.type === 'earth' ? 'earth' : data.type; const texPath = texMap[key] || texMap.earth; const planetTexture = loader.load(texPath); const planetMat = new THREE.MeshStandardMaterial({ map: planetTexture, roughness: 1.0, metalness: 0.0 }); // Slight segmentation increases for large planets for smoother appearance const segments = Math.min(64, Math.max(16, Math.floor(16 + Math.log10(Math.max(1, data.size)) * 8))); const planetGeo = new THREE.SphereGeometry(0.5 * data.size, segments, segments); const planetMesh = new THREE.Mesh(planetGeo, planetMat); // For Saturn, add a simple ring using a transparent textured-like material if (key === 'saturn') { const ringGeo = new THREE.RingGeometry(0.6 * data.size, 0.95 * data.size, 64); const ringMat = new THREE.MeshBasicMaterial({ color: 0xcccc99, side: THREE.DoubleSide, transparent: true, opacity: 0.9 }); const ring = new THREE.Mesh(ringGeo, ringMat); ring.rotation.x = Math.PI / 2; ring.position.y = 0; planetMesh.add(ring); } group.add(planetMesh); break; } case 'sun': case 'star': const starColor = data.color || 0xffcc00; const starGeo = new THREE.SphereGeometry(0.5 * data.size, 32, 32); const starMat = new THREE.MeshBasicMaterial({ color: starColor }); const star = new THREE.Mesh(starGeo, starMat); group.add(star); // Glow effect for(let i = 1; i <= 3; i++) { const glowGeo = new THREE.SphereGeometry(0.5 * data.size * (1 + i * 0.15), 32, 32); const glowMat = new THREE.MeshBasicMaterial({ color: starColor, transparent: true, opacity: 0.3 / i, side: THREE.BackSide }); group.add(new THREE.Mesh(glowGeo, glowMat)); } break; case 'solar-system': // Instead of a black ball, let's make it a set of planetary orbit indicators const sunCenter = new THREE.Mesh(new THREE.SphereGeometry(0.05 * data.size, 16, 16), new THREE.MeshBasicMaterial({ color: 0xffcc00 })); group.add(sunCenter); // Draw some rings for orbits const orbitCounts = 8; for (let i = 1; i <= orbitCounts; i++) { const radius = (i / orbitCounts) * 0.5 * data.size; const ringGeo = new THREE.TorusGeometry(radius, 0.002 * data.size, 2, 64); const ringMat = new THREE.MeshBasicMaterial({ color: 0x666666, transparent: true, opacity: 0.5 }); const ring = new THREE.Mesh(ringGeo, ringMat); ring.rotation.x = Math.PI / 2; group.add(ring); // Add a small planet dot const planet = new THREE.Mesh(new THREE.SphereGeometry(0.005 * data.size, 8, 8), new THREE.MeshBasicMaterial({ color: 0xaaaaaa })); const ang = Math.random() * Math.PI * 2; planet.position.set(Math.cos(ang) * radius, 0, Math.sin(ang) * radius); group.add(planet); } break; case 'blackhole': const ehGeo = new THREE.SphereGeometry(0.5 * data.size, 32, 32); const ehMat = new THREE.MeshBasicMaterial({ color: 0x000000 }); group.add(new THREE.Mesh(ehGeo, ehMat)); const diskGeo = new THREE.TorusGeometry(data.size * 0.8, data.size * 0.1, 4, 32); const diskMat = new THREE.MeshBasicMaterial({ color: data.color || 0xffaa00, transparent: true, opacity: 0.8 }); const disk = new THREE.Mesh(diskGeo, diskMat); disk.rotation.x = Math.PI / 2.5; group.add(disk); const bhGlowGeo = new THREE.SphereGeometry(data.size * 0.6, 32, 32); const bhGlowMat = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.2, side: THREE.BackSide }); group.add(new THREE.Mesh(bhGlowGeo, bhGlowMat)); break; case 'galaxy': group.add(createPointCloud(data.size, 8000, 4, 12, 0.05, 0.02, 0xffffff)); const coreGeo = new THREE.SphereGeometry(0.08 * data.size, 16, 16); group.add(new THREE.Mesh(coreGeo, new THREE.MeshBasicMaterial({ color: 0xffffcc, transparent: true, opacity: 0.4 }))); break; case 'supercluster': group.add(createPointCloud(data.size, 12000, 2, 2, 0.4, 0.3, data.color)); break; case 'void': const voidGeo = new THREE.SphereGeometry(0.5 * data.size, 32, 32); const voidMat = new THREE.MeshBasicMaterial({ color: 0x000000, side: THREE.BackSide, transparent: true, opacity: 0.8 }); group.add(new THREE.Mesh(voidGeo, voidMat)); break; case 'universe': const uniGeo = new THREE.SphereGeometry(0.5 * data.size, 64, 64); const uniMat = new THREE.MeshBasicMaterial({ color: data.color || 0xffffff, wireframe: true, transparent: true, opacity: 0.1 }); group.add(new THREE.Mesh(uniGeo, uniMat)); group.add(createPointCloud(data.size * 0.9, 15000, 0, 0, 0.5, 0.5, data.color || 0xffffff)); break; case 'tear': const tearPoints = []; for (let i = 0; i < 20; i++) { tearPoints.push(new THREE.Vector3((Math.random() - 0.5) * data.size, (i / 20 - 0.5) * data.size, (Math.random() - 0.5) * data.size * 0.1)); } const tearCurve = new THREE.CatmullRomCurve3(tearPoints); const tearGeo = new THREE.TubeGeometry(tearCurve, 64, 0.05 * data.size, 8, false); const tearMat = new THREE.MeshBasicMaterial({ color: 0x000000 }); group.add(new THREE.Mesh(tearGeo, tearMat)); break; case 'origin': const originGeo = new THREE.IcosahedronGeometry(0.5 * data.size, 4); const originMat = new THREE.MeshBasicMaterial({ color: 0x000000, wireframe: true }); group.add(new THREE.Mesh(originGeo, originMat)); const originCore = new THREE.Mesh(new THREE.SphereGeometry(0.2 * data.size, 32, 32), new THREE.MeshBasicMaterial({ color: 0x000000 })); group.add(originCore); break; case 'ringworld': const rwGeo = new THREE.TorusGeometry(0.45 * data.size, 0.01 * data.size, 16, 100); const rwMat = new THREE.MeshStandardMaterial({ color: data.color }); const ring = new THREE.Mesh(rwGeo, rwMat); ring.rotation.x = Math.PI / 2; group.add(ring); break; case 'dyson': const dysonGeo = new THREE.SphereGeometry(0.5 * data.size, 32, 32); const dysonMat = new THREE.MeshStandardMaterial({ color: data.color, wireframe: true }); group.add(new THREE.Mesh(dysonGeo, dysonMat)); break; case 'the-cube': group.userData.isRotating = true; const coreCube = new THREE.Mesh(new THREE.BoxGeometry(0.2 * data.size, 0.2 * data.size, 0.2 * data.size), new THREE.MeshStandardMaterial({ color: data.color })); coreCube.userData.rotateSpeed = { x: 0.01, y: 0.01, z: 0.01 }; group.add(coreCube); const shellColors = [0xff0000, 0x00ff00, 0x0000ff]; for(let i=0; i<3; i++) { const shell = new THREE.Mesh( new THREE.BoxGeometry((0.4 + i*0.2) * data.size, (0.4 + i*0.2) * data.size, (0.4 + i*0.2) * data.size), new THREE.MeshBasicMaterial({ color: shellColors[i], wireframe: true, transparent: true, opacity: 0.5 }) ); shell.userData.rotateSpeed = { x: (i === 0 ? 0.02 : 0), y: (i === 1 ? 0.02 : 0), z: (i === 2 ? 0.02 : 0) }; group.add(shell); } break; case 'eye': const iris = new THREE.Mesh(new THREE.TorusGeometry(0.4 * data.size, 0.05 * data.size, 16, 100), new THREE.MeshBasicMaterial({ color: data.color })); const pupil = new THREE.Mesh(new THREE.SphereGeometry(0.1 * data.size, 32, 32), new THREE.MeshBasicMaterial({ color: 0x000000 })); group.add(iris); group.add(pupil); break; case 'cylinder': const cylGeo = new THREE.CylinderGeometry(data.size, data.size, data.size * 10, 8); const cyl = new THREE.Mesh(cylGeo, material); group.add(cyl); break; case 'mouse': { // Use the provided image asset as a textured plane for the mouse, load async to ensure image size available const loader = new THREE.TextureLoader(); // create a placeholder plane so group has something immediately (small transparent) const placeholderMat = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.0 }); const placeholderGeo = new THREE.PlaneGeometry(0.1 * data.size, 0.06 * data.size); const placeholder = new THREE.Mesh(placeholderGeo, placeholderMat); group.add(placeholder); loader.load( '/unnamed-Picsart-BackgroundRemover.png', (tex) => { // remove placeholder group.remove(placeholder); const img = tex.image; const aspect = (img && img.width && img.height) ? img.width / img.height : 1.6; const planeH = 0.6 * data.size; const planeW = planeH * aspect; const mouseMat = new THREE.MeshBasicMaterial({ map: tex, transparent: true, side: THREE.DoubleSide }); const mouseGeo = new THREE.PlaneGeometry(planeW, planeH); const mouseMesh = new THREE.Mesh(mouseGeo, mouseMat); mouseMesh.rotation.y = Math.PI / 6; group.add(mouseMesh); }, undefined, (err) => { // on error, keep placeholder (optionally tint) placeholder.material.opacity = 0.6; placeholder.material.color.setHex(0x999999); } ); break; } case 'maus': { // Stylized Maus tank model: hull, turret, barrel, tracks const hull = new THREE.Mesh(new THREE.BoxGeometry(0.9 * data.size, 0.3 * data.size, 0.5 * data.size), new THREE.MeshStandardMaterial({ color: data.color })); hull.position.y = 0.15 * data.size; group.add(hull); // Turret const turret = new THREE.Mesh(new THREE.CylinderGeometry(0.18 * data.size, 0.22 * data.size, 0.16 * data.size, 16), new THREE.MeshStandardMaterial({ color: data.color })); turret.rotation.x = Math.PI / 2; turret.position.y = 0.33 * data.size; group.add(turret); // Turret top const turretTop = new THREE.Mesh(new THREE.CylinderGeometry(0.12 * data.size, 0.12 * data.size, 0.06 * data.size, 12), new THREE.MeshStandardMaterial({ color: 0x222222 })); turretTop.rotation.x = Math.PI / 2; turretTop.position.y = 0.4 * data.size; group.add(turretTop); // Barrel const barrel = new THREE.Mesh(new THREE.CylinderGeometry(0.03 * data.size, 0.04 * data.size, 0.6 * data.size, 8), new THREE.MeshStandardMaterial({ color: 0x111111 })); barrel.rotation.z = Math.PI / 2; barrel.position.set(0.5 * data.size, 0.35 * data.size, 0); group.add(barrel); // Tracks - left and right const trackGeom = new THREE.BoxGeometry(0.95 * data.size, 0.14 * data.size, 0.12 * data.size); const trackMat = new THREE.MeshStandardMaterial({ color: 0x222222 }); const leftTrack = new THREE.Mesh(trackGeom, trackMat); leftTrack.position.set(0, 0.07 * data.size, 0.31 * data.size); group.add(leftTrack); const rightTrack = leftTrack.clone(); rightTrack.position.z = -0.31 * data.size; group.add(rightTrack); // Some road wheels as simple cylinders const wheelGeo = new THREE.CylinderGeometry(0.06 * data.size, 0.06 * data.size, 0.08 * data.size, 12); const wheelMat = new THREE.MeshStandardMaterial({ color: 0x111111 }); for (let i = -2; i <= 2; i++) { const wl = new THREE.Mesh(wheelGeo, wheelMat); wl.rotation.x = Math.PI / 2; wl.position.set((i / 3) * 0.6 * data.size, 0.08 * data.size, 0.27 * data.size); group.add(wl); const wr = wl.clone(); wr.position.z = -0.27 * data.size; group.add(wr); } break; } case 'sphere': default: const sphereGeo = new THREE.SphereGeometry(0.5 * data.size, 16, 16); const sphere = new THREE.Mesh(sphereGeo, material); group.add(sphere); break; } return group; } function createPointCloud(size, count, arms, tightness, spreadH, spreadV, color) { const points = []; for (let i = 0; i < count; i++) { let x, y, z; if (arms > 0) { const armIndex = i % arms; const r = (i / count) * 0.5; const angle = (i / count) * tightness + (armIndex / arms) * Math.PI * 2; x = Math.cos(angle) * r + (Math.random() - 0.5) * spreadH; z = Math.sin(angle) * r + (Math.random() - 0.5) * spreadH; y = (Math.random() - 0.5) * spreadV * (1 - r / 0.5); } else { // Spherical distribution const phi = Math.acos(-1 + Math.random() * 2); const theta = Math.random() * Math.PI * 2; const r = Math.random() * 0.5; x = r * Math.sin(phi) * Math.cos(theta); y = r * Math.sin(phi) * Math.sin(theta); z = r * Math.cos(phi); } points.push(x * size, y * size, z * size); } const geo = new THREE.BufferGeometry(); geo.setAttribute('position', new THREE.Float32BufferAttribute(points, 3)); const mat = new THREE.PointsMaterial({ color: color, size: 2, sizeAttenuation: false, transparent: true, opacity: 0.6 }); return new THREE.Points(geo, mat); },main:import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { CSS2DRenderer, CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js'; import { createObjectGeometry } from './objects.js'; // Configuration let currentExponent = 0; // 10^0 = 1 meter const MIN_EXPONENT = -11; // 0.1 nanometers (Atomic scale) const MAX_EXPONENT = 45; // Huge fictional scales const LERP_SPEED = 0.1; const AU_METERS = 149597870700; const LY_METERS = 9460730472580800; const LC_METERS = LY_METERS * 100; const LM_METERS = LC_METERS * 10; const MPC_METERS = 3.0857 * Math.pow(10, 22); // Scene Setup const scene = new THREE.Scene(); scene.background = new THREE.Color(0xf0f8ff); // Sky with multiple states const skyGeo = new THREE.SphereGeometry(1000, 32, 32); const skyMat = new THREE.ShaderMaterial({ uniforms: { topColor: { value: new THREE.Color(0x87ceeb) }, bottomColor: { value: new THREE.Color(0xffffff) }, microTop: { value: new THREE.Color(0x004d00) }, microBottom: { value: new THREE.Color(0x32cd32) }, spaceColor: { value: new THREE.Color(0x00050a) }, beyondColor: { value: new THREE.Color(0xffffff) }, atomicTop: { value: new THREE.Color(0x0a0015) }, atomicBottom: { value: new THREE.Color(0x1a0033) }, exponent: { value: 0.6 }, spaceFactor: { value: 0.0 }, microFactor: { value: 0.0 }, beyondFactor: { value: 0.0 }, atomicFactor: { value: 0.0 } }, vertexShader: ` varying vec3 vLocalPosition; void main() { vLocalPosition = position; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); } `, fragmentShader: ` uniform vec3 topColor; uniform vec3 bottomColor; uniform vec3 microTop; uniform vec3 microBottom; uniform vec3 atomicTop; uniform vec3 atomicBottom; uniform vec3 spaceColor; uniform vec3 beyondColor; uniform float exponent; uniform float spaceFactor; uniform float microFactor; uniform float beyondFactor; uniform float atomicFactor; varying vec3 vLocalPosition; float hash(vec3 p) { return fract(sin(dot(p, vec3(12.9898, 78.233, 45.164))) * 43758.5453); } void main() { vec3 dir = normalize(vLocalPosition); float h = dir.y; // Standard Atmosphere Gradient vec3 skyColor = mix( bottomColor, topColor, max( pow( max( h + 0.1, 0.0 ), exponent ), 0.0 ) ); // Micro-world Gradient vec3 microSky = mix( microBottom, microTop, max( pow( max( h + 0.1, 0.0 ), exponent ), 0.0 ) ); // Atomic-world Gradient vec3 atomicSky = mix( atomicBottom, atomicTop, max( pow( max( h + 0.1, 0.0 ), exponent ), 0.0 ) ); // Procedural Stars vec3 starCoords = dir * 180.0; vec3 id = floor(starCoords); float starRand = hash(id); float starIntensity = 0.0; if (starRand > 0.994) { float dist = length(fract(starCoords) - 0.5); starIntensity = smoothstep(0.45, 0.1, dist) * starRand; } // Mix Logic vec3 finalColor = mix(skyColor, spaceColor, spaceFactor); finalColor = mix(finalColor, microSky, microFactor); finalColor = mix(finalColor, atomicSky, atomicFactor); finalColor += vec3(starIntensity) * spaceFactor * (1.0 - microFactor); // Beyond Universe stage -> pure white background with pure-black procedural shapes if (beyondFactor > 0.0) { // base white vec3 beyondBase = vec3(1.0); // procedural black shapes float shapeMask = 0.0; vec3 shapeId = floor(dir * 6.0); float hsh = hash(shapeId); if (hsh > 0.78) { float dist = length(fract(dir * 6.0) - 0.5); shapeMask = smoothstep(0.45, 0.18, dist); } vec3 shapeColor = vec3(0.0); vec3 finalBeyond = mix(beyondBase, shapeColor, shapeMask); // blend in based on beyondFactor finalColor = mix(finalColor, finalBeyond, beyondFactor); } gl_FragColor = vec4( finalColor, 1.0 ); } `, side: THREE.BackSide }); const sky = new THREE.Mesh(skyGeo, skyMat); scene.add(sky); // Micro-world background elements (Floating bacteria) const microElements = new THREE.Group(); scene.add(microElements); for(let i=0; i<30; i++) { const bac = createObjectGeometry({ type: 'bacteria', size: 10, color: 0x44ff44 }); bac.position.set( (Math.random()-0.5)*100, (Math.random()-0.5)*100, (Math.random()-0.5)*100 ); bac.rotation.set(Math.random()*Math.PI, Math.random()*Math.PI, Math.random()*Math.PI); microElements.add(bac); } microElements.visible = false; // Atomic background elements (Probability clouds / Quantum strings) const atomicElements = new THREE.Group(); scene.add(atomicElements); for(let i=0; i<50; i++) { const quantumShape = new THREE.Group(); // A glowing \"probability\" ring const ringGeo = new THREE.TorusGeometry(5 + Math.random()*10, 0.05, 8, 32); const ringMat = new THREE.MeshBasicMaterial({ color: 0xaa00ff, transparent: true, opacity: 0.2 + Math.random() * 0.3 }); const ring = new THREE.Mesh(ringGeo, ringMat); quantumShape.add(ring); // Some floating dots const dotsGeo = new THREE.SphereGeometry(0.2, 4, 4); const dotsMat = new THREE.MeshBasicMaterial({ color: 0x00ffff, transparent: true, opacity: 0.6 }); for(let j=0; j<3; j++) { const d = new THREE.Mesh(dotsGeo, dotsMat); d.position.set(Math.random()*5, Math.random()*5, Math.random()*5); quantumShape.add(d); } quantumShape.position.set( (Math.random()-0.5)*150, (Math.random()-0.5)*150, (Math.random()-0.5)*150 ); quantumShape.rotation.set(Math.random()*Math.PI, Math.random()*Math.PI, Math.random()*Math.PI); atomicElements.add(quantumShape); } atomicElements.visible = false; const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 2000); camera.position.set(2, 2, 5); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const labelRenderer = new CSS2DRenderer(); labelRenderer.setSize(window.innerWidth, window.innerHeight); labelRenderer.domElement.style.position = 'absolute'; labelRenderer.domElement.style.top = '0px'; labelRenderer.domElement.style.pointerEvents = 'none'; document.body.appendChild(labelRenderer.domElement); const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.enableZoom = false; const ambientLight = new THREE.AmbientLight(0xffffff, 0.7); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(5, 10, 7.5); scene.add(directionalLight); // Objects Data const objectData = [ { name: \"Hydrogen Atom\", size: 0.0000000001, color: 0xffffff, type: 'sphere' }, { name: \"Carbon Atom\", size: 0.00000000017, color: 0x333333, type: 'sphere' }, { name: \"Water Molecule\", size: 0.00000000028, color: 0x4444ff, type: 'molecule' }, { name: \"Glucose Molecule\", size: 0.0000000009, color: 0xeeeeee, type: 'molecule' }, { name: \"DNA Helix (width)\", size: 0.0000000025, color: 0xff00ff, type: 'helix' }, { name: \"Hemoglobin\", size: 0.0000000055, color: 0xcc0000, type: 'sphere' }, { name: \"Ribosome\", size: 0.000000025, color: 0x88cc88, type: 'sphere' }, { name: \"Poliovirus\", size: 0.00000003, color: 0xffeeaa, type: 'virus' }, { name: \"HIV\", size: 0.00000012, color: 0xff8800, type: 'virus' }, { name: \"Coronavirus\", size: 0.0000001, color: 0xff4444, type: 'virus' }, { name: \"Mimivirus\", size: 0.0000004, color: 0x4488ff, type: 'virus' }, { name: \"E. Coli Bacteria\", size: 0.000002, color: 0x00ff00, type: 'bacteria' }, { name: \"Red Blood Cell\", size: 0.000007, color: 0xff0000, type: 'sphere' }, { name: \"Human Hair (width)\", size: 0.0001, color: 0x332211, type: 'cylinder' }, { name: \"Dust Mite\", size: 0.00025, color: 0xcccccc, type: 'mite' }, { name: \"Grain of Salt\", size: 0.0003, color: 0xffffff, type: 'salt' }, { name: \"Ant\", size: 0.005, color: 0x111111, type: 'ant' }, { name: \"Marble\", size: 0.013, color: 0x00aaff, type: 'sphere' }, { name: \"Banana\", size: 0.2, color: 0xffe135, type: 'banana' }, { name: \"Human\", size: 1.7, color: 0xffdbac, type: 'human' }, { name: \"Car\", size: 4.5, color: 0xff0000, type: 'car' }, { name: \"Blue Whale\", size: 30, color: 0x5577aa, type: 'whale' }, { name: \"Burj Khalifa\", size: 828, color: 0x999999, type: 'tower' }, { name: \"Mount Everest\", size: 8848, color: 0xffffff, type: 'mountain' }, { name: \"The Moon\", size: 3474000, color: 0xdddddd, type: 'sphere' }, { name: \"Earth\", size: 12742000, color: 0x228b22, type: 'earth' }, { name: \"The Sun\", size: 1392700000, color: 0xffcc00, type: 'sun' }, { name: \"Solar System\", size: 9 * Math.pow(10, 12), color: 0x444444, type: 'solar-system' }, { name: \"Gaia BH1\", size: 30000, color: 0xffaa00, type: 'blackhole' }, { name: \"TON 618\", size: 3.9 * Math.pow(10, 14), color: 0x00ffff, type: 'blackhole' }, { name: \"Light Year\", size: LY_METERS, color: 0xffffff, type: 'cylinder' }, { name: \"Milky Way Galaxy\", size: 100000 * LY_METERS, color: 0xffffff, type: 'galaxy' }, { name: \"Andromeda Galaxy\", size: 220000 * LY_METERS, color: 0xffeedd, type: 'galaxy' }, { name: \"Triangulum Galaxy\", size: 60000 * LY_METERS, color: 0xffddcc, type: 'galaxy' }, { name: \"Dwarf Galaxy\", size: 10000 * LY_METERS, color: 0xccccff, type: 'galaxy' }, { name: \"Boötes Void\", size: 3.3 * Math.pow(10, 8) * LY_METERS, color: 0x111111, type: 'void' }, { name: \"Laniakea Supercluster\", size: 5.2 * Math.pow(10, 8) * LY_METERS, color: 0xffaa88, type: 'supercluster' }, { name: \"Observable Universe\", size: 9.3 * Math.pow(10, 10) * LY_METERS, color: 0xffffff, type: 'universe' }, { name: \"Grey Realm (large universe)\", size: Math.pow(10, 12) * LY_METERS, color: 0x888888, type: 'universe' }, { name: \"Space Tear\", size: 5 * Math.pow(10, 13) * LY_METERS, color: 0x000000, type: 'tear' }, { name: \"Quantum Origin\", size: Math.pow(10, 15) * LY_METERS, color: 0x000000, type: 'origin' }, { name: \"Dark Realm\", size: Math.pow(10, 18) * LY_METERS, color: 0x000000, type: 'sphere' }, { name: \"Light Realm\", size: Math.pow(10, 21) * LY_METERS, color: 0xffffff, type: 'star' }, { name: \"Hypergiant Star\", size: 2 * Math.pow(10, 10) * LY_METERS, color: 0xffaaee, type: 'star' } ]; const sceneObjects = []; const UNIVERSE_SIZE_METERS = 9.3 * Math.pow(10, 10) * LY_METERS; // Add more fruit / vegetable objects to the dataset dynamically objectData.push( // Planets / dwarf planets (diameters in meters) { name: \"Mercury\", size: 4879000, color: 0x8b8b83, type: 'mercury' }, { name: \"Venus\", size: 12104000, color: 0xd4a24a, type: 'venus' }, { name: \"Mars\", size: 6779000, color: 0xcc4422, type: 'mars' }, { name: \"Ceres\", size: 940000, color: 0xbfa79b, type: 'ceres' }, { name: \"Makemake\", size: 1430000, color: 0xbf6b4b, type: 'makemake' }, { name: \"Eris\", size: 2326000, color: 0xdfefff, type: 'eris' }, { name: \"Haumea\", size: 1632000, color: 0x9e9e9e, type: 'haumea' }, { name: \"Pluto\", size: 2377000, color: 0xa86f6f, type: 'pluto' }, { name: \"Neptune\", size: 49244000, color: 0x2b6aa3, type: 'neptune' }, { name: \"Uranus\", size: 50724000, color: 0x9fd3e6, type: 'uranus' }, { name: \"Saturn\", size: 116460000, color: 0xe6c48c, type: 'saturn' }, { name: \"Jupiter\", size: 139820000, color: 0xd9b88f, type: 'jupiter' }, // Fruits / vegetables { name: \"Apple\", size: 0.08, color: 0xff4444, type: 'sphere' }, { name: \"Orange\", size: 0.09, color: 0xffaa33, type: 'sphere' }, { name: \"Tomato\", size: 0.07, color: 0xff5522, type: 'sphere' }, { name: \"Broccoli\", size: 0.12, color: 0x228833, type: 'sphere' }, { name: \"Grape\", size: 0.002, color: 0x660066, type: 'sphere' }, // New additions { name: \"Statue of Liberty\", size: 93, color: 0x889977, type: 'statue' }, // Use custom animal/plant model types instead of generic spheres { name: \"Lion\", size: 2.5, color: 0xcc8844, type: 'animal' }, { name: \"Elephant\", size: 6.0, color: 0x666655, type: 'animalLarge' }, { name: \"Sunflower\", size: 1.5, color: 0xffdd33, type: 'plant' }, // Added well-known stars { name: \"Sirius\", size: 1671240000, color: 0xffffff, type: 'star' }, { name: \"Vega\", size: 3203210000, color: 0xfff0d0, type: 'star' }, { name: \"Rigel\", size: 108600600000, color: 0x88ccff, type: 'star' }, { name: \"Pollux\", size: 13927000000, color: 0xffeedd, type: 'star' }, { name: \"Acrux\", size: 16712400000, color: 0xffcccc, type: 'star' }, // Realistic nebula additions (colorful diffuse clouds) { name: \"Eagle Nebula\", size: 7.0 * LY_METERS, color: 0xffaaee, type: 'nebula' }, { name: \"Orion Nebula\", size: 24.0 * LY_METERS, color: 0xffccaa, type: 'nebula' }, { name: \"Carina Nebula\", size: 230.0 * LY_METERS, color: 0xff8888, type: 'nebula' }, { name: \"Lagoon Nebula\", size: 55.0 * LY_METERS, color: 0xffddcc, type: 'nebula' }, { name: \"Crab Nebula\", size: 11.0 * LY_METERS, color: 0x99ccff, type: 'nebula' }, // Add the mouse image as an object (uses the provided asset file) { name: \"Mouse (image)\", size: 0.1, color: 0xffffff, type: 'mouse' }, // Add Maus tank { name: \"Maus Tank\", size: 10, color: 0x333333, type: 'maus' } ); let runningX = 0; objectData.sort((a, b) => a.size - b.size).forEach((data, index) => { const group = createObjectGeometry(data); // Position sequentially along +X axis using cumulative spacing scaled by object size // place object's center at runningX + half its size to keep spacing proportional to diameter const paddingFactor = 0.2; // extra space between objects relative to their size const baseX = runningX + 0.5 * data.size; const basePosition = new THREE.Vector3(baseX, 0, 0); group.position.copy(basePosition); // advance runningX by object's diameter plus padding runningX += data.size * (1 + paddingFactor); const div = document.createElement('div'); div.className = 'label'; const displayName = data.name; // Mark as fictional if larger than the defined observable universe size const fictionalTag = (data.size > UNIVERSE_SIZE_METERS) ? ' (fictional)' : ''; div.textContent = `${displayName}${fictionalTag} (${formatSize(data.size)})`; const label = new CSS2DObject(div); label.position.set(0, data.size * 0.6, 0); group.add(label); sceneObjects.push({ mesh: group, size: data.size, name: data.name, basePosition: basePosition }); scene.add(group); }); function formatValue(n, decimals) { if (n >= 10000) { return Intl.NumberFormat('en-US', { notation: \"compact\", compactDisplay: \"short\", maximumFractionDigits: 1 }).format(n); } return n.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: decimals }); } function formatSize(meters) { // Use mega-parsecs (Mpc) at very large scales (1 Mpc = MPC_METERS) if (meters >= MPC_METERS) return formatValue(meters / MPC_METERS, 2) + \" Mpc\"; if (meters >= LM_METERS) return formatValue(meters / LM_METERS, 2) + \" LM\"; if (meters >= LC_METERS) return formatValue(meters / LC_METERS, 2) + \" LC\"; if (meters >= LY_METERS) return formatValue(meters / LY_METERS, 2) + \" ly\"; if (meters >= AU_METERS * 0.1) return formatValue(meters / AU_METERS, 3) + \" AU\"; if (meters >= 1000000) return formatValue(meters / 1000000, 1) + \" Mm\"; if (meters >= 1000) return formatValue(meters / 1000, 1) + \" km\"; if (meters >= 1) return formatValue(meters, 2) + \" m\"; if (meters >= 0.01) return formatValue(meters * 100, 1) + \" cm\"; if (meters >= 0.001) return formatValue(meters * 1000, 1) + \" mm\"; if (meters >= 0.000001) return formatValue(meters * 1000000, 1) + \" µm\"; return formatValue(meters * 1000000000, 0) + \" nm\"; } let targetExponent = 0; function onWheel(e) { targetExponent += e.deltaY * 0.001; targetExponent = Math.max(MIN_EXPONENT, Math.min(MAX_EXPONENT, targetExponent)); } let lastTouchY = 0; function onTouchStart(e) { lastTouchY = e.touches[0].clientY; } function onTouchMove(e) { const delta = (lastTouchY - e.touches[0].clientY) * 0.01; targetExponent += delta; targetExponent = Math.max(MIN_EXPONENT, Math.min(MAX_EXPONENT, targetExponent)); lastTouchY = e.touches[0].clientY; } window.addEventListener('wheel', onWheel); window.addEventListener('touchstart', onTouchStart); window.addEventListener('touchmove', onTouchMove); window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); labelRenderer.setSize(window.innerWidth, window.innerHeight); }); function animate() { requestAnimationFrame(animate); currentExponent += (targetExponent - currentExponent) * LERP_SPEED; const currentScaleFactor = Math.pow(10, currentExponent); document.getElementById('scale-display').textContent = formatSize(currentScaleFactor); sky.position.copy(camera.position); // Sky Transitions const spaceTransitionStart = 4.5; const spaceTransitionEnd = 6.5; const spaceFactor = THREE.MathUtils.clamp((currentExponent - spaceTransitionStart) / (spaceTransitionEnd - spaceTransitionStart), 0, 1); skyMat.uniforms.spaceFactor.value = spaceFactor; const microTransitionStart = -2.5; const microTransitionEnd = -4.5; const microFactor = THREE.MathUtils.clamp((currentExponent - microTransitionStart) / (microTransitionEnd - microTransitionStart), 0, 1); skyMat.uniforms.microFactor.value = microFactor; const atomicTransitionStart = -7.5; const atomicTransitionEnd = -9.5; const atomicFactor = THREE.MathUtils.clamp((currentExponent - atomicTransitionStart) / (atomicTransitionEnd - atomicTransitionStart), 0, 1); skyMat.uniforms.atomicFactor.value = atomicFactor; const beyondTransitionStart = 26.5; const beyondTransitionEnd = 28.5; const beyondFactor = THREE.MathUtils.clamp((currentExponent - beyondTransitionStart) / (beyondTransitionEnd - beyondTransitionStart), 0, 1); skyMat.uniforms.beyondFactor.value = beyondFactor; // Update rotating objects sceneObjects.forEach(obj => { if (obj.mesh.userData.isRotating) { const time = Date.now() * 0.001; obj.mesh.children.forEach(child => { if (child.userData.rotateSpeed) { child.rotation.x += child.userData.rotateSpeed.x; child.rotation.y += child.userData.rotateSpeed.y; child.rotation.z += child.userData.rotateSpeed.z; } }); } }); // Background bacteria visibility and movement microElements.visible = microFactor > 0.05 && atomicFactor < 0.95; if(microElements.visible) { microElements.children.forEach((b, i) => { b.position.y += Math.sin(Date.now() * 0.001 + i) * 0.02; b.rotation.y += 0.002; }); microElements.position.copy(camera.position); } // Atomic background visibility and movement atomicElements.visible = atomicFactor > 0.05; if(atomicElements.visible) { atomicElements.children.forEach((a, i) => { a.rotation.x += 0.005; a.rotation.y += 0.003; a.scale.setScalar(1 + Math.sin(Date.now() * 0.002 + i) * 0.1); }); atomicElements.position.copy(camera.position); } let closestObj = sceneObjects[0]; let minDiff = 100; sceneObjects.forEach(obj => { const diff = Math.abs(Math.log10(obj.size) - currentExponent); if (diff < minDiff) { minDiff = diff; closestObj = obj; } obj.mesh.scale.setScalar(1 / currentScaleFactor); obj.mesh.position.copy(obj.basePosition).multiplyScalar(1 / currentScaleFactor); const isVisible = diff < 1.2; obj.mesh.visible = isVisible; obj.mesh.children.forEach(child => { if (child instanceof CSS2DObject) { child.element.style.opacity = isVisible ? 1.0 : 0.0; } }); }); document.getElementById('object-name').textContent = closestObj.name; controls.update(); renderer.render(scene, camera); labelRenderer.render(scene, camera); } animate();","url","link_url","/p/v5j0sf_b0l_8va42vpr2","versioned_link_url","/p/v5j0sf_b0l_8va42vpr2/1","yapping","**Preparing project files**\n\nI need to create and output project files: index.html (which is provided), main.js, and objects.js. I want to use the import map as indicated in the HTML. The paths should match, and main.js should import createObjectGeometry from './objects.js', which I also need to ensure is exporting correctly. I have to confirm that the CSS2DRenderer path is aligned with the import map. Lastly, I'll ensure that main.js is included as a module in index.html and output multiple files.\n\nindex.html\n```index.html\n```\n\nmain.js\n```main.js\n```\n\nobjects.js\n```objects.js\n```","page_description","The page presents a visual scale model displaying the size of various objects relative to one another. It provides an interactive experience where users…","cursor","eyJpZCI6InY1ajBzZl9iMGxfOHZhNDJ2cHIyIn0","token","included",[],"about",{"_184":-5},"parent","routes/browser/layout","actionData","errors"]