import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; let camera, scene, renderer, composer, bloomPass; let controls; let particles, positions, velocities, colors, sizes, opacities; let listener, sound, analyser; // New variables for sound wave lines effect let soundWaveLines; let soundWaveLinePositions; let soundWaveLineColors; let soundWaveLineZOffsets = []; let lineEffectActive = false; let lineEffectOpacity = 0.0; const LINE_FADE_SPEED = 0.02; const NUM_LINES = 128; const LINE_HEIGHT_SCALE = 150; const LINE_Z_VARIATION = 100; const NUM_PARTICLES = 2000; let MAX_SPEED = 1.0; const BOUNDING_BOX_SIZE = 300; // Flow field parameters const FLOW_FIELD_RESOLUTION = 20; const FLOW_FIELD_CELL_SIZE = BOUNDING_BOX_SIZE / FLOW_FIELD_RESOLUTION; let flowField = []; let flowFieldNoiseOffset = 0; // Bass reaction parameters let bassDisplacementStrength = 0; const BASS_THRESHOLD = 160; const MAX_BASS_DISPLACEMENT = 25; const BASS_DISPLACEMENT_DECAY_RATE = 0.9; // User controlled intensity let bassIntensityMultiplier = 1.0; // Camera shake parameters const CAMERA_SHAKE_INTENSITY = 1.0; const CAMERA_SHAKE_DECAY = 0.95; let currentCameraShake = 0; // Bloom Pulse parameters for extreme bass drops const BASE_BLOOM_STRENGTH = 2.5; const MAX_BLOOM_PULSE = 3.5; const BLOOM_DECAY_RATE = 0.85; let bassBloomStrength = 0; // --- Image Card Variables (From User Snippet) --- let imageMeshes = []; const imageUrls = [ { url: "https://dae.transientusercontent.xyz/uploads/b8561fef-54ea-4107-b0ce-25be87be2d33", type: 'image' }, { url: "https://dae.transientusercontent.xyz/uploads/3dbc4336-dd5b-4c54-b383-2322bc7dbe71", type: 'image' }, { url: "https://dae.transientusercontent.xyz/uploads/44e813d1-3e05-48a9-a9cd-83072fffa940", type: 'image' }, { url: "https://dae.transientusercontent.xyz/uploads/e21adc55-1e6c-4095-be8d-a9b7e38ff906", type: 'image' }, { url: "https://dae.transientusercontent.xyz/uploads/df389c79-13ae-4971-b383-2322bc7dbe71", type: 'image' }, { url: "https://dae.transientusercontent.xyz/uploads/470ce660-727c-462f-aaa4-6e04f65f9e90", type: 'image' }, { url: "https://dae.transientusercontent.xyz/uploads/579e67e7-5b27-4278-a543-1bb944f0be6c", type: 'image' }, { url: "https://dae.transientusercontent.xyz/uploads/08723dd2-7994-4cd6-b873-b5b344f0be6c", type: 'image' }, { url: "https://dae.transientusercontent.xyz/uploads/a4b9513e-7831-45ad-861c-5a01cfcd809a", type: 'image' }, { url: "https://dae.transientusercontent.xyz/uploads/b218795c-5225-43ce-a066-fb57f989c28a", type: 'image' }, { url: "https://dae.transientusercontent.xyz/uploads/9e835af9-e9a3-47d0-9050-4a0ab987da36", type: 'image' }, { url: "https://dae.transientusercontent.xyz/uploads/387b14ac-a70b-4c04-b543-3c9a3eb7dd3a", type: 'image' }, { url: "https://dae.transientusercontent.xyz/uploads/09de436a-fbf5-44c1-8994-8c1281956448", type: 'image' }, { url: "https://dae.transientusercontent.xyz/uploads/137bd0cb-da36-44fb-86cb-e5322efe2927", type: 'image' }, { url: "https://dae.transientusercontent.xyz/uploads/fb49eb5a-ac68-43eb-82f7-4f6fc692f9f6", type: 'image' }, { url: "https://dae.transientusercontent.xyz/uploads/1a41647b-fc1b-4162-a2d5-8e58f2efe57d", type: 'image' }, { url: "https://dae.transientusercontent.xyz/uploads/22127fa2-e26c-4dc7-a950-14ad6135d5ed", type: 'video' } ]; const sphereRadius = 5; const imageSize = 2; let raycaster = new THREE.Raycaster(); let mouse = new THREE.Vector2(); let currentZoomedMesh = null; const cameraHomePosition = new THREE.Vector3(0, 0, 0.01); const cameraHomeTarget = new THREE.Vector3(0, 0, 0); let isAnimatingCamera = false; let animationStartTime = 0; const animationDuration = 800; let mouseDownPosition = new THREE.Vector2(); const DRAG_THRESHOLD = 5; // animation lerp endpoints const startCameraPosition = new THREE.Vector3(); const endCameraPosition = new THREE.Vector3(); const startCameraQuaternion = new THREE.Quaternion(); const endCameraQuaternion = new THREE.Quaternion(); const startControlsTarget = new THREE.Vector3(); const endControlsTarget = new THREE.Vector3(); // saved pre-zoom view const savedCameraPosition = new THREE.Vector3(); const savedCameraQuaternion = new THREE.Quaternion(); const savedControlsTarget = new THREE.Vector3(); let hasSavedView = false; // bobbing const BOBBING_SPEED = 0.001; const BOBBING_DISPLACEMENT = 0.05; // auto-rotation let lastInteractionTime = 0; const autoRotateDelay = 5000; const autoRotateSpeed = 0.5; // stars const STAR_COUNT = 50000; const STAR_FIELD_RADIUS = 750; const STAR_SIZE_MIN = 0.5; const STAR_SIZE_MAX = 2.5; const STAR_BRIGHTNESS_MIN = 0.1; const STAR_BRIGHTNESS_MAX = 1.0; const STAR_COLOR_VARIATION_FACTOR = 0.3; const STAR_OPACITY = 1; const AUDIO_URL = "https://dae.transientusercontent.xyz/uploads/a886ee68-391e-4baf-b0d6-58aa58efff18"; // === ELECTROSTATIC RELAXATION DISTRIBUTION === function generateEvenSpherePoints(numPoints, radius, iterations = 500) { const points = []; for (let i = 0; i < numPoints; i++) { let v = new THREE.Vector3( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 ).normalize(); points.push(v); } for (let iter = 0; iter < iterations; iter++) { const forces = points.map(() => new THREE.Vector3()); for (let i = 0; i < numPoints; i++) { for (let j = i + 1; j < numPoints; j++) { const dir = new THREE.Vector3().subVectors(points[i], points[j]); const distSq = Math.max(dir.lengthSq(), 1e-6); const force = dir.multiplyScalar(1.0 / distSq); forces[i].add(force); forces[j].sub(force); } } for (let i = 0; i < numPoints; i++) { points[i].add(forces[i].multiplyScalar(0.01)); points[i].normalize(); } } return points.map(p => p.multiplyScalar(radius)); } function init() { scene = new THREE.Scene(); scene.background = new THREE.Color(0x000000); // Camera setup uses the user's smaller scale for the gallery effect camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.copy(cameraHomePosition); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.outputColorSpace = THREE.SRGBColorSpace; renderer.toneMapping = THREE.NoToneMapping; document.body.appendChild(renderer.domElement); controls = new OrbitControls(camera, renderer.domElement); controls.enablePan = false; controls.enableDamping = true; controls.dampingFactor = 0.05; controls.minDistance = 0.01; controls.maxDistance = sphereRadius * 1.5; controls.target.copy(cameraHomeTarget); controls.rotateSpeed = -1; controls.autoRotate = true; controls.autoRotateSpeed = autoRotateSpeed; controls.update(); // Event listeners for interaction and auto-rotation control lastInteractionTime = performance.now(); controls.addEventListener('start', resetInteractionTimer); controls.addEventListener('end', resetInteractionTimer); renderer.domElement.addEventListener('mousedown', onDocumentMouseDown, false); renderer.domElement.addEventListener('mouseup', onDocumentMouseUp, false); renderer.domElement.addEventListener('touchstart', resetInteractionTimer, false); // Post-processing (Bloom effect) composer = new EffectComposer(renderer); composer.addPass(new RenderPass(scene, camera)); bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85); bloomPass.threshold = 0.03; bloomPass.strength = BASE_BLOOM_STRENGTH; bloomPass.radius = 1.2; composer.addPass(bloomPass); setupAudio(); createParticles(); createSoundWaveLines(); createImageCards(); // New Card Setup createStarfield(); // New Starfield Setup generateFlowField(); window.addEventListener('resize', onWindowResize); window.addEventListener('keydown', onKeyDown); window.addEventListener('mousemove', onMouseMove); // Centered button to play music const playButton = document.createElement('button'); playButton.style.position = 'absolute'; playButton.style.top = '50%'; playButton.style.left = '50%'; playButton.style.transform = 'translate(-50%, -50%)'; playButton.style.padding = '15px 30px'; playButton.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; playButton.style.color = 'white'; playButton.style.border = '2px solid white'; playButton.style.borderRadius = '5px'; playButton.style.fontSize = '18px'; playButton.style.fontFamily = 'monospace'; playButton.style.cursor = 'pointer'; playButton.style.zIndex = '1000'; playButton.style.transition = 'none'; playButton.innerText = 'Play Music'; document.body.appendChild(playButton); playButton.addEventListener('click', () => { if (sound && !sound.isPlaying) { sound.play(); playButton.style.display = 'none'; } }, { once: true }); // Slider for Bass Intensity const intensitySlider = document.createElement('input'); intensitySlider.type = 'range'; intensitySlider.min = '0'; intensitySlider.max = '2'; // Max intensity 2x the original intensitySlider.step = '0.01'; intensitySlider.value = '1.0'; intensitySlider.style.position = 'absolute'; intensitySlider.style.bottom = '20px'; intensitySlider.style.left = '50%'; intensitySlider.style.transform = 'translateX(-50%)'; intensitySlider.style.width = '200px'; intensitySlider.style.zIndex = '1000'; document.body.appendChild(intensitySlider); const sliderLabel = document.createElement('div'); sliderLabel.style.position = 'absolute'; sliderLabel.style.bottom = '45px'; sliderLabel.style.left = '50%'; sliderLabel.style.transform = 'translateX(-50%)'; sliderLabel.style.color = 'white'; sliderLabel.style.fontFamily = 'monospace'; sliderLabel.style.zIndex = '1000'; sliderLabel.innerText = 'Bass Intensity (1.00)'; document.body.appendChild(sliderLabel); intensitySlider.addEventListener('input', (event) => { bassIntensityMultiplier = parseFloat(event.target.value); sliderLabel.innerText = `Bass Intensity (${bassIntensityMultiplier.toFixed(2)})`; }); } function setupAudio() { listener = new THREE.AudioListener(); camera.add(listener); sound = new THREE.Audio(listener); const audioLoader = new THREE.AudioLoader(); audioLoader.load(AUDIO_URL, function(buffer) { sound.setBuffer(buffer); sound.setLoop(true); sound.setVolume(0.5); analyser = new THREE.AudioAnalyser(sound, 256); }); } function createParticles() { const geometry = new THREE.BufferGeometry(); positions = new Float32Array(NUM_PARTICLES * 3); sizes = new Float32Array(NUM_PARTICLES); colors = new Float32Array(NUM_PARTICLES * 3); opacities = new Float32Array(NUM_PARTICLES); velocities = []; const color = new THREE.Color(); for (let i = 0; i < NUM_PARTICLES; i++) { // Place particles in the larger bounding box const x = Math.random() * BOUNDING_BOX_SIZE - BOUNDING_BOX_SIZE / 2; const y = Math.random() * BOUNDING_BOX_SIZE - BOUNDING_BOX_SIZE / 2; const z = Math.random() * BOUNDING_BOX_SIZE - BOUNDING_BOX_SIZE / 2; positions[i * 3] = x; positions[i * 3 + 1] = y; positions[i * 3 + 2] = z; sizes[i] = Math.random() * (20 - 5) + 5; opacities[i] = 1.0; color.setHSL(0, 0, 1); colors[i * 3] = color.r; colors[i * 3 + 1] = color.g; colors[i * 3 + 2] = color.b; velocities.push(new THREE.Vector3()); } geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1)); geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3)); geometry.setAttribute('opacity', new THREE.BufferAttribute(opacities, 1)); const material = new THREE.ShaderMaterial({ uniforms: {}, vertexShader: ` attribute float size; attribute vec3 color; attribute float opacity; varying vec3 vColor; varying float vOpacity; void main() { vColor = color; vOpacity = opacity; vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); gl_PointSize = size * (300.0 / -mvPosition.z); gl_Position = projectionMatrix * mvPosition; } `, fragmentShader: ` varying vec3 vColor; varying float vOpacity; void main() { float r = 0.0; vec2 cxy = 2.0 * gl_PointCoord - 1.0; r = dot(cxy, cxy); float alpha = 1.0 - r; gl_FragColor = vec4(vColor, vOpacity * alpha); } `, transparent: true, blending: THREE.AdditiveBlending }); particles = new THREE.Points(geometry, material); scene.add(particles); } function createSoundWaveLines() { const geometry = new THREE.BufferGeometry(); soundWaveLinePositions = new Float32Array(NUM_LINES * 2 * 3); soundWaveLineColors = new Float32Array(NUM_LINES * 2 * 3); geometry.setAttribute('position', new THREE.BufferAttribute(soundWaveLinePositions, 3)); geometry.setAttribute('color', new THREE.BufferAttribute(soundWaveLineColors, 3)); const material = new THREE.LineBasicMaterial({ vertexColors: true, blending: THREE.AdditiveBlending, transparent: true, opacity: 0.0, linewidth: 2 }); soundWaveLines = new THREE.LineSegments(geometry, material); scene.add(soundWaveLines); const startX = -BOUNDING_BOX_SIZE / 2; const endX = BOUNDING_BOX_SIZE / 2; const spacing = (endX - startX) / (NUM_LINES - 1); const baseColor = new THREE.Color(); for (let i = 0; i < NUM_LINES; i++) { const x = startX + i * spacing; const zOffset = (Math.random() * 2 - 1) * LINE_Z_VARIATION; soundWaveLineZOffsets.push(zOffset); // Vertex 1 (bottom) soundWaveLinePositions[i * 6] = x; soundWaveLinePositions[i * 6 + 1] = 0; soundWaveLinePositions[i * 6 + 2] = zOffset; // Vertex 2 (top) soundWaveLinePositions[i * 6 + 3] = x; soundWaveLinePositions[i * 6 + 4] = 0; soundWaveLinePositions[i * 6 + 5] = zOffset; baseColor.setHSL(i / NUM_LINES, 1.0, 0.7); soundWaveLineColors[i * 6] = baseColor.r; soundWaveLineColors[i * 6 + 1] = baseColor.g; soundWaveLineColors[i * 6 + 2] = baseColor.b; soundWaveLineColors[i * 6 + 3] = baseColor.r; soundWaveLineColors[i * 6 + 4] = baseColor.g; soundWaveLineColors[i * 6 + 5] = baseColor.b; } } // --- Image Card Setup (From User Snippet) --- function createImageCards() { const textureLoader = new THREE.TextureLoader(); const positions = generateEvenSpherePoints(imageUrls.length, sphereRadius); imageUrls.forEach((imageInfo, i) => { if (imageInfo.type === 'image') { textureLoader.load(imageInfo.url, (texture) => { texture.colorSpace = THREE.SRGBColorSpace; texture.minFilter = THREE.LinearFilter; texture.magFilter = THREE.LinearFilter; texture.generateMipmaps = false; texture.anisotropy = renderer.capabilities.getMaxAnisotropy(); const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide }); const aspectRatio = texture.image.width / texture.image.height; const planeWidth = imageSize; const planeHeight = imageSize / aspectRatio; const geometry = new THREE.PlaneGeometry(planeWidth, planeHeight); const mesh = new THREE.Mesh(geometry, material); mesh.userData.aspectRatio = aspectRatio; mesh.position.copy(positions[i]); mesh.lookAt(0, 0, 0); mesh.userData.initialPosition = mesh.position.clone(); imageMeshes.push(mesh); scene.add(mesh); }); } else if (imageInfo.type === 'video') { const video = document.createElement('video'); video.src = imageInfo.url; video.loop = true; video.muted = true; // Videos must be muted to autoplay in most browsers video.autoplay = true; video.playsInline = true; // Important for mobile devices video.crossOrigin = 'anonymous'; video.load(); video.play().catch(error => { console.error("Video autoplay failed:", error); }); const videoTexture = new THREE.VideoTexture(video); videoTexture.colorSpace = THREE.SRGBColorSpace; videoTexture.minFilter = THREE.LinearFilter; videoTexture.magFilter = THREE.LinearFilter; videoTexture.generateMipmaps = false; videoTexture.anisotropy = renderer.capabilities.getMaxAnisotropy(); // To get the video's aspect ratio, we need to wait for metadata to load video.addEventListener('loadedmetadata', () => { const aspectRatio = video.videoWidth / video.videoHeight; const material = new THREE.MeshBasicMaterial({ map: videoTexture, side: THREE.DoubleSide }); const planeWidth = imageSize; const planeHeight = imageSize / aspectRatio; const geometry = new THREE.PlaneGeometry(planeWidth, planeHeight); const mesh = new THREE.Mesh(geometry, material); mesh.userData.aspectRatio = aspectRatio; mesh.position.copy(positions[i]); mesh.lookAt(0, 0, 0); mesh.userData.initialPosition = mesh.position.clone(); mesh.userData.videoElement = video; // Store reference to the video element imageMeshes.push(mesh); scene.add(mesh); }); } }); } // --- Starfield Setup (From User Snippet) --- function createStarfield() { const starsGeometry = new THREE.BufferGeometry(); const starVertices = []; const starColors = []; const starSizes = []; const color = new THREE.Color(); const subtleTints = [ new THREE.Color(0xFFFFFF), new THREE.Color(0xF0F8FF), new THREE.Color(0xFFF8E7), new THREE.Color(0xFFEEEE), new THREE.Color(0xEEFFEE), new THREE.Color(0xEEEEFF), new THREE.Color(0xFFFFEE) ]; for (let i = 0; i < STAR_COUNT; i++) { const x = Math.random() * 2 - 1; const y = Math.random() * 2 - 1; const z = Math.random() * 2 - 1; const magnitude = Math.sqrt(x * x + y * y + z * z); starVertices.push( x / magnitude * STAR_FIELD_RADIUS, y / magnitude * STAR_FIELD_RADIUS, z / magnitude * STAR_FIELD_RADIUS ); starSizes.push(Math.random() * (STAR_SIZE_MAX - STAR_SIZE_MIN) + STAR_SIZE_MIN); const baseColor = subtleTints[Math.floor(Math.random() * subtleTints.length)]; let r = Math.max(0, Math.min(1, baseColor.r + (Math.random() - 0.5) * STAR_COLOR_VARIATION_FACTOR)); let g = Math.max(0, Math.min(1, baseColor.g + (Math.random() - 0.5) * STAR_COLOR_VARIATION_FACTOR)); let b = Math.max(0, Math.min(1, baseColor.b + (Math.random() - 0.5) * STAR_COLOR_VARIATION_FACTOR)); const brightnessMultiplier = Math.random() * (STAR_BRIGHTNESS_MAX - STAR_BRIGHTNESS_MIN) + STAR_BRIGHTNESS_MIN; r *= brightnessMultiplier; g *= brightnessMultiplier; b *= brightnessMultiplier; r = Math.max(0, Math.min(1, r)); g = Math.max(0, Math.min(1, g)); b = Math.max(0, Math.min(1, b)); color.setRGB(r, g, b); starColors.push(color.r, color.g, color.b); } starsGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starVertices, 3)); starsGeometry.setAttribute('color', new THREE.Float32BufferAttribute(starColors, 3)); starsGeometry.setAttribute('aSize', new THREE.Float32BufferAttribute(starSizes, 1)); const starsMaterial = new THREE.PointsMaterial({ vertexColors: true, size: 1, sizeAttenuation: true, transparent: true, opacity: STAR_OPACITY, blending: THREE.AdditiveBlending }); starsMaterial.onBeforeCompile = (shader) => { shader.vertexShader = shader.vertexShader.replace( 'void main() {', 'attribute float aSize;\nvoid main() {' ); shader.vertexShader = shader.vertexShader.replace( 'gl_PointSize = size * ( 300.0 / -mvPosition.z );', 'gl_PointSize = aSize * ( 300.0 / -mvPosition.z );' ); shader.vertexShader = shader.vertexShader.replace( 'gl_PointSize = size;', 'gl_PointSize = aSize;' ); }; const stars = new THREE.Points(starsGeometry, starsMaterial); scene.add(stars); } // --- Flow Field Functions (Keep) --- function pseudoNoise3D(x, y, z, timeOffset) { return (Math.sin(x * 0.1 + timeOffset) + Math.cos(y * 0.1 + timeOffset) + Math.sin(z * 0.1 + timeOffset)) / 3; } function generateFlowField(volumeInfluence = 1) { flowField = []; const halfBox = BOUNDING_BOX_SIZE / 2; const scale = 0.05; for (let z = 0; z < FLOW_FIELD_RESOLUTION; z++) { for (let y = 0; y < FLOW_FIELD_RESOLUTION; y++) { for (let x = 0; x < FLOW_FIELD_RESOLUTION; x++) { const px = (x * FLOW_FIELD_CELL_SIZE) - halfBox; const py = (y * FLOW_FIELD_CELL_SIZE) - halfBox; const pz = (z * FLOW_FIELD_CELL_SIZE) - halfBox; const vx = pseudoNoise3D(px * scale, py * scale, pz * scale, flowFieldNoiseOffset + 100) * 2 - 1; const vy = pseudoNoise3D(px * scale, py * scale, pz * scale, flowFieldNoiseOffset + 200) * 2 - 1; const vz = pseudoNoise3D(px * scale, py * scale, pz * scale, flowFieldNoiseOffset + 300) * 2 - 1; const vector = new THREE.Vector3(vx, vy, vz).normalize().multiplyScalar(MAX_SPEED * volumeInfluence); flowField.push(vector); } } } } function getFlowVector(position) { const halfBox = BOUNDING_BOX_SIZE / 2; let x = Math.floor((position.x + halfBox) / FLOW_FIELD_CELL_SIZE); let y = Math.floor((position.y + halfBox) / FLOW_FIELD_CELL_SIZE); let z = Math.floor((position.z + halfBox) / FLOW_FIELD_CELL_SIZE); x = Math.max(0, Math.min(FLOW_FIELD_RESOLUTION - 1, x)); y = Math.max(0, Math.min(FLOW_FIELD_RESOLUTION - 1, y)); z = Math.max(0, Math.min(FLOW_FIELD_RESOLUTION - 1, z)); const index = x + y * FLOW_FIELD_RESOLUTION + z * FLOW_FIELD_RESOLUTION * FLOW_FIELD_RESOLUTION; return flowField[index] || new THREE.Vector3(); } // --- Interaction Handlers (From User Snippet) --- function resetInteractionTimer() { lastInteractionTime = performance.now(); controls.autoRotate = false; } function onDocumentMouseDown(event) { mouseDownPosition.set(event.clientX, event.clientY); resetInteractionTimer(); } function onDocumentMouseUp(event) { resetInteractionTimer(); if (isAnimatingCamera) return; const mouseUpPosition = new THREE.Vector2(event.clientX, event.clientY); const distance = mouseDownPosition.distanceTo(mouseUpPosition); if (distance > DRAG_THRESHOLD) return; // Set mouse for raycasting mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObjects(imageMeshes); if (intersects.length > 0) { const clickedMesh = intersects[0].object; if (currentZoomedMesh === clickedMesh) { zoomOutToSavedView(); } else { zoomInToImage(clickedMesh); } } else if (currentZoomedMesh) { zoomOutToSavedView(); } } function zoomInToImage(mesh) { resetInteractionTimer(); // Mute previously zoomed video, if any if (currentZoomedMesh && currentZoomedMesh.userData.videoElement) { currentZoomedMesh.userData.videoElement.muted = true; } if (!currentZoomedMesh) { savedCameraPosition.copy(camera.position); savedCameraQuaternion.copy(camera.quaternion); savedControlsTarget.copy(controls.target); hasSavedView = true; } currentZoomedMesh = mesh; // Unmute the newly zoomed video, if it is one if (currentZoomedMesh.userData.videoElement) { currentZoomedMesh.userData.videoElement.muted = false; } const meshWorld = new THREE.Vector3(); mesh.getWorldPosition(meshWorld); // Calculate required distance for zoom const aspectRatio = mesh.userData.aspectRatio; const planeWidth = imageSize; const planeHeight = imageSize / aspectRatio; const fillFactor = 0.8; const fovRad = THREE.MathUtils.degToRad(camera.fov / 2); const tanFov = Math.tan(fovRad); let requiredDistanceHeight = (planeHeight / fillFactor) / (2 * tanFov); let requiredDistanceWidth = (planeWidth / fillFactor) / (2 * tanFov * camera.aspect); let dynamicZoomDistance = Math.max(requiredDistanceHeight, requiredDistanceWidth); dynamicZoomDistance = Math.max(0.5, dynamicZoomDistance); const dir = new THREE.Vector3().copy(meshWorld).normalize(); endCameraPosition.copy(meshWorld).add(dir.multiplyScalar(-dynamicZoomDistance)); // Setup animation start/end points startCameraPosition.copy(camera.position); startCameraQuaternion.copy(camera.quaternion); startControlsTarget.copy(controls.target); const tmpCam = new THREE.Camera(); tmpCam.position.copy(endCameraPosition); tmpCam.lookAt(meshWorld); endCameraQuaternion.copy(tmpCam.quaternion); endControlsTarget.copy(meshWorld); controls.enabled = false; isAnimatingCamera = true; animationStartTime = performance.now(); } function zoomOutToSavedView() { resetInteractionTimer(); // Mute the video if it was previously zoomed in if (currentZoomedMesh && currentZoomedMesh.userData.videoElement) { currentZoomedMesh.userData.videoElement.muted = true; } const endPos = hasSavedView ? savedCameraPosition : cameraHomePosition; const endQuat = hasSavedView ? savedCameraQuaternion : camera.quaternion.clone(); const endTarget = hasSavedView ? savedControlsTarget : cameraHomeTarget; startCameraPosition.copy(camera.position); startCameraQuaternion.copy(camera.quaternion); startControlsTarget.copy(controls.target); endCameraPosition.copy(endPos); endCameraQuaternion.copy(endQuat); endControlsTarget.copy(endTarget); currentZoomedMesh = null; controls.enabled = false; isAnimatingCamera = true; animationStartTime = performance.now(); } function onKeyDown(event) { if (event.key === 'ArrowRight') { lineEffectActive = !lineEffectActive; } } function onMouseMove(event) { // Calculate mouse position in normalized device coordinates (-1 to +1) mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; } function animate() { requestAnimationFrame(animate); const currentTime = performance.now(); updateAudioReaction(); updateParticles(); updateSoundWaveLines(); updateImageCards(currentTime); // Integrated card animation particles.geometry.attributes.position.needsUpdate = true; particles.geometry.attributes.color.needsUpdate = true; particles.geometry.attributes.size.needsUpdate = true; particles.geometry.attributes.opacity.needsUpdate = true; // Apply camera shake if (currentCameraShake > 0.01) { const shakeX = (Math.random() * 2 - 1) * currentCameraShake; const shakeY = (Math.random() * 2 - 1) * currentCameraShake; const shakeZ = (Math.random() * 2 - 1) * currentCameraShake; // We apply shake relative to the camera's current position (which might be animated) camera.position.x += shakeX; camera.position.y += shakeY; camera.position.z += shakeZ; currentCameraShake *= CAMERA_SHAKE_DECAY; } // Handle Camera Zoom Animation (From User Snippet) if (isAnimatingCamera) { const t = Math.min(1, (currentTime - animationStartTime) / animationDuration); const eased = t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2; camera.position.lerpVectors(startCameraPosition, endCameraPosition, eased); camera.quaternion.slerpQuaternions(startCameraQuaternion, endCameraQuaternion, eased); controls.target.lerpVectors(startControlsTarget, endControlsTarget, eased); if (t === 1) { isAnimatingCamera = false; controls.enabled = true; controls.update(); if (!currentZoomedMesh) hasSavedView = false; } } else { // Handle Auto-Rotation (From User Snippet) if (!currentZoomedMesh && (currentTime - lastInteractionTime > autoRotateDelay)) { controls.autoRotate = true; controls.autoRotateSpeed = autoRotateSpeed; } controls.update(); } composer.render(); } function updateAudioReaction() { if (analyser && sound.isPlaying) { const data = analyser.getFrequencyData(); const dataLength = data.length; let overallVolumeSum = 0; for (let i = 0; i < dataLength; i++) { overallVolumeSum += data[i]; } const overallVolume = overallVolumeSum / dataLength; const normalizedOverallVolume = overallVolume / 255.0; let lowFreqSum = 0; const bassBandEnd = Math.floor(data.length * 0.15); for (let i = 0; i < bassBandEnd; i++) { lowFreqSum += data[i]; } const lowFreqAvg = lowFreqSum / bassBandEnd; if (lowFreqAvg > BASS_THRESHOLD) { const rawDisplacement = (lowFreqAvg - BASS_THRESHOLD) / (255 - BASS_THRESHOLD); // Apply multiplier to all bass-driven effects const scaledDisplacement = rawDisplacement * MAX_BASS_DISPLACEMENT * bassIntensityMultiplier; bassDisplacementStrength = Math.max(bassDisplacementStrength, scaledDisplacement); const scaledCameraShake = rawDisplacement * CAMERA_SHAKE_INTENSITY * bassIntensityMultiplier; currentCameraShake = Math.max(currentCameraShake, scaledCameraShake); const scaledBloomPulse = rawDisplacement * MAX_BLOOM_PULSE * bassIntensityMultiplier; bassBloomStrength = Math.max(bassBloomStrength, scaledBloomPulse); } bassDisplacementStrength *= BASS_DISPLACEMENT_DECAY_RATE; bassDisplacementStrength = Math.max(0, bassDisplacementStrength); bassBloomStrength *= BLOOM_DECAY_RATE; bassBloomStrength = Math.max(0, bassBloomStrength - 0.01); if (bloomPass) { bloomPass.strength = BASE_BLOOM_STRENGTH + bassBloomStrength; } MAX_SPEED = 0.5 + normalizedOverallVolume * 1.5; flowFieldNoiseOffset += normalizedOverallVolume * 0.05 + 0.001; generateFlowField(1); const tempColor = new THREE.Color(); const halfBox = BOUNDING_BOX_SIZE / 2; let bassEnergy = 0; let midEnergy = 0; let trebleEnergy = 0; const dataStart = 0; const bassEnd = Math.floor(dataLength * 0.15); const midEnd = Math.floor(dataLength * 0.6); for (let i = dataStart; i < dataLength; i++) { if (i < bassEnd) { bassEnergy += data[i]; } else if (i < midEnd) { midEnergy += data[i]; } else { trebleEnergy += data[i]; } } const totalEnergy = bassEnergy + midEnergy + trebleEnergy; const normalizedBass = totalEnergy > 0 ? bassEnergy / totalEnergy : 0; const normalizedTreble = totalEnergy > 0 ? trebleEnergy / totalEnergy : 0; const blendFactor = (normalizedTreble - normalizedBass + 1) / 2; let globalHueShift = 0.66 * blendFactor; for (let i = 0; i < NUM_PARTICLES; i++) { const y = positions[i * 3 + 1]; const y_normalized = (y + halfBox) / BOUNDING_BOX_SIZE; const freqIndex = Math.floor((1.0 - y_normalized) * (dataLength - 1)); const clampedFreqIndex = Math.max(0, Math.min(dataLength - 1, freqIndex)); const freqValue = data[clampedFreqIndex] / 255.0; let baseHue = y_normalized; let finalHue = (baseHue + (globalHueShift * 0.1 - 0.05)) % 1.0; if (finalHue < 0) finalHue += 1; const saturation = 0.4 + freqValue * 0.6; const lightness = 0.1 + freqValue * 0.9; tempColor.setHSL(finalHue, saturation, lightness); colors[i * 3] = tempColor.r; colors[i * 3 + 1] = tempColor.g; colors[i * 3 + 2] = tempColor.b; sizes[i] = (2 + freqValue * 28); opacities[i] = 0.1 + freqValue * 0.9; } } } function updateSoundWaveLines() { if (lineEffectActive) { lineEffectOpacity = Math.min(1.0, lineEffectOpacity + LINE_FADE_SPEED); } else { lineEffectOpacity = Math.max(0.0, lineEffectOpacity - LINE_FADE_SPEED); } soundWaveLines.material.opacity = lineEffectOpacity; if (analyser && sound.isPlaying && lineEffectOpacity > 0.01) { const data = analyser.getFrequencyData(); const dataLength = data.length; const tempLineColor = new THREE.Color(); for (let i = 0; i < NUM_LINES; i++) { const freqIndex = Math.floor(i * (dataLength / NUM_LINES)); const freqValue = data[freqIndex] / 255.0; const lineExtension = freqValue * LINE_HEIGHT_SCALE / 2; const zOffset = soundWaveLineZOffsets[i]; // Vertex 1 (bottom part) soundWaveLinePositions[i * 6 + 1] = -lineExtension; soundWaveLinePositions[i * 6 + 2] = zOffset; // Vertex 2 (top part) soundWaveLinePositions[i * 6 + 4] = lineExtension; soundWaveLinePositions[i * 6 + 5] = zOffset; const hue = i / NUM_LINES; const saturation = 0.5 + freqValue * 0.5; const lightness = 0.2 + freqValue * 0.8; tempLineColor.setHSL(hue, saturation, lightness); soundWaveLineColors[i * 6] = tempLineColor.r; soundWaveLineColors[i * 6 + 1] = tempLineColor.g; soundWaveLineColors[i * 6 + 2] = tempLineColor.b; soundWaveLineColors[i * 6 + 3] = tempLineColor.r; soundWaveLineColors[i * 6 + 4] = tempLineColor.g; soundWaveLineColors[i * 6 + 5] = tempLineColor.b; } soundWaveLines.geometry.attributes.position.needsUpdate = true; soundWaveLines.geometry.attributes.color.needsUpdate = true; } } // --- Image Card Update (From User Snippet) --- function updateImageCards(currentTime) { const tempVector = new THREE.Vector3(); imageMeshes.forEach((mesh, i) => { if (mesh !== currentZoomedMesh) { const initialPos = mesh.userData.initialPosition; // Bobbing movement const displacementY = Math.sin(currentTime * BOBBING_SPEED + i) * BOBBING_DISPLACEMENT; mesh.position.y = initialPos.y + displacementY; // Cursor Repulsion (Using the Raycaster to push cards away) const ray = raycaster.ray; const distanceToRay = ray.distanceSqToPoint(mesh.position); const mouseInfluenceRadius = 0.5; // Adjust repulsion radius for the small-scale scene const mouseInfluenceStrength = 0.05; // Adjust repulsion strength if (distanceToRay < mouseInfluenceRadius * mouseInfluenceRadius) { const closestPoint = ray.closestPointToPoint(mesh.position, tempVector); const repulsionVector = mesh.position.clone().sub(closestPoint).normalize(); const repulsionStrength = 1.0 - Math.sqrt(distanceToRay) / mouseInfluenceRadius; mesh.position.add(repulsionVector.multiplyScalar(repulsionStrength * mouseInfluenceStrength)); } } }); } function updateParticles() { const tempPosition = new THREE.Vector3(); const tempVelocity = new THREE.Vector3(); const tempDisplacement = new THREE.Vector3(); for (let i = 0; i < NUM_PARTICLES; i++) { tempPosition.set(positions[i * 3], positions[i * 3 + 1], positions[i * 3 + 2]); tempVelocity.copy(velocities[i]); const flowVector = getFlowVector(tempPosition); tempVelocity.copy(flowVector); if (bassDisplacementStrength > 0.01) { tempDisplacement.set( (Math.random() * 2 - 1), (Math.random() * 2 - 1), (Math.random() * 2 - 1) ).normalize().multiplyScalar(bassDisplacementStrength); tempPosition.add(tempDisplacement); } // Keep particles within bounds by wrapping around if (tempPosition.x > BOUNDING_BOX_SIZE / 2) tempPosition.x = -BOUNDING_BOX_SIZE / 2; else if (tempPosition.x < -BOUNDING_BOX_SIZE / 2) tempPosition.x = BOUNDING_BOX_SIZE / 2; if (tempPosition.y > BOUNDING_BOX_SIZE / 2) tempPosition.y = -BOUNDING_BOX_SIZE / 2; else if (tempPosition.y < -BOUNDING_BOX_SIZE / 2) tempPosition.y = BOUNDING_BOX_SIZE / 2; if (tempPosition.z > BOUNDING_BOX_SIZE / 2) tempPosition.z = -BOUNDING_BOX_SIZE / 2; else if (tempPosition.z < -BOUNDING_BOX_SIZE / 2) tempPosition.z = BOUNDING_BOX_SIZE / 2; tempPosition.add(tempVelocity); velocities[i].copy(tempVelocity); positions[i * 3] = tempPosition.x; positions[i * 3 + 1] = tempPosition.y; positions[i * 3 + 2] = tempPosition.z; } } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); composer.setSize(window.innerWidth, window.innerHeight); } init(); animate();

Morgen

Extreme Bass Drops w/ images

Extreme Bass Drops w/ images