// 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=Montserrat: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 = `

PORTFOLIO

CREATIVE DEVELOPER

EXPLORE

Scroll to discover my projects.

`; parentDiv.appendChild(overlay); // Scene setup const scene = new THREE.Scene(); scene.background = new THREE.Color(0x000000); // Black background for contrast const camera = new THREE.PerspectiveCamera(75, parentDiv.clientWidth / parentDiv.clientHeight, 0.1, 1000); camera.position.set(0, 5, 20); // Adjusted camera position 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.2); scene.add(ambientLight); // Create a 3D ellipsoid for red lighting const ellipsoidGeometry = new THREE.SphereGeometry(3, 32, 32); ellipsoidGeometry.scale(1, 0.5, 0.75); // Make it ellipsoidal const redLightMaterial = new THREE.ShaderMaterial({ uniforms: { time: { value: 0 } }, vertexShader: ` varying vec3 vNormal; void main() { vNormal = normalize(normalMatrix * normal); gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform float time; varying vec3 vNormal; void main() { float intensity = 0.5 + 0.5 * sin(time * 2.0); vec3 glow = vec3(1.0, 0.2, 0.1) * intensity; float fresnel = pow(1.0 - dot(vNormal, vec3(0.0, 0.0, 1.0)), 2.0); vec3 color = mix(glow, vec3(1.0, 0.5, 0.3), fresnel); gl_FragColor = vec4(color, 1.0); } `, transparent: true, blending: THREE.AdditiveBlending }); const redLightEllipsoid = new THREE.Mesh(ellipsoidGeometry, redLightMaterial); redLightEllipsoid.position.set(0, 5, 0); scene.add(redLightEllipsoid); // Add a point light inside the ellipsoid for additional illumination const redPointLight = new THREE.PointLight(0xff3333, 2, 20); redPointLight.position.copy(redLightEllipsoid.position); scene.add(redPointLight); // Keep the cyan and yellow lights const cyanLight = new THREE.PointLight(0x00ffff, 1, 20); cyanLight.position.set(-10, -10, -10); scene.add(cyanLight); const yellowLight = new THREE.PointLight(0xffff00, 1, 20); yellowLight.position.set(0, 10, -10); scene.add(yellowLight); // Add environment map const envMapTexture = new THREE.TextureLoader().load('https://play.rosebud.ai/assets/3D_playground_grass_diffuse.png?BFYP'); envMapTexture.mapping = THREE.EquirectangularReflectionMapping; scene.environment = envMapTexture; // Create project cards const projects = [{ title: "WEB APPS", description: "Interactive experiences built with modern frameworks" }, { title: "3D DESIGN", description: "Creative Three.js and WebGL projects" }, { title: "UI/UX", description: "Clean, intuitive interface designs" }, { title: "MOBILE", description: "Cross-platform mobile applications" }, { title: "AR/VR", description: "Immersive augmented and virtual reality experiences" }, { title: "AI INTEGRATION", description: "Smart applications powered by machine learning" }, { title: "DATA VISUALIZATION", description: "Beautiful and informative data representations" }, { title: "GAME DEVELOPMENT", description: "Engaging browser-based and mobile games" }]; 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: 0xffffff, metalness: 0.9, roughness: 0.1, transparent: true, opacity: 0.8, envMapIntensity: 1, clearcoat: 1, clearcoatRoughness: 0.1 }); const mesh = new THREE.Mesh(geometry, material); card.add(mesh); // Position card const angle = (index / projects.length) * Math.PI * 2; card.position.x = Math.cos(angle) * 12; // Increased radius card.position.z = Math.sin(angle) * 12; // Increased radius card.rotation.y = -angle + Math.PI / 2; cards.push({ mesh: card, title: project.title, description: project.description, initialPosition: card.position.clone() }); scene.add(card); }); // Northern Lights background const auroraGeometry = new THREE.PlaneGeometry(100, 50, 200, 100); const auroraMaterial = new THREE.ShaderMaterial({ uniforms: { time: { value: 0 }, resolution: { value: new THREE.Vector2(parentDiv.clientWidth, parentDiv.clientHeight) }, }, vertexShader: ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform float time; uniform vec2 resolution; varying vec2 vUv; float noise(vec2 p) { return sin(p.x * 10.) * sin(p.y * 10.); } vec3 rgb2hsv(vec3 c) { vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0); vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g)); vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r)); float d = q.x - min(q.w, q.y); float e = 1.0e-10; return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x); } vec3 hsv2rgb(vec3 c) { vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www); return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y); } void main() { vec2 uv = vUv * 2.0 - 1.0; vec3 color = vec3(0.0); float r = length(uv) * 2.0; float theta = atan(uv.y, uv.x); float intensity = 0.5 + 0.5 * sin(5.0 * theta + time * 0.5); intensity += 0.2 * noise(uv + time * 0.1); // Create a base color with high saturation vec3 baseColor1 = hsv2rgb(vec3(fract(time * 0.1), 0.8, 1.0)); // Shifting hue vec3 baseColor2 = hsv2rgb(vec3(fract(time * 0.1 + 0.33), 0.8, 1.0)); // Shifting hue vec3 baseColor3 = hsv2rgb(vec3(fract(time * 0.1 + 0.66), 0.8, 1.0)); // Shifting hue // Blend colors based on position and time float t1 = sin(uv.x * 4.0 + time * 0.5) * 0.5 + 0.5; float t2 = sin(uv.y * 4.0 + time * 0.7) * 0.5 + 0.5; vec3 blendedColor = mix(baseColor1, baseColor2, t1); blendedColor = mix(blendedColor, baseColor3, t2); // Apply intensity and smooth falloff color = blendedColor * intensity; color *= smoothstep(1.0, 0.2, r); // Add misty effect float mist = smoothstep(0.5, 0.0, r) * 0.5; color = mix(color, vec3(1.0), mist); gl_FragColor = vec4(color, 1.0); } `, transparent: true, depthWrite: false, }); const auroraPlane = new THREE.Mesh(auroraGeometry, auroraMaterial); auroraPlane.position.z = -20; auroraPlane.rotation.x = -Math.PI / 4; scene.add(auroraPlane); // Controls const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.05; controls.maxDistance = 30; // Increased max distance controls.minDistance = 10; // Increased min distance controls.autoRotate = true; controls.autoRotateSpeed = 0.5; // Slowed down auto-rotation // Animation variables let currentRotation = 0; let targetRotation = 0; let currentCard = 0; // Animation loop function animate() { requestAnimationFrame(animate); const time = Date.now() * 0.0005; // 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; }); // Animate northern lights auroraPlane.material.uniforms.time.value = time; // Animate red light ellipsoid redLightEllipsoid.material.uniforms.time.value = time; redLightEllipsoid.position.y = 5 + Math.sin(time) * 0.5; redLightEllipsoid.rotation.y = time * 0.5; redLightEllipsoid.rotation.x = Math.sin(time * 0.7) * 0.2; // Update the position of the point light inside the ellipsoid redPointLight.position.copy(redLightEllipsoid.position); // Update rotation updateRotation(); // Update controls controls.update(); renderer.render(scene, camera); } // Scroll handling const rotationSpeed = 0.1; window.addEventListener('wheel', (event) => { targetRotation += event.deltaY * 0.001; }); function updateRotation() { currentRotation += (targetRotation - currentRotation) * rotationSpeed; scene.rotation.y = currentRotation; // Update current card based on rotation currentCard = Math.round(((currentRotation % (Math.PI * 2)) + Math.PI * 2) % (Math.PI * 2) / (Math.PI * 2 / cards.length)) % cards.length; updateCardInfo(currentCard); } function updateCardInfo(index) { const titleElement = document.getElementById('project-title'); const descElement = document.getElementById('project-desc'); if (titleElement && descElement) { titleElement.textContent = cards[index].title; descElement.textContent = cards[index].description; } } // 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 updateCardInfo(0); // Initialize with the first card animate();