import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; let camera, scene, renderer; let carousel; // Main glass sphere let internalSphere; // New sphere inside the glass let backgroundMesh; let clock; // Trail configuration const NUM_BASE_TRAILS = 8; // Number of base positions around the sphere const DIFFUSION_FACTOR = 3; // Number of lines per base trail for diffusion const SCATTER_AMOUNT = 0.05; // Max random offset for diffusion const TRAIL_LENGTH = 150; const TRACKING_RADIUS = 2.0; const TRAIL_SPEED = 0.01; // Increased speed for clearer rotation visibility let trackingDummies = []; // Array to hold tracking points (8) let trailLines = []; // Array to hold Line objects (24) const BACKGROUND_SPIN_SPEED = 0.0005; // Drop/Return movement configuration const DROP_DEPTH = -16; // Increased from -12 for a longer path const DROP_CYCLE_SPEED = 0.15; const MIN_SCALE = 0.1; // Decreased from 0.15 to slightly reduce the ball's size at the impact point and deepest travel. const MAX_SCALE = 1.5; // Water Ripple Effect Configuration let rippleUniforms; let hasImpacted = false; const IMPACT_Z = -10; // Z position of the background plane const IMPACT_TOLERANCE = 0.2; // Threshold for triggering impact check // Asset URLs const BACKGROUND_IMAGE_URL = "https://dae.transientusercontent.xyz/uploads/2dfc35d9-9e58-4612-8f38-7b7329241574"; const CAROUSEL_IMAGE_URL = "https://dae.transientusercontent.xyz/uploads/db799c57-3b42-48f8-8493-8b2dbbe9f93d"; function init() { // Scene setup scene = new THREE.Scene(); // Initialize Clock clock = new THREE.Clock(); // Renderer setup renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); renderer.outputColorSpace = THREE.SRGBColorSpace; document.body.appendChild(renderer.domElement); // Camera setup camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 5, 5); // Controls const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.target.set(0, 0, 0); controls.update(); // Lighting const ambientLight = new THREE.AmbientLight(0xffffff, 2); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 3); directionalLight.position.set(5, 10, 5); scene.add(directionalLight); // Texture Loading and setup const textureLoader = new THREE.TextureLoader(); // --- Background Setup (now using ShaderMaterial for ripples) --- const backgroundTexture = textureLoader.load(BACKGROUND_IMAGE_URL); backgroundTexture.colorSpace = THREE.SRGBColorSpace; backgroundTexture.minFilter = THREE.LinearFilter; backgroundTexture.magFilter = THREE.LinearFilter; backgroundTexture.generateMipmaps = false; backgroundTexture.anisotropy = renderer.capabilities.getMaxAnisotropy(); // Use higher resolution geometry for visible displacement const backgroundGeometry = new THREE.PlaneGeometry(20, 20, 100, 100); rippleUniforms = { u_time: { value: 0.0 }, u_texture: { value: backgroundTexture }, u_impactTime: { value: -1000.0 }, // Initialize far in the past u_rippleMagnitude: { value: 0.3 }, }; const backgroundMaterial = new THREE.ShaderMaterial({ uniforms: rippleUniforms, vertexShader: ` uniform float u_time; uniform float u_impactTime; uniform float u_rippleMagnitude; varying vec2 vUv; void main() { vUv = uv; vec3 newPosition = position; float timeSinceImpact = u_time - u_impactTime; // Ripple effect active between 0 and 3 seconds after impact if (timeSinceImpact > 0.0 && timeSinceImpact < 3.0) { // Normalized distance from the center (0,0) of the plane // Plane width is 20, so max distance from center is 10. float dist = length(position.xy) / 10.0; // Wave parameters float waveFrequency = 15.0; float waveSpeed = 8.0; // Wave calculation: sin(k*r - w*t) float wave = sin(dist * waveFrequency - timeSinceImpact * waveSpeed); // Attenuation: Dampen based on distance and time // 1. Time attenuation: fades out over 0.0 to 3.0 seconds float timeFade = smoothstep(0.0, 3.0, timeSinceImpact); // 2. Distance attenuation: fades out as distance approaches 1.0 (edge) float distFade = smoothstep(1.0, 0.5, dist); // Combine magnitude, wave, and dampening float displacement = wave * u_rippleMagnitude * (1.0 - timeFade) * distFade; newPosition.z += displacement; } gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); } `, fragmentShader: ` uniform sampler2D u_texture; varying vec2 vUv; void main() { vec4 textureColor = texture2D(u_texture, vUv); gl_FragColor = textureColor; } `, side: THREE.DoubleSide }); backgroundMesh = new THREE.Mesh(backgroundGeometry, backgroundMaterial); backgroundMesh.position.z = IMPACT_Z; // Z position is -10 backgroundMesh.scale.set(1.1, 1.1, 1.1); scene.add(backgroundMesh); // --- End Background Setup --- // Carousel Texture (used for the outer glass ball's surface) const carouselTexture = textureLoader.load(CAROUSEL_IMAGE_URL); carouselTexture.colorSpace = THREE.SRGBColorSpace; carouselTexture.minFilter = THREE.LinearFilter; carouselTexture.magFilter = THREE.LinearFilter; carouselTexture.generateMipmaps = false; carouselTexture.anisotropy = renderer.capabilities.getMaxAnisotropy(); // Create Carousel (Outer Glass Ball) const carouselGeometry = new THREE.SphereGeometry(2, 64, 32); const carouselMaterial = new THREE.MeshPhysicalMaterial({ map: carouselTexture, metalness: 0.0, roughness: 0.05, transmission: 1.0, transparent: true, thickness: 0.1, ior: 1.5, envMap: backgroundTexture, envMapIntensity: 2.0 }); carousel = new THREE.Mesh(carouselGeometry, carouselMaterial); carousel.rotation.y = Math.PI / 2; scene.add(carousel); // --- Internal Rotating Image Sphere Setup --- const internalGeometry = new THREE.SphereGeometry(1.9, 64, 32); const internalMaterial = new THREE.MeshBasicMaterial({ map: backgroundTexture, // Use the background image texture side: THREE.FrontSide }); internalSphere = new THREE.Mesh(internalGeometry, internalMaterial); // Add internal sphere as a child of the main carousel so it moves with it carousel.add(internalSphere); // --- End Internal Sphere Setup --- // --- Multi-Trail Setup (8 base positions, 3 lines each for diffusion) --- for (let i = 0; i < NUM_BASE_TRAILS; i++) { // 1. Create Tracking Dummy (8 total) const angle = (i / NUM_BASE_TRAILS) * Math.PI * 2; const dummy = new THREE.Object3D(); // Position on the equator of the sphere (radius 2) dummy.position.set( TRACKING_RADIUS * Math.cos(angle), TRACKING_RADIUS * Math.sin(angle), 0 ); carousel.add(dummy); trackingDummies.push(dummy); // 2. Create DIFFUSION_FACTOR lines for each dummy (3 lines * 8 = 24 total) for (let j = 0; j < DIFFUSION_FACTOR; j++) { // Initialize Trail Geometry and Material const positions = new Float32Array(TRAIL_LENGTH * 3); const colors = new Float32Array(TRAIL_LENGTH * 3); // Initialize all points to (0, 0, 0) for (let k = 0; k < TRAIL_LENGTH * 3; k++) { positions[k] = 0; colors[k] = 0; } const trailGeometry = new THREE.BufferGeometry(); trailGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); trailGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3)); const trailMaterial = new THREE.LineBasicMaterial({ vertexColors: true, transparent: true, opacity: 0.7, // Reduced opacity for stacking effect blending: THREE.AdditiveBlending, linewidth: 1 }); const trailLine = new THREE.Line(trailGeometry, trailMaterial); scene.add(trailLine); trailLines.push(trailLine); } } // --- End Multi-Trail Setup --- window.addEventListener('resize', onWindowResize); } /** * Updates a single trail's geometry based on a new position and depth factor. * @param {THREE.Line} trailLine - The specific line object to update. * @param {THREE.Vector3} newPosition - The new world position for the trail head. * @param {number} dropFactor - The 0-1 factor indicating the sphere's current depth (0=close, 1=far). */ function updateTrail(trailLine, newPosition, dropFactor) { const positions = trailLine.geometry.attributes.position.array; const colors = trailLine.geometry.attributes.color.array; // Shift all points back one step for (let i = TRAIL_LENGTH - 1; i > 0; i--) { const prevIndex = (i - 1) * 3; const currIndex = i * 3; positions[currIndex] = positions[prevIndex]; positions[currIndex + 1] = positions[prevIndex + 1]; positions[currIndex + 2] = positions[prevIndex + 2]; } // Insert the new position at the head (index 0) positions[0] = newPosition.x; positions[1] = newPosition.y; positions[2] = newPosition.z; // --- Color Gradient: Magenta -> Blue -> Orange, fading to black at the tail --- const MAGENTA = new THREE.Color(0xFF00FF); const BLUE = new THREE.Color(0x0000FF); const ORANGE = new THREE.Color(0xFFA500); for (let i = 0; i < TRAIL_LENGTH; i++) { const factor = i / TRAIL_LENGTH; // 0 at head, 1 at tail let interpolatedColor = new THREE.Color(); // 1. Calculate the M-B-O hue shift along the length if (factor < 0.5) { // First half: Magenta (0) -> Blue (0.5) const localFactor = factor * 2; interpolatedColor.copy(MAGENTA).lerp(BLUE, localFactor); } else { // Second half: Blue (0.5) -> Orange (1.0) const localFactor = (factor - 0.5) * 2; interpolatedColor.copy(BLUE).lerp(ORANGE, localFactor); } // 2. Apply a fade to black over the length for the glow effect // Use a power function to make the fade more dramatic towards the end. const fadeFactor = 1 - Math.pow(factor, 2.5); // 1 at head, 0 at tail, with a sharp drop-off interpolatedColor.multiplyScalar(fadeFactor); const index = i * 3; colors[index] = interpolatedColor.r; colors[index + 1] = interpolatedColor.g; colors[index + 2] = interpolatedColor.b; } // --- End Color Gradient Update --- trailLine.geometry.attributes.position.needsUpdate = true; trailLine.geometry.attributes.color.needsUpdate = true; } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { requestAnimationFrame(animate); const time = clock.getElapsedTime(); // 1. Drop and Return Movement // dropFactor goes from 0 (Z=0) to 1 (Z=-16) and back to 0 const dropFactor = (1 - Math.cos(time * Math.PI * DROP_CYCLE_SPEED)) / 2; const ballZ = DROP_DEPTH * dropFactor; carousel.position.z = ballZ; // Check for water ripple impact (when the ball passes IMPACT_Z = -10) // We only trigger when the ball is moving away from the camera (dropping) if (ballZ < IMPACT_Z + IMPACT_TOLERANCE && ballZ > IMPACT_Z && !hasImpacted) { // Trigger the ripple effect! rippleUniforms.u_impactTime.value = time; hasImpacted = true; } // Reset the impact flag when the ball is clearly returning (close to Z=0) if (dropFactor < 0.1) { hasImpacted = false; } // Update shader time uniform if (rippleUniforms) { rippleUniforms.u_time.value = time; } // 2. Scaling based on depth const scale = MAX_SCALE - (MAX_SCALE - MIN_SCALE) * dropFactor; carousel.scale.set(scale, scale, scale); // 3. Spin the outer glass carousel carousel.rotation.z -= TRAIL_SPEED; carousel.rotation.y += TRAIL_SPEED * 0.5; // 3b. Spin the internal sphere for a layered effect (slowed down) if (internalSphere) { internalSphere.rotation.y += TRAIL_SPEED * 0.1; internalSphere.rotation.x += TRAIL_SPEED * 0.05; } // 4. Spin the background if (backgroundMesh) { backgroundMesh.rotation.z -= BACKGROUND_SPIN_SPEED; } // 5. Update all 24 trails (8 base trails * 3 diffusion lines) const trackingPointWorld = new THREE.Vector3(); const scatteredPosition = new THREE.Vector3(); for (let i = 0; i < NUM_BASE_TRAILS; i++) { trackingDummies[i].getWorldPosition(trackingPointWorld); for (let j = 0; j < DIFFUSION_FACTOR; j++) { const trailIndex = i * DIFFUSION_FACTOR + j; const trailLine = trailLines[trailIndex]; // Apply slight random scatter to the position before updating the trail scatteredPosition.copy(trackingPointWorld).add( new THREE.Vector3( (Math.random() - 0.5) * SCATTER_AMOUNT, (Math.random() - 0.5) * SCATTER_AMOUNT, (Math.random() - 0.5) * SCATTER_AMOUNT ) ); // Pass the dropFactor and the scattered position updateTrail(trailLine, scatteredPosition, dropFactor); } } renderer.render(scene, camera); } init(); animate();

Miele

Artwork Torus Motion

Artwork Torus Motion