// Core imports import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { RGBELoader } from 'three/addons/loaders/RGBELoader.js'; // Add custom font const fontLink = document.createElement('link'); fontLink.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap'; fontLink.rel = 'stylesheet'; document.head.appendChild(fontLink); // Platform setup const parentDiv = document.getElementById('renderDiv'); let canvas = document.getElementById('threeRenderCanvas'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Create UI overlay const overlay = document.createElement('div'); overlay.style.position = 'absolute'; overlay.style.top = '0'; overlay.style.left = '0'; overlay.style.width = '100%'; overlay.style.height = '100%'; overlay.style.pointerEvents = 'none'; overlay.innerHTML = `

POLARIS

ARCTIC SERIES

DISCOVER

Inspired by the Arctic night sky.

`; parentDiv.appendChild(overlay); // Scene setup const scene = new THREE.Scene(); scene.background = new THREE.Color(0x000814); const camera = new THREE.PerspectiveCamera(45, parentDiv.clientWidth / parentDiv.clientHeight, 0.1, 1000); camera.position.set(0, 0, 4); const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas, }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(parentDiv.clientWidth, parentDiv.clientHeight); renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.2; renderer.outputEncoding = THREE.sRGBEncoding; // Northern Lights effect const auroraGeometry = new THREE.PlaneGeometry(100, 50, 50, 25); const auroraMaterial = new THREE.ShaderMaterial({ uniforms: { time: { value: 0 } }, vertexShader: ` varying vec2 vUv; uniform float time; void main() { vUv = uv; vec3 pos = position; pos.z += sin(pos.x * 0.5 + time) * 2.0; gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0); } `, fragmentShader: ` varying vec2 vUv; uniform float time; void main() { vec3 color1 = vec3(0.0, 0.3, 0.0); // Green vec3 color2 = vec3(0.0, 0.1, 0.3); // Blue vec3 color3 = vec3(0.1, 0.0, 0.2); // Purple float noise = sin(vUv.x * 5.0 + time) * 0.5 + 0.5; noise *= sin(vUv.y * 10.0 + time * 0.5) * 0.5 + 0.5; vec3 finalColor = mix(color1, color2, noise); finalColor = mix(finalColor, color3, sin(time * 0.2) * 0.5 + 0.5); gl_FragColor = vec4(finalColor, noise * 0.3); } `, transparent: true, blending: THREE.AdditiveBlending }); const aurora = new THREE.Mesh(auroraGeometry, auroraMaterial); aurora.position.z = -20; aurora.position.y = 5; scene.add(aurora); // Lighting setup const mainLight = new THREE.DirectionalLight(0xffffff, 2); mainLight.position.set(5, 5, 5); scene.add(mainLight); const fillLight = new THREE.DirectionalLight(0x0066ff, 1); fillLight.position.set(-5, -5, -5); scene.add(fillLight); const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(ambientLight); // Watch model const watchBody = new THREE.Group(); // Watch case with improved material const caseGeometry = new THREE.CylinderGeometry(1, 1, 0.2, 32); const caseMaterial = new THREE.MeshStandardMaterial({ color: 0xdddddd, metalness: 0.9, roughness: 0.1, envMapIntensity: 1 }); const watchCase = new THREE.Mesh(caseGeometry, caseMaterial); // Watch face const faceGeometry = new THREE.CircleGeometry(0.9, 32); const faceMaterial = new THREE.MeshStandardMaterial({ color: 0x111111, metalness: 0.5, roughness: 0.2 }); const watchFace = new THREE.Mesh(faceGeometry, faceMaterial); watchFace.position.y = 0.11; watchFace.rotation.x = -Math.PI / 2; // Watch hands const hourHandGeometry = new THREE.BoxGeometry(0.05, 0.4, 0.02); const minuteHandGeometry = new THREE.BoxGeometry(0.05, 0.6, 0.02); const handMaterial = new THREE.MeshStandardMaterial({ color: 0xdddddd, metalness: 0.9, roughness: 0.1 }); const hourHand = new THREE.Mesh(hourHandGeometry, handMaterial); const minuteHand = new THREE.Mesh(minuteHandGeometry, handMaterial); hourHand.position.y = 0.12; minuteHand.position.y = 0.12; watchBody.add(watchCase); watchBody.add(watchFace); watchBody.add(hourHand); watchBody.add(minuteHand); scene.add(watchBody); // Star field const starCount = 2000; const starGeometry = new THREE.BufferGeometry(); const starPositions = new Float32Array(starCount * 3); for (let i = 0; i < starCount * 3; i += 3) { const radius = 50 + Math.random() * 30; const theta = Math.random() * Math.PI * 2; const phi = Math.acos(Math.random() * 2 - 1); starPositions[i] = radius * Math.sin(phi) * Math.cos(theta); starPositions[i + 1] = radius * Math.sin(phi) * Math.sin(theta); starPositions[i + 2] = radius * Math.cos(phi); } starGeometry.setAttribute('position', new THREE.BufferAttribute(starPositions, 3)); const starMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 0.05, transparent: true, opacity: 0.8, blending: THREE.AdditiveBlending }); const stars = new THREE.Points(starGeometry, starMaterial); scene.add(stars); // Controls const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.05; controls.maxPolarAngle = Math.PI / 1.5; controls.minPolarAngle = Math.PI / 3; controls.enableZoom = false; // Define sections const sections = [ { cameraPos: new THREE.Vector3(0, 0, 4), watchRotation: new THREE.Euler(0, 0, 0), title: "DISCOVER", description: "Inspired by the Arctic night sky." }, { cameraPos: new THREE.Vector3(4, 1, 2), watchRotation: new THREE.Euler(0, -Math.PI / 2, 0), title: "PRECISION ENGINEERING", description: "Swiss automatic movement with 72-hour power reserve." }, { cameraPos: new THREE.Vector3(0, 3, 3), watchRotation: new THREE.Euler(-Math.PI / 4, 0, 0), title: "SAPPHIRE CRYSTAL", description: "Double-domed sapphire with anti-reflective coating." }, { cameraPos: new THREE.Vector3(-3, 1, 3), watchRotation: new THREE.Euler(0, Math.PI / 2, 0), title: "LUMINOUS DISPLAY", description: "Super-LumiNova indices and hands for perfect legibility in darkness." }, { cameraPos: new THREE.Vector3(2, -2, 3), watchRotation: new THREE.Euler(Math.PI / 4, 0, 0), title: "WATER RESISTANT", description: "200m water resistance with screw-down crown." }, { cameraPos: new THREE.Vector3(0, 0, 3), watchRotation: new THREE.Euler(0, Math.PI * 2, 0), title: "LIMITED EDITION", description: "Only 500 pieces available worldwide. Each piece individually numbered." } ]; let currentSection = 0; let targetCameraPos = sections[0].cameraPos.clone(); let targetWatchRotation = sections[0].watchRotation.clone(); let isTransitioning = false; function animate() { requestAnimationFrame(animate); const time = Date.now() * 0.001; // Update northern lights auroraMaterial.uniforms.time.value = time * 0.5; // Rotate watch hands hourHand.rotation.z = time * 0.1; minuteHand.rotation.z = time * 0.5; // Subtle watch floating watchBody.position.y = Math.sin(time * 0.5) * 0.05; // Camera transitions camera.position.lerp(targetCameraPos, 0.05); // Watch rotation watchBody.rotation.x += (targetWatchRotation.x - watchBody.rotation.x) * 0.05; watchBody.rotation.y += (targetWatchRotation.y - watchBody.rotation.y) * 0.05; watchBody.rotation.z += (targetWatchRotation.z - watchBody.rotation.z) * 0.05; // Slow star rotation stars.rotation.y = time * 0.01; controls.update(); renderer.render(scene, camera); } // Scroll handling let lastScrollTime = Date.now(); window.addEventListener('wheel', (event) => { const currentTime = Date.now(); if (currentTime - lastScrollTime < 1000) return; lastScrollTime = currentTime; if (!isTransitioning) { if (event.deltaY > 0 && currentSection < sections.length - 1) { currentSection++; updateSection(); } else if (event.deltaY < 0 && currentSection > 0) { currentSection--; updateSection(); } } }); function updateSection() { isTransitioning = true; targetCameraPos.copy(sections[currentSection].cameraPos); targetWatchRotation.copy(sections[currentSection].watchRotation); const titleElement = document.getElementById('section-title'); const descElement = document.getElementById('section-desc'); if (titleElement && descElement) { titleElement.textContent = sections[currentSection].title; descElement.textContent = sections[currentSection].description; } setTimeout(() => { isTransitioning = false; }, 1000); } // Handle window resize function onWindowResize() { const width = parentDiv.clientWidth; const height = parentDiv.clientHeight; camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); } window.addEventListener('resize', onWindowResize); const resizeObserver = new ResizeObserver(onWindowResize); resizeObserver.observe(parentDiv); // Initialize and start updateSection(); animate();