// Core imports import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // Add custom font const fontLink = document.createElement('link'); fontLink.href = 'https://fonts.googleapis.com/css2?family=Italiana&family=Cormorant:wght@300;400&display=swap'; fontLink.rel = 'stylesheet'; document.head.appendChild(fontLink); // Add background music const bgMusic = new Audio('https://play.rosebud.ai/assets/rosebud_official_theme_02.mp3?2ldE'); bgMusic.loop = true; bgMusic.volume = 0.3; // Add music control button const musicButton = document.createElement('button'); musicButton.innerHTML = '🔇'; musicButton.style.position = 'absolute'; musicButton.style.top = '20px'; musicButton.style.right = '20px'; musicButton.style.fontSize = '24px'; musicButton.style.background = 'none'; musicButton.style.border = 'none'; musicButton.style.cursor = 'pointer'; musicButton.onclick = () => { if (bgMusic.paused) { bgMusic.play(); musicButton.innerHTML = '🔊'; } else { bgMusic.pause(); musicButton.innerHTML = '🔇'; } }; // 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 = `

ATELIER

LUXURY FASHION

EXPLORE

Scroll to discover our collection.

`; parentDiv.appendChild(overlay); // Add customization UI const customizationUI = document.createElement('div'); customizationUI.style.position = 'absolute'; customizationUI.style.bottom = '40px'; customizationUI.style.left = '40px'; customizationUI.style.fontFamily = "'Cormorant', serif"; customizationUI.innerHTML = `

Customize

`; parentDiv.appendChild(customizationUI); // Scene setup const scene = new THREE.Scene(); scene.background = new THREE.Color(0xf8f8f8); const camera = new THREE.PerspectiveCamera(75, parentDiv.clientWidth / parentDiv.clientHeight, 0.1, 1000); camera.position.set(0, 5, 20); const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas, }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(parentDiv.clientWidth, parentDiv.clientHeight); // Lighting const ambientLight = new THREE.AmbientLight(0xffffff, 0.4); scene.add(ambientLight); const mainLight = new THREE.DirectionalLight(0xffffff, 0.8); mainLight.position.set(5, 5, 5); scene.add(mainLight); const fillLight = new THREE.DirectionalLight(0xffd4d4, 0.4); fillLight.position.set(-5, 3, -5); scene.add(fillLight); // Create sophisticated background const particleCount = 1000; const particleGeometry = new THREE.BufferGeometry(); const positions = new Float32Array(particleCount * 3); const colors = new Float32Array(particleCount * 3); for (let i = 0; i < particleCount * 3; i += 3) { positions[i] = (Math.random() - 0.5) * 100; positions[i + 1] = (Math.random() - 0.5) * 100; positions[i + 2] = (Math.random() - 0.5) * 50 - 25; colors[i] = Math.random(); colors[i + 1] = Math.random(); colors[i + 2] = Math.random(); } particleGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); particleGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3)); const particleShader = { uniforms: { time: { value: 0 }, baseColor: { value: new THREE.Color(0xf8f8f8) } }, vertexShader: ` attribute vec3 color; uniform float time; varying vec3 vColor; void main() { vColor = color; vec3 pos = position; pos.y += sin(time * 0.2 + position.x * 0.05) * 2.0; gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0); gl_PointSize = 3.0; } `, fragmentShader: ` varying vec3 vColor; uniform vec3 baseColor; void main() { float alpha = 0.5 * length(gl_PointCoord - vec2(0.5)); alpha = 1.0 - smoothstep(0.4, 0.5, alpha); gl_FragColor = vec4(mix(vColor, baseColor, 0.8), alpha * 0.3); } ` }; const particleMaterial = new THREE.ShaderMaterial({ uniforms: particleShader.uniforms, vertexShader: particleShader.vertexShader, fragmentShader: particleShader.fragmentShader, transparent: true, blending: THREE.AdditiveBlending }); const particleSystem = new THREE.Points(particleGeometry, particleMaterial); scene.add(particleSystem); // Create project data const projects = [{ title: "SILK EVENING GOWN", description: "Flowing silk charmeuse with draped neckline and asymmetrical hem", designerNotes: "Inspired by the fluidity of water, this gown embodies grace and elegance.", fabricDetails: "100% silk charmeuse, sourced from artisanal weavers in Italy." }, { title: "VELVET BLAZER", description: "Tailored velvet with architectural shoulders and metallic details", designerNotes: "A modern take on classic tailoring, blending luxury with edgy design.", fabricDetails: "Premium cotton velvet with a subtle sheen, adorned with custom metal buttons." }, { title: "PLEATED DRESS", description: "Metallic pleated dress with fluid movement and gradient effect", designerNotes: "This piece plays with light and movement, creating a mesmerizing visual effect.", fabricDetails: "Innovative pleated fabric with a unique metallic gradient dye technique." }, { title: "SATIN JUMPSUIT", description: "Luxurious satin jumpsuit with wide-leg silhouette", designerNotes: "Effortless sophistication meets modern simplicity in this versatile piece.", fabricDetails: "High-quality satin with a matte finish, providing both comfort and elegance." }]; // Background colors for each project const backgroundColors = [ new THREE.Color(0xf6e5e5), // Light pink for SILK EVENING GOWN new THREE.Color(0xe5e5f6), // Light purple for VELVET BLAZER new THREE.Color(0xe5f6f6), // Light cyan for PLEATED DRESS new THREE.Color(0xf6f6e5) // Light yellow for SATIN JUMPSUIT ]; // Create garment cards const cards = []; projects.forEach((project, index) => { const card = new THREE.Group(); // Create garment display let geometry; if (index === 0) { // Evening Gown geometry = new THREE.ConeGeometry(1.5, 4, 32, 1, false, 0, Math.PI * 2); } else if (index === 1) { // Blazer geometry = new THREE.BoxGeometry(3, 4, 1); } else if (index === 2) { // Pleated Dress geometry = new THREE.CylinderGeometry(1, 1.5, 4, 32, 8); const positionAttribute = geometry.getAttribute('position'); for (let i = 0; i < positionAttribute.count; i++) { const y = positionAttribute.getY(i); const x = positionAttribute.getX(i); const z = positionAttribute.getZ(i); positionAttribute.setXYZ(i, x, y, z + Math.sin(y * 5) * 0.1); } geometry.computeVertexNormals(); } else { // Jumpsuit geometry = new THREE.CylinderGeometry(0.8, 1.2, 4, 32, 1); } const material = new THREE.MeshPhysicalMaterial({ color: new THREE.Color().setHSL(index * 0.25, 0.5, 0.6), metalness: 0.3, roughness: 0.7, clearcoat: 1, clearcoatRoughness: 0.2 }); const mesh = new THREE.Mesh(geometry, material); mesh.userData.initialColor = material.color.clone(); card.add(mesh); // Position card const angle = (index / projects.length) * Math.PI * 2; card.position.x = Math.cos(angle) * 12; card.position.z = Math.sin(angle) * 12; card.rotation.y = -angle + Math.PI / 2; cards.push({ mesh: card, title: project.title, description: project.description, initialPosition: card.position.clone() }); scene.add(card); }); // Controls const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.05; controls.maxDistance = 30; controls.minDistance = 10; controls.autoRotate = true; controls.autoRotateSpeed = 0.5; // Animation variables let currentRotation = 0; let targetRotation = 0; let currentCard = 0; // Animation loop function animate() { requestAnimationFrame(animate); const time = Date.now() * 0.001; // Animate background particles particleShader.uniforms.time.value = time; // Animate cards cards.forEach((card, index) => { card.mesh.position.y = Math.sin(time + index) * 0.2; card.mesh.rotation.z = Math.sin(time + index) * 0.05; }); // Update rotation currentRotation += (targetRotation - currentRotation) * 0.1; scene.rotation.y = currentRotation; // Update current card based on rotation const newCurrentCard = Math.round(((currentRotation % (Math.PI * 2)) + Math.PI * 2) % (Math.PI * 2) / (Math.PI * 2 / cards.length)) % cards.length; if (newCurrentCard !== currentCard) { currentCard = newCurrentCard; updateCardInfo(currentCard); } updateBackground(currentCard); controls.update(); renderer.render(scene, camera); } // Scroll handling window.addEventListener('wheel', (event) => { targetRotation += event.deltaY * 0.001; }); function updateCardInfo(index) { const titleElement = document.getElementById('project-title'); const descElement = document.getElementById('project-desc'); const notesElement = document.getElementById('designer-notes'); if (titleElement && descElement && notesElement) { titleElement.textContent = cards[index].title; descElement.textContent = cards[index].description; notesElement.textContent = `Designer's Notes: ${projects[index].designerNotes}\n\nFabric Details: ${projects[index].fabricDetails}`; } // Highlight the current card cards.forEach((card, i) => { const cardMesh = card.mesh.children[0]; if (i === index) { // Brighten the current card cardMesh.material.emissive.setRGB(0.2, 0.2, 0.2); } else { // Reset emissive for other cards cardMesh.material.emissive.setRGB(0, 0, 0); } // Maintain custom color if set if (cardMesh.userData.customColor) { cardMesh.material.color.setStyle(cardMesh.userData.customColor); } else { cardMesh.material.color.copy(cardMesh.userData.initialColor); } }); updateBackground(index); } function updateBackground(index) { const currentColor = backgroundColors[index]; const nextColor = backgroundColors[(index + 1) % backgroundColors.length]; const t = (currentRotation % (Math.PI * 2 / cards.length)) / (Math.PI * 2 / cards.length); const blendedColor = new THREE.Color().lerpColors(currentColor, nextColor, t); scene.background = blendedColor; particleShader.uniforms.baseColor.value = blendedColor; } // 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); // Customization functions function changeColor(color) { cards.forEach((card, index) => { const cardMesh = card.mesh.children[0]; cardMesh.material.color.setStyle(color); cardMesh.userData.customColor = color; }); } function changeFabric(fabricType) { const currentCardMesh = cards[currentCard].mesh.children[0]; let roughness, metalness; switch (fabricType) { case 'silk': roughness = 0.3; metalness = 0.2; break; case 'velvet': roughness = 0.9; metalness = 0.1; break; case 'satin': roughness = 0.1; metalness = 0.5; break; } currentCardMesh.material.roughness = roughness; currentCardMesh.material.metalness = metalness; } // Add event listeners for customization buttons document.getElementById('color-mauve').addEventListener('click', () => changeColor('#E0B0FF')); document.getElementById('color-sage').addEventListener('click', () => changeColor('#B2AC88')); document.getElementById('color-dusty-blue').addEventListener('click', () => changeColor('#8E9FAD')); document.getElementById('color-soft-coral').addEventListener('click', () => changeColor('#F88379')); document.getElementById('color-mint-green').addEventListener('click', () => changeColor('#98FF98')); document.getElementById('color-lavender').addEventListener('click', () => changeColor('#E6E6FA')); document.getElementById('fabric-silk').addEventListener('click', () => changeFabric('silk')); document.getElementById('fabric-velvet').addEventListener('click', () => changeFabric('velvet')); document.getElementById('fabric-satin').addEventListener('click', () => changeFabric('satin')); // Initialize and start updateCardInfo(0); animate();