// 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=Cormorant+Garamond:ital,wght@0,300;1,300&family=Montserrat:wght@200;300;400&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 = `

PORTFOLIO

Digital Artistry & Development

Exploring the boundaries between technology and aesthetics through interactive digital experiences.

SCROLL TO EXPLORE

`; parentDiv.appendChild(overlay); // Scene setup const scene = new THREE.Scene(); scene.background = new THREE.Color(0xf5f0f5); // Soft pink-gray const camera = new THREE.PerspectiveCamera(70, parentDiv.clientWidth / parentDiv.clientHeight, 0.1, 1000); camera.position.set(0, 0, 12); 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(0xfcf0f0, 0.8); mainLight.position.set(10, 10, 10); scene.add(mainLight); const fillLight = new THREE.DirectionalLight(0xf0f0fc, 0.4); fillLight.position.set(-10, -10, -10); scene.add(fillLight); // Project data const projects = [{ title: "ETHEREAL GARDEN", description: "An immersive digital garden that grows and evolves based on real-time weather data and visitor interactions.", details: "WebGL • Real-time Data • Interactive Animation", color: 0xe6d7ea // Soft lavender }, { title: "WAVE POEMS", description: "Generated poetry visualized as dynamic ocean waves, creating a mesmerizing connection between words and motion.", details: "Neural Networks • Three.js • Web Audio API", color: 0xd7eae6 // Seafoam }, { title: "LIGHT THREADS", description: "A delicate visualization of social connections, weaving digital threads between shared stories and memories.", details: "Particle Systems • Social API • Real-time Collaboration", color: 0xead7d7 // Soft rose }, { title: "COSMIC RHYTHMS", description: "Transform astronomical data into an interactive musical and visual experience of the cosmos.", details: "Data Sonification • WebGL • Generative Art", color: 0xd7e6ea // Pale blue }]; // Create cards const cards = []; projects.forEach((project, index) => { const card = new THREE.Group(); // Card base const geometry = new THREE.BoxGeometry(4, 3, 0.1); const material = new THREE.MeshPhysicalMaterial({ color: project.color, metalness: 0.1, roughness: 0.4, transparent: true, opacity: 0.9 }); const mesh = new THREE.Mesh(geometry, material); card.add(mesh); // Position card const angle = (index / projects.length) * Math.PI * 2; const radius = 8; card.position.x = Math.cos(angle) * radius; card.position.z = Math.sin(angle) * radius; card.rotation.y = -angle + Math.PI / 2; cards.push({ mesh: card, title: project.title, description: project.description, details: project.details, initialPosition: card.position.clone() }); scene.add(card); }); // Create particle system const particleCount = 1000; const particleGeometry = new THREE.BufferGeometry(); const particlePositions = new Float32Array(particleCount * 3); for (let i = 0; i < particleCount * 3; i += 3) { particlePositions[i] = (Math.random() - 0.5) * 50; particlePositions[i + 1] = (Math.random() - 0.5) * 50; particlePositions[i + 2] = (Math.random() - 0.5) * 50; } particleGeometry.setAttribute('position', new THREE.BufferAttribute(particlePositions, 3)); const particleMaterial = new THREE.PointsMaterial({ color: 0xe1e1e6, size: 0.05, transparent: true, opacity: 0.4 }); const particles = new THREE.Points(particleGeometry, particleMaterial); scene.add(particles); // Controls const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.05; controls.maxDistance = 20; controls.minDistance = 8; controls.autoRotate = true; controls.autoRotateSpeed = 0.2; controls.enableZoom = false; // Animation variables let currentCard = 0; let isTransitioning = false; // Animation loop function animate() { requestAnimationFrame(animate); const time = Date.now() * 0.001; // Animate cards cards.forEach((card, index) => { const offset = Math.sin(time + index) * 0.1; card.mesh.position.y = offset; card.mesh.rotation.z = Math.sin(time * 0.5 + index) * 0.02; }); // Rotate particles particles.rotation.y = time * 0.02; controls.update(); renderer.render(scene, camera); } // Scroll handling let lastScrollTime = Date.now(); let targetRotation = 0; let currentRotation = 0; window.addEventListener('wheel', (event) => { const currentTime = Date.now(); if (currentTime - lastScrollTime < 200 || isTransitioning) return; lastScrollTime = currentTime; const rotationAmount = Math.PI / 2; // 90 degrees in radians if (event.deltaY > 0) { targetRotation += rotationAmount; } else if (event.deltaY < 0) { targetRotation -= rotationAmount; } animateRotation(); }); function animateRotation() { isTransitioning = true; const duration = 800; const startTime = Date.now(); const startRotation = currentRotation; function update() { const now = Date.now(); const progress = Math.min(1, (now - startTime) / duration); const easeProgress = 1 - Math.pow(1 - progress, 3); // Cubic ease-out currentRotation = startRotation + (targetRotation - startRotation) * easeProgress; scene.rotation.y = currentRotation; if (progress < 1) { requestAnimationFrame(update); } else { isTransitioning = false; updateCard(); } } update(); } function updateCard() { const currentIndex = Math.round(currentRotation / (Math.PI / 2)) % cards.length; if (currentIndex < 0) currentIndex += cards.length; const titleElement = document.getElementById('project-title'); const descElement = document.getElementById('project-desc'); const detailsElement = document.getElementById('project-details'); titleElement.textContent = cards[currentIndex].title; descElement.textContent = cards[currentIndex].description; detailsElement.textContent = cards[currentIndex].details; // Fade in titleElement.style.opacity = 1; descElement.style.opacity = 1; detailsElement.style.opacity = 1; } // 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 updateCard(); animate();