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'; import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js'; // Initialize audio const bgAudio = new Audio('https://play.rosebud.ai/assets/WildKittyTunes - City Pop (mp3).mp3?uzyR'); bgAudio.loop = true; bgAudio.volume = 0; // Start with volume 0 for fade-in bgAudio.currentTime = 35; // Create fade-in function function fadeInAudio(audio, targetVolume, duration) { const interval = 50; // Update every 50ms const steps = duration / interval; const volumeStep = targetVolume / steps; let currentStep = 0; const fadeInterval = setInterval(() => { currentStep++; audio.volume = Math.min(targetVolume, volumeStep * currentStep); if (currentStep >= steps) { clearInterval(fadeInterval); } }, interval); } const buttonSound = new Audio('https://play.rosebud.ai/assets/short_Mountain Audio - Hi-Tech Device Button 2.mp3?AoAp'); buttonSound.volume = 0.5; // Set button sound volume to 50% // Initialize scene elements const parentDiv = document.getElementById('renderDiv'); let canvas = document.getElementById('threeRenderCanvas'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Update canvas style to be behind overlay canvas.style.position = 'absolute'; canvas.style.top = '0'; canvas.style.left = '0'; canvas.style.zIndex = '1'; // Create HTML overlay for AI interface with z-index const overlay = document.createElement('div'); overlay.style.position = 'fixed'; overlay.style.top = '0'; overlay.style.left = '0'; overlay.style.width = '100vw'; overlay.style.height = '100vh'; overlay.style.pointerEvents = 'auto'; overlay.style.zIndex = '2'; overlay.innerHTML = `

FujiRise

A Gateway to Modern Zen

Awaken Beneath the Digital Fuji

`; parentDiv.appendChild(overlay); // Initialize the scene const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000 ); camera.position.set(0, 0, 15); camera.lookAt(0, 0, 0); // Initialize renderer const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas, alpha: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(canvas.offsetWidth, canvas.offsetHeight); renderer.setClearColor(0x000000, 1); // Create pattern shader const patternShader = { vertexShader: ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform float iTime; uniform vec2 iResolution; uniform vec2 iMouse; float sun(vec2 uv, float battery) { float val = smoothstep(0.3, 0.29, length(uv)); float bloom = smoothstep(0.7, 0.0, length(uv)); float cut = 3.0 * sin((uv.y + iTime * 0.2 * (battery + 0.02)) * 100.0) + clamp(uv.y * 14.0 + 1.0, -6.0, 6.0); cut = clamp(cut, 0.0, 1.0); return clamp(val * cut, 0.0, 1.0) + bloom * 0.6; } float grid(vec2 uv, float battery) { vec2 size = vec2(uv.y, uv.y * uv.y * 0.2) * 0.01; uv += vec2(0.0, iTime * 4.0 * (battery + 0.05)); uv = abs(fract(uv) - 0.5); vec2 lines = smoothstep(size, vec2(0.0), uv); lines += smoothstep(size * 5.0, vec2(0.0), uv) * 0.4 * battery; return clamp(lines.x + lines.y, 0.0, 3.0); } float dot2(in vec2 v ) { return dot(v,v); } float sdTrapezoid(in vec2 p, in float r1, float r2, float he) { vec2 k1 = vec2(r2,he); vec2 k2 = vec2(r2-r1,2.0*he); p.x = abs(p.x); vec2 ca = vec2(p.x-min(p.x,(p.y<0.0)?r1:r2), abs(p.y)-he); vec2 cb = p - k1 + k2*clamp( dot(k1-p,k2)/dot2(k2), 0.0, 1.0 ); float s = (cb.x<0.0 && ca.y<0.0) ? -1.0 : 1.0; return s*sqrt( min(dot2(ca),dot2(cb)) ); } float sdLine(in vec2 p, in vec2 a, in vec2 b) { vec2 pa = p-a, ba = b-a; float h = clamp( dot(pa,ba)/dot(ba,ba), 0.0, 1.0 ); return length( pa - ba*h ); } float sdBox(in vec2 p, in vec2 b) { vec2 d = abs(p)-b; return length(max(d,vec2(0))) + min(max(d.x,d.y),0.0); } float opSmoothUnion(float d1, float d2, float k) { float h = clamp(0.5 + 0.5 * (d2 - d1) /k,0.0,1.0); return mix(d2, d1 , h) - k * h * ( 1.0 - h); } float sdCloud(in vec2 p, in vec2 a1, in vec2 b1, in vec2 a2, in vec2 b2, float w) { float lineVal1 = sdLine(p, a1, b1); float lineVal2 = sdLine(p, a2, b2); vec2 ww = vec2(w*1.5, 0.0); vec2 left = max(a1 + ww, a2 + ww); vec2 right = min(b1 - ww, b2 - ww); vec2 boxCenter = (left + right) * 0.5; float boxH = abs(a2.y - a1.y) * 0.5; float boxVal = sdBox(p - boxCenter, vec2(0.04, boxH)) + w; float uniVal1 = opSmoothUnion(lineVal1, boxVal, 0.05); float uniVal2 = opSmoothUnion(lineVal2, boxVal, 0.05); return min(uniVal1, uniVal2); } void main() { vec2 fragCoord = gl_FragCoord.xy; vec2 uv = (2.0 * fragCoord.xy - iResolution.xy)/iResolution.y; float battery = 1.0; float mouseOffset = (iMouse.y / iResolution.y - 0.5) * 0.1; vec3 col = vec3(0.0, 0.12, 0.24); if (uv.y < -0.2) { uv.y = 3.0 / (abs(uv.y + 0.2 + mouseOffset) + 0.05); uv.x *= uv.y * 1.0; float gridVal = grid(uv, battery); col = mix(col, vec3(1.0, 0.4, 1.0), gridVal); } else { float fujiD = min(uv.y * 4.5 - 0.5, 1.0); uv.y -= battery * 1.1 - 0.51 + mouseOffset; vec2 sunUV = uv; vec2 fujiUV = uv; // Sun sunUV += vec2(0.75, 0.2); col = vec3(1.0, 0.15, 1.0); float sunVal = sun(sunUV, battery); col = mix(col, vec3(1.0, 0.35, 0.05), sunUV.y * 2.0 + 0.2); col = mix(vec3(0.0, 0.0, 0.0), col, sunVal); // fuji float fujiVal = sdTrapezoid(uv + vec2(-0.75+sunUV.y * 0.0, 0.5), 1.75 + pow(uv.y * uv.y, 2.1), 0.2, 0.5); float waveVal = uv.y + sin(uv.x * 20.0 + iTime * 2.0) * 0.05 + 0.2; float wave_width = smoothstep(0.0,0.01,(waveVal)); col = mix(col, mix(vec3(0.0, 0.0, 0.3), vec3(1.0, 0.0, 0.6), fujiD), step(fujiVal, 0.0)); col = mix(col, vec3(1.0, 0.4, 1.0), wave_width * step(fujiVal, 0.0)); col = mix(col, vec3(1.0, 0.4, 1.0), 1.0-smoothstep(0.0,0.01,abs(fujiVal))); col += mix(col, mix(vec3(1.0, 0.12, 0.8), vec3(0.0, 0.0, 0.2), clamp(uv.y * 3.5 + 3.0, 0.0, 1.0)), step(0.0, fujiVal)); // cloud vec2 cloudUV = uv; cloudUV.x = mod(cloudUV.x + iTime * 0.1, 4.0) - 2.0; float cloudTime = iTime * 0.5; float cloudY = -0.5; float cloudVal1 = sdCloud(cloudUV, vec2(0.1 + sin(cloudTime + 140.5)*0.1,cloudY), vec2(1.05 + cos(cloudTime * 0.9 - 36.56) * 0.1, cloudY), vec2(0.2 + cos(cloudTime * 0.867 + 387.165) * 0.1,0.25+cloudY), vec2(0.5 + cos(cloudTime * 0.9675 - 15.162) * 0.09, 0.25+cloudY), 0.075); cloudY = -0.6; float cloudVal2 = sdCloud(cloudUV, vec2(-0.9 + cos(cloudTime * 1.02 + 541.75) * 0.1,cloudY), vec2(-0.5 + sin(cloudTime * 0.9 - 316.56) * 0.1, cloudY), vec2(-1.5 + cos(cloudTime * 0.867 + 37.165) * 0.1,0.25+cloudY), vec2(-0.6 + sin(cloudTime * 0.9675 + 665.162) * 0.09, 0.25+cloudY), 0.075); float cloudVal = min(cloudVal1, cloudVal2); col = mix(col, vec3(0.0, 0.0, 0.2), 1.0 - smoothstep(0.075 - 0.0001, 0.075, cloudVal)); col += vec3(1.0, 1.0, 1.0)*(1.0 - smoothstep(0.0,0.01,abs(cloudVal - 0.075))); } float fog = smoothstep(0.1, -0.02, abs(uv.y + 0.2)); col += fog * fog * fog; col = mix(vec3(col.r, col.r, col.r) * 0.5, col, battery * 0.7); gl_FragColor = vec4(col, 1.0); } ` }; // Create shader material with mouse tracking let mouse = new THREE.Vector2(); const shaderMaterial = new THREE.ShaderMaterial({ uniforms: { iTime: { value: 0 }, iResolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) }, iMouse: { value: new THREE.Vector2(0.5, 0.5) } }, vertexShader: patternShader.vertexShader, fragmentShader: patternShader.fragmentShader, transparent: true }); // Create pattern plane that fills the screen const planeHeight = 4 * Math.tan((camera.fov * Math.PI / 180) / 2) * Math.abs(camera.position.z + 5); const planeWidth = planeHeight * camera.aspect; const patternGeometry = new THREE.PlaneGeometry(planeWidth, planeHeight); const patternMesh = new THREE.Mesh(patternGeometry, shaderMaterial); patternMesh.position.set(0, 8, -5); scene.add(patternMesh); // Add ambient lighting const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(ambientLight); // Add directional light const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(10, 10, 10); scene.add(directionalLight); // Post-processing const composer = new EffectComposer(renderer); const renderPass = new RenderPass(scene, camera); composer.addPass(renderPass); const bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 0.7, 0.3, 0.8 ); composer.addPass(bloomPass); const smaaPass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() ); composer.addPass(smaaPass); // Mouse movement handler window.addEventListener('mousemove', (event) => { mouse.x = event.clientX; mouse.y = event.clientY; shaderMaterial.uniforms.iMouse.value.set(mouse.x, mouse.y); // Calculate UI movement const uiContainer = document.getElementById('uiContainer'); if (uiContainer) { const mouseYPercent = (event.clientY / window.innerHeight - 0.5) * 2; // -1 to 1 const mouseXPercent = (event.clientX / window.innerWidth - 0.5) * 2; // -1 to 1 const verticalMovement = mouseYPercent * 8; // Maximum 8px up or down const horizontalMovement = mouseXPercent * 5; // Maximum 5px left or right uiContainer.style.transform = `translate(${horizontalMovement}px, ${verticalMovement}px)`; } }); // Animation loop const clock = new THREE.Clock(); function animate() { requestAnimationFrame(animate); const elapsedTime = clock.getElapsedTime(); shaderMaterial.uniforms.iTime.value = elapsedTime; composer.render(); } // Handle window resize function onWindowResize() { const width = parentDiv.clientWidth; const height = parentDiv.clientHeight; camera.aspect = width / height; camera.updateProjectionMatrix(); // Update pattern plane size const planeHeight = 4 * Math.tan((camera.fov * Math.PI / 180) / 2) * Math.abs(camera.position.z + 5); const planeWidth = planeHeight * camera.aspect; patternMesh.geometry.dispose(); patternMesh.geometry = new THREE.PlaneGeometry(planeWidth, planeHeight); renderer.setSize(width, height); composer.setSize(width, height); shaderMaterial.uniforms.iResolution.value.set(width, height); } window.addEventListener('resize', onWindowResize); const resizeObserver = new ResizeObserver(onWindowResize); resizeObserver.observe(parentDiv); // Add CSS to the page const style = document.createElement('style'); style.textContent = ` #renderDiv { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; margin: 0; padding: 0; background: #000000; overflow: hidden; } #threeRenderCanvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; } `; document.head.appendChild(style); // Auto-play background audio and add button click sound const button = overlay.querySelector('button'); button.addEventListener('click', () => { buttonSound.currentTime = 0; // Reset sound to start buttonSound.play().catch(error => { console.log("Button sound playback failed:", error); }); }); overlay.addEventListener('click', () => { bgAudio.play().then(() => { fadeInAudio(bgAudio, 0.25, 2000); // Fade in to 0.25 volume over 2 seconds }).catch(error => { console.log("Background audio playback failed:", error); }); }, { once: true }); // Initialize the scene animate();