import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { OBJLoader } from 'three/addons/loaders/OBJLoader.js'; // Initialize scene elements const parentDiv = document.getElementById('renderDiv'); let canvas = document.getElementById('threeRenderCanvas'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Create HTML overlay for product showcase 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.style.zIndex = '2'; overlay.innerHTML = `

Imperial Heritage Collection

The Sovereign's Signet

Forged in the traditions of ancient nobility, this masterfully crafted signet ring bears the weight of centuries of craftsmanship. Each ornate detail tells a story of power and legacy.

Metal 18K Gold

Era Neo-Gothic

Origin Master Guild

Behold from Every Angle

`; parentDiv.appendChild(overlay); // Scene setup const scene = new THREE.Scene(); scene.background = new THREE.Color(0x080808); const camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.set(0, 0.1, 1.5); const renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true, alpha: true }); const viewportWidth = window.innerWidth * 0.6; // 60% of window width const viewportHeight = window.innerHeight; renderer.setSize(viewportWidth, viewportHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Enhanced lighting setup const ambientLight = new THREE.AmbientLight(0xffffff, 0.8); scene.add(ambientLight); const mainLight = new THREE.SpotLight(0xffffff, 1.5); mainLight.position.set(2, 3, 4); mainLight.castShadow = true; mainLight.shadow.bias = -0.0001; scene.add(mainLight); const rimLight = new THREE.DirectionalLight(0x00ffff, 0.3); rimLight.position.set(-5, 0, -5); scene.add(rimLight); // Controls const controls = new OrbitControls(camera, canvas); controls.enableDamping = true; controls.dampingFactor = 0.05; controls.enableZoom = false; controls.enablePan = false; controls.autoRotate = false; controls.enableRotate = true; controls.minDistance = 1; controls.maxDistance = 3; controls.rotateSpeed = 0.5; // Load chair model with enhanced materials const objLoader = new OBJLoader(); let chairModel; objLoader.load( 'https://play.rosebud.ai/assets/ring_ornamental_design.obj?qOWs', (object) => { chairModel = object; chairModel.scale.set(0.03, 0.03, 0.03); chairModel.position.set(0, 0, 0); chairModel.rotation.set(0, 0, 0); // Create sophisticated material const material = new THREE.MeshPhysicalMaterial({ color: 0xffd700, // Gold color metalness: 0.9, roughness: 0.1, clearcoat: 1.0, clearcoatRoughness: 0.1, }); chairModel.traverse((child) => { if (child instanceof THREE.Mesh) { child.material = material; child.castShadow = true; child.receiveShadow = true; } }); scene.add(chairModel); } ); // Add CSS styles const style = document.createElement('style'); style.textContent = ` @import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&family=Work+Sans:wght@300;400;600&display=swap'); #renderDiv { position: relative; width: 100vw; height: 100vh; background: #080808; overflow: hidden; display: flex; justify-content: flex-end; } #threeRenderCanvas { position: fixed; right: 0; top: 0; width: 60% !important; height: 100% !important; background: transparent; } .product-showcase { width: 100%; height: 100%; color: white; font-family: 'Work Sans', sans-serif; } .header { position: fixed; top: 0; left: 0; width: 100%; padding: 2rem 4rem; display: flex; justify-content: space-between; align-items: center; z-index: 10; } .logo { font-family: 'Syncopate', sans-serif; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.3em; } nav { display: flex; gap: 3rem; } .nav-link { color: white; text-decoration: none; font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; transition: opacity 0.3s ease; } .nav-link:hover { opacity: 1; } .content { position: absolute; left: 4rem; bottom: 4rem; max-width: 500px; width: 35%; } .product-info h1 { font-family: 'Syncopate', sans-serif; font-size: 1rem; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 1rem; color: #c9a655; } .product-info h2 { font-size: 3rem; font-weight: 300; line-height: 1.2; margin-bottom: 1.5rem; } .description { font-size: 1rem; line-height: 1.6; opacity: 0.7; margin-bottom: 2rem; } .specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 2rem; } .spec-item { display: flex; flex-direction: column; gap: 0.5rem; } .label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.5; } .value { font-size: 0.9rem; font-weight: 600; } .cta-button { background: #c9a655; border: none; color: #000; padding: 1rem 2rem; font-family: 'Work Sans', sans-serif; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.2em; cursor: pointer; transition: all 0.3s ease; } .cta-button:hover { background: #dabf77; color: #000; box-shadow: 0 0 20px rgba(201, 166, 85, 0.3); } .scroll-indicator { position: fixed; right: 4rem; bottom: 4rem; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; font-size: 0.9rem; letter-spacing: 0.1em; } .mouse { width: 30px; height: 30px; border: 2px solid white; border-radius: 50%; position: relative; } .mouse::before { content: ''; width: 8px; height: 8px; border-top: 2px solid white; border-right: 2px solid white; position: absolute; right: -2px; top: 50%; transform: translateY(-50%) rotate(45deg); animation: rotate 1.5s infinite; } @keyframes rotate { 0% { transform: translateY(-50%) rotate(45deg); opacity: 0; } 50% { transform: translateY(-50%) rotate(45deg); opacity: 1; } 100% { transform: translateY(-50%) rotate(405deg); opacity: 0; } } `; document.head.appendChild(style); // Animation loop with floating effect function animate() { requestAnimationFrame(animate); if (chairModel) { // Add gentle floating motion const time = Date.now() * 0.001; // Convert to seconds chairModel.position.y = Math.sin(time) * 0.02; // Subtle vertical movement chairModel.rotation.y = Math.sin(time * 0.5) * 0.1; // Subtle rotation } controls.update(); renderer.render(scene, camera); } // Handle window resize function onWindowResize() { const viewportWidth = window.innerWidth * 0.6; const viewportHeight = window.innerHeight; camera.aspect = viewportWidth / viewportHeight; camera.updateProjectionMatrix(); renderer.setSize(viewportWidth, viewportHeight); } window.addEventListener('resize', onWindowResize); animate();