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 = `

Ethereal Series

Nexium-01 Chair

Experience unparalleled comfort wrapped in timeless design. Crafted with premium materials and meticulous attention to detail.

Design Ergonomic

Material Premium Steel

Finish Metallic

Rotate to Explore

`; 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, 6, 16); 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.5); scene.add(ambientLight); const mainLight = new THREE.SpotLight(0xffffff, 1); mainLight.position.set(5, 5, 5); 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 = true; controls.autoRotateSpeed = 1; controls.minPolarAngle = Math.PI / 2.5; controls.maxPolarAngle = Math.PI / 2; // Load chair model with enhanced materials const objLoader = new OBJLoader(); let chairModel; objLoader.load( 'https://play.rosebud.ai/assets/DesignChair1.obj?adSs', (object) => { chairModel = object; chairModel.scale.set(1.6, 1.6, 1.6); chairModel.position.set(0, -2.5, 0); // Create sophisticated material const material = new THREE.MeshPhysicalMaterial({ color: 0x303030, metalness: 0.9, roughness: 0.1, clearcoat: 0.5, clearcoatRoughness: 0.3, reflectivity: 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: #00ffff; } .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: transparent; border: 1px solid white; color: white; 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: white; color: black; } .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 function animate() { requestAnimationFrame(animate); 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();