import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; let camera, scene, renderer; let spheres = []; let personGroup; let smokeParticles = []; let stars; let matrixLines = []; // New array for matrix lines let arcObject1, arcObject2; // Two arcs for the incomplete circle let dreamLights = []; // For the curvy dream light streaks let eyeSymbol; // For the spiritual eye symbol const NUM_SPHERES = 70; // Increased spheres for more ethereal feel const NUM_TREES = 100; // Number of abstract trees const NUM_SMOKE_PARTICLES = 5; const NUM_STARS = 1000; // Number of stars to sprinkle const NUM_MATRIX_LINES = 150; // Number of matrix lines for the effect const NUM_DREAM_LIGHTS = 10; // Number of dream light streaks function init() { // Scene setup scene = new THREE.Scene(); scene.background = new THREE.Color(0x1a2a3a); // Slightly lighter dark blue background scene.fog = new THREE.Fog(0x2a3a4a, 1, 150); // Adding atmospheric fog for depth and color // Camera setup camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 10, 50); // Adjusted camera position to view the forest and person, and floor // Renderer setup renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // OrbitControls const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.05; controls.screenSpacePanning = false; controls.minDistance = 10; controls.maxDistance = 100; controls.maxPolarAngle = Math.PI / 2; // Lighting const ambientLight = new THREE.AmbientLight(0x4a6a8a); // Muted blue-green ambient, slightly brighter scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0x7ac9b3, 0.6); // Soft green-blue light directionalLight.position.set(10, 20, 10); directionalLight.castShadow = true; scene.add(directionalLight); const pointLight = new THREE.PointLight(0x5a7aaf, 0.5, 150); pointLight.position.set(-15, 10, -15); scene.add(pointLight); // Checkerboard Floor const floorSize = 100; const tileSize = 5; // Size of each checker square const numTiles = floorSize / tileSize; const canvas = document.createElement('canvas'); canvas.width = tileSize * 2; canvas.height = tileSize * 2; const context = canvas.getContext('2d'); context.fillStyle = '#000000'; // Black for one square context.fillRect(0, 0, tileSize * 2, tileSize * 2); context.fillStyle = '#FFFFFF'; // White for the other context.fillRect(0, 0, tileSize, tileSize); context.fillRect(tileSize, tileSize, tileSize, tileSize); const texture = new THREE.CanvasTexture(canvas); texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(numTiles / 2, numTiles / 2); // Repeat the 2x2 pattern across the floor const floorGeometry = new THREE.PlaneGeometry(floorSize, floorSize); const floorMaterial = new THREE.MeshPhongMaterial({ map: texture }); const floor = new THREE.Mesh(floorGeometry, floorMaterial); floor.rotation.x = -Math.PI / 2; // Rotate to be horizontal floor.position.y = 0; // Set at the ground level scene.add(floor); // Create abstract forest const treeMaterial = new THREE.MeshPhongMaterial({ color: 0x1a3a4a, flatShading: true }); for (let i = 0; i < NUM_TREES; i++) { const treeHeight = 10 + Math.random() * 20; const treeRadius = 0.5 + Math.random() * 1.5; const treeGeometry = new THREE.CylinderGeometry(treeRadius, treeRadius, treeHeight, 8); const tree = new THREE.Mesh(treeGeometry, treeMaterial); tree.position.x = (Math.random() - 0.5) * 80; tree.position.y = treeHeight / 2; tree.position.z = (Math.random() - 0.5) * 80; if (Math.abs(tree.position.x) < 5 && Math.abs(tree.position.z) < 5) { tree.position.x += Math.sign(tree.position.x || Math.random() - 0.5) * 10; tree.position.z += Math.sign(tree.position.z || Math.random() - 0.5) * 10; } scene.add(tree); } // Create the moody individual (abstracted) personGroup = new THREE.Group(); const bodyGeometry = new THREE.CylinderGeometry(1.5, 2, 8, 8); const headGeometry = new THREE.SphereGeometry(1.5, 16, 16); const armGeometry = new THREE.CylinderGeometry(0.5, 0.5, 4, 8); const personMaterial = new THREE.MeshPhongMaterial({ color: 0x101010 }); const body = new THREE.Mesh(bodyGeometry, personMaterial); body.position.y = 4; // Center of body at y=4 personGroup.add(body); const head = new THREE.Mesh(headGeometry, personMaterial); head.position.y = 9.5; // On top of the body personGroup.add(head); // Simple arm holding something (like a cigarette) const arm = new THREE.Mesh(armGeometry, personMaterial); arm.position.set(2.5, 6, 0.5); arm.rotation.z = Math.PI / 4; // Angled arm personGroup.add(arm); personGroup.position.y = 0; // Standing on the ground scene.add(personGroup); // Create smoke particles const smokeMaterial = new THREE.MeshBasicMaterial({ color: 0xaaaaaa, transparent: true, opacity: 0.3, blending: THREE.AdditiveBlending }); const smokeGeometry = new THREE.SphereGeometry(0.5, 8, 8); for (let i = 0; i < NUM_SMOKE_PARTICLES; i++) { const smoke = new THREE.Mesh(smokeGeometry, smokeMaterial.clone()); smoke.initialPosition = new THREE.Vector3(0, 8.5, 1.5); // Near the person's mouth/hand smoke.position.copy(smoke.initialPosition); smoke.scale.setScalar(0.1 + Math.random() * 0.2); // Start small smoke.velocity = new THREE.Vector3( (Math.random() - 0.5) * 0.02, 0.05 + Math.random() * 0.05, (Math.random() - 0.5) * 0.02); smoke.lifetime = 0; smoke.maxLifetime = 2 + Math.random() * 3; // How long it lasts personGroup.add(smoke); smokeParticles.push(smoke); } // Create spheres (now more like magical forest lights with soft colors) const sphereGeometry = new THREE.SphereGeometry(1, 32, 32); const softColors = [ new THREE.Color(0xcb99c9), // Lilac new THREE.Color(0xe0bbed), // Lavender new THREE.Color(0x9fa8da), // Pastel Indigo new THREE.Color(0xb2b2b2), // Soft grey (for variety) new THREE.Color(0xa7bed3) // Soft blue ]; for (let i = 0; i < NUM_SPHERES; i++) { const color = softColors[Math.floor(Math.random() * softColors.length)]; const sphereMaterial = new THREE.MeshPhongMaterial({ color: color, flatShading: false, transparent: true, opacity: 0.8 }); const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); sphere.position.x = (Math.random() - 0.5) * 60; sphere.position.y = (Math.random() - 0.5) * 30 + 10; sphere.position.z = (Math.random() - 0.5) * 60; sphere.scale.setScalar(0.3 + Math.random() * 1.0); scene.add(sphere); spheres.push(sphere); } // Create stars as triangles using InstancedMesh const triangleShape = new THREE.Shape(); triangleShape.moveTo(0, 1); triangleShape.lineTo(-0.866, -0.5); triangleShape.lineTo(0.866, -0.5); triangleShape.lineTo(0, 1); // Close the shape const triangleGeometry = new THREE.ShapeGeometry(triangleShape); const starMaterial = new THREE.MeshBasicMaterial({ vertexColors: true, transparent: true, opacity: 0.8, blending: THREE.AdditiveBlending, side: THREE.DoubleSide }); stars = new THREE.InstancedMesh(triangleGeometry, starMaterial, NUM_STARS); const dummy = new THREE.Object3D(); const starColor = new THREE.Color(); const starFieldRadius = 150; for (let i = 0; i < NUM_STARS; i++) { dummy.position.x = (Math.random() - 0.5) * 2 * starFieldRadius; dummy.position.y = (Math.random() - 0.5) * 2 * starFieldRadius; dummy.position.z = (Math.random() - 0.5) * 2 * starFieldRadius; dummy.rotation.z = Math.random() * Math.PI * 2; // Random rotation const scale = 0.5 + Math.random() * 1.5; // Random scale dummy.scale.setScalar(scale); dummy.updateMatrix(); stars.setMatrixAt(i, dummy.matrix); const hue = 0.6 + Math.random() * 0.2; // Blue-purple range for background splash const saturation = 0.7 + Math.random() * 0.3; const lightness = 0.7 + Math.random() * 0.3; starColor.setHSL(hue, saturation, lightness); stars.setColorAt(i, starColor); } stars.instanceMatrix.needsUpdate = true; stars.instanceColor.needsUpdate = true; scene.add(stars); // Create first arc above the trees const arcRadius = 70; const tubeRadius = 1; const radialSegments = 32; const tubularSegments = 64; const arcGeometry = new THREE.TorusGeometry(arcRadius, tubeRadius, radialSegments, tubularSegments, Math.PI); // Half circle const arcMaterial = new THREE.MeshBasicMaterial({ color: 0x88bbff, // Soft blue glow transparent: true, opacity: 0.6, blending: THREE.AdditiveBlending }); arcObject1 = new THREE.Mesh(arcGeometry, arcMaterial); arcObject1.rotation.x = Math.PI / 2; // Orient horizontally arcObject1.position.y = 40; // Position above trees arcObject1.position.z = -10; // Slightly in the background scene.add(arcObject1); // Create second arc to form an incomplete circle // Rotate this arc by 180 degrees around its local Y-axis relative to the first arc's orientation arcObject2 = new THREE.Mesh(arcGeometry, arcMaterial); arcObject2.rotation.x = Math.PI / 2; // Same orientation as the first arcObject2.rotation.y = Math.PI; // Rotate by 180 degrees to complete the circle with a gap arcObject2.position.y = 40; // Same position as the first arcObject2.position.z = -10; scene.add(arcObject2); // Create Matrix Lines const matrixLineMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff88, // Bright green for matrix effect transparent: true, opacity: 0.7, blending: THREE.AdditiveBlending }); const matrixLineGeometry = new THREE.BoxGeometry(0.2, 3, 0.2); // Thin, tall box for a line for (let i = 0; i < NUM_MATRIX_LINES; i++) { const line = new THREE.Mesh(matrixLineGeometry, matrixLineMaterial.clone()); line.position.x = (Math.random() - 0.5) * 100; line.position.y = Math.random() * 60 + 20; // Start high up line.position.z = (Math.random() - 0.5) * 100; line.velocity = 0.1 + Math.random() * 0.3; // Speed of falling line.rotationSpeed = (Math.random() - 0.5) * 0.02; // Subtle rotation scene.add(line); matrixLines.push(line); } // Create Dream Lights / Smoke Branches const dreamLightMaterial = new THREE.MeshBasicMaterial({ color: 0xffe0b2, // Soft, warm glow (peach/orange hue) transparent: true, opacity: 0.0, blending: THREE.AdditiveBlending, side: THREE.DoubleSide }); for (let i = 0; i < NUM_DREAM_LIGHTS; i++) { const points = []; const numPoints = 10 + Math.floor(Math.random() * 10); const baseHeight = 10 + Math.random() * 20; // Base height similar to trees const horizontalSpread = 20; const verticalSpread = 10; for (let j = 0; j < numPoints; j++) { const x = (Math.random() - 0.5) * horizontalSpread; const y = baseHeight + (Math.random() - 0.5) * verticalSpread; const z = (Math.random() - 0.5) * horizontalSpread; points.push(new THREE.Vector3(x, y, z)); } const curve = new THREE.CatmullRomCurve3(points); const tubeGeometry = new THREE.TubeGeometry(curve, 20, 0.3, 8, false); const dreamLight = new THREE.Mesh(tubeGeometry, dreamLightMaterial.clone()); dreamLight.position.x = (Math.random() - 0.5) * 80; dreamLight.position.z = (Math.random() - 0.5) * 80; dreamLight.position.y = 0; // Position relative to the base of the trees dreamLight.userData = { phase: Math.random() * Math.PI * 2, // For animation offset speed: 0.5 + Math.random() * 1.5, // Animation speed maxOpacity: 0.3 + Math.random() * 0.4, lifetime: 0, maxLifetime: 5 + Math.random() * 5, pulseSpeed: 0.05 + Math.random() * 0.1 }; scene.add(dreamLight); dreamLights.push(dreamLight); } // Create Eye Symbol const eyeShape = new THREE.Shape(); eyeShape.ellipse(0, 0, 3, 1.5, 0, Math.PI * 2, false); // Outer ellipse const pupilShape = new THREE.Path(); pupilShape.ellipse(0, 0, 0.8, 0.8, 0, Math.PI * 2, false); // Pupil circle eyeShape.holes.push(pupilShape); const irisShape = new THREE.Path(); irisShape.ellipse(0, 0, 1.5, 1.5, 0, Math.PI * 2, false); // Iris circle eyeShape.holes.push(irisShape); const eyeGeometry = new THREE.ExtrudeGeometry(eyeShape, { depth: 0.5, bevelEnabled: false }); const eyeMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff }); // White for the eye const irisMaterial = new THREE.MeshBasicMaterial({ color: 0x6a0dad }); // Deep purple for iris const pupilMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 }); // Black for pupil // Create the eye parts separately for multi-material const eyeOuter = new THREE.Mesh(eyeGeometry, eyeMaterial); eyeOuter.position.z = -0.25; const irisGeometry = new THREE.ExtrudeGeometry(irisShape, { depth: 0.5, bevelEnabled: false }); const iris = new THREE.Mesh(irisGeometry, irisMaterial); iris.position.z = 0.0; const pupilGeometry = new THREE.ExtrudeGeometry(pupilShape, { depth: 0.5, bevelEnabled: false }); const pupil = new THREE.Mesh(pupilGeometry, pupilMaterial); pupil.position.z = 0.25; eyeSymbol = new THREE.Group(); eyeSymbol.add(eyeOuter); eyeSymbol.add(iris); eyeSymbol.add(pupil); eyeSymbol.scale.setScalar(2); // Scale up for visibility eyeSymbol.position.y = 60; // Above the arcs eyeSymbol.position.z = -10; // Same Z as arcs eyeSymbol.rotation.x = Math.PI / 2; // Face forward scene.add(eyeSymbol); // Handle window resizing window.addEventListener('resize', onWindowResize, false); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { requestAnimationFrame(animate); const time = performance.now() * 0.001; // Animate spheres (ethereal lights) spheres.forEach((sphere, i) => { sphere.position.y += Math.sin(time * 0.5 + i * 0.1) * 0.03; sphere.position.x += Math.cos(time * 0.3 + i * 0.05) * 0.02; sphere.position.z += Math.sin(time * 0.4 + i * 0.08) * 0.03; sphere.rotation.x += 0.0005; sphere.rotation.y += 0.001; }); // Animate smoke particles smokeParticles.forEach(smoke => { smoke.position.add(smoke.velocity); smoke.lifetime += 0.05; const opacity = Math.max(0, 0.3 * (1 - smoke.lifetime / smoke.maxLifetime)); smoke.material.opacity = opacity; smoke.scale.setScalar(0.1 + (smoke.lifetime / smoke.maxLifetime) * 1.5); if (smoke.lifetime > smoke.maxLifetime) { smoke.position.copy(smoke.initialPosition); smoke.material.opacity = 0.3; smoke.scale.setScalar(0.1 + Math.random() * 0.2); smoke.lifetime = 0; smoke.maxLifetime = 2 + Math.random() * 3; smoke.velocity.set( (Math.random() - 0.5) * 0.02, 0.05 + Math.random() * 0.05, (Math.random() - 0.5) * 0.02); } }); // Animate stars (subtle shimmer for instanced triangles) if (stars) { const dummy = new THREE.Object3D(); const starColor = new THREE.Color(); for (let i = 0; i < NUM_STARS; i++) { stars.getMatrixAt(i, dummy.matrix); dummy.matrix.decompose(dummy.position, dummy.quaternion, dummy.scale); // Apply shimmer to lightness or scale const shimmerScale = 1 + Math.sin(time * 2 + i * 0.1) * 0.1; // Subtle shimmer effect on scale // Note: Re-applying scale directly will override previous scale. We need to store original scale or apply delta. // For simplicity, let's just apply shimmer to color lightness for now if performance is an issue with matrix updates. // If we want scale, we'd need to store initial scale for each star. stars.getColorAt(i, starColor); const h = starColor.getHSL({}).h; const s = starColor.getHSL({}).s; const l = starColor.getHSL({}).l; starColor.setHSL(h, s, Math.max(0, Math.min(1, l + Math.sin(time * 1 + i * 0.05) * 0.02))); stars.setColorAt(i, starColor); } stars.instanceColor.needsUpdate = true; } // Animate matrix lines matrixLines.forEach(line => { line.position.y -= line.velocity; line.rotation.y += line.rotationSpeed; if (line.position.y < -30) { // If line falls below the view, reset it to the top line.position.y = 30 + Math.random() * 30; line.position.x = (Math.random() - 0.5) * 100; line.position.z = (Math.random() - 0.5) * 100; line.velocity = 0.1 + Math.random() * 0.3; line.rotationSpeed = (Math.random() - 0.5) * 0.02; } }); // Animate arcs (subtle rotation for looping effect) if (arcObject1 && arcObject2) { arcObject1.rotation.y += 0.001; arcObject2.rotation.y += 0.001; } // Animate dream lights dreamLights.forEach(light => { const userData = light.userData; const opacity = Math.abs(Math.sin(time * userData.pulseSpeed + userData.phase)) * userData.maxOpacity; light.material.opacity = opacity; // Subtle movement light.position.y += Math.sin(time * 0.2 + userData.phase) * 0.01; light.rotation.y += Math.sin(time * 0.1 + userData.phase) * 0.002; }); renderer.render(scene, camera); } init(); animate();

emersonjarr

Melancholic Afro-Modern Flow

Melancholic Afro-Modern Flow