import * as THREE from 'three'; import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.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 { OutputPass } from 'three/addons/postprocessing/OutputPass.js'; export default function sketch(ctx) { const {scene,camera,renderer,gui,size,canvas,sfx,textures}=ctx; const params={pace:0.65,population:24,fog:0.026,portal:1.4,warmth:0.75,sound:0.5}; gui.add(params,'pace',0,1.8,0.01).name('Procession pace'); gui.add(params,'population',8,32,1).name('Yōkai'); gui.add(params,'fog',0.008,0.065,0.001).name('Night mist'); gui.add(params,'portal',0.2,3,0.01).name('Otherworld light'); gui.add(params,'warmth',0,1,0.01).name('Lantern warmth'); gui.add(params,'sound',0,1,0.01).name('Sound volume'); renderer.toneMapping=THREE.ACESFilmicToneMapping; renderer.toneMappingExposure=1.15; renderer.shadowMap.enabled=true; renderer.shadowMap.type=THREE.PCFSoftShadowMap; scene.background=new THREE.Color('#070d1b'); scene.fog=new THREE.FogExp2('#111d2c',params.fog); const pmrem=new THREE.PMREMGenerator(renderer); const env=pmrem.fromScene(new RoomEnvironment(),0.08); scene.environment=env.texture; scene.environmentIntensity=0.25; const paper=textures.get('tex_bjyRBgMA4kvl'); const stone=textures.get('tex_60K5ld7kB5dD',{repeat:[8,26]}); const mat=(color,roughness=0.9)=>new THREE.MeshStandardMaterial({color,roughness}); const washi=(color)=>new THREE.MeshStandardMaterial({color,map:paper,roughness:0.92,side:THREE.DoubleSide}); const ink=mat('#141625'),wood=mat('#362c2a'),red=mat('#9b342e'); const ivory=washi('#e6d5a8'),ochre=washi('#b79959'),rust=washi('#b44d39'),blue=washi('#334c66'),robeWhite=washi('#bcbcaf'); const faceMat=washi('#c9c6b2'),horn=mat('#d5b987'),black=mat('#090e19'); const tongue=mat('#b02b3d',0.55); const eyeMat=new THREE.MeshStandardMaterial({color:'#f6e3b4',emissive:'#ffbc70',emissiveIntensity:0.3,roughness:0.4}); const lanternMat=new THREE.MeshStandardMaterial({map:paper,color:'#eb9e53',emissive:'#ff6b25',emissiveIntensity:1.1,roughness:0.9}); const jadeMat=new THREE.MeshBasicMaterial({color:'#7efcd1'}); scene.add(new THREE.HemisphereLight('#7e9cbe','#25242b',1.1)); const moonKey=new THREE.DirectionalLight('#a9cbe9',2.4); moonKey.position.set(-9,16,5); moonKey.castShadow=true; moonKey.shadow.mapSize.set(2048,2048); Object.assign(moonKey.shadow.camera,{left:-22,right:22,top:23,bottom:-23,near:1,far:65}); moonKey.shadow.bias=-0.0005; moonKey.shadow.normalBias=0.045; moonKey.target.position.set(0,0,-6);scene.add(moonKey,moonKey.target); const gateLight=new THREE.PointLight('#64ebcc',150,28,2);gateLight.position.set(0,4,-17);scene.add(gateLight); const warmLight=new THREE.PointLight('#ff9850',90,16,2);warmLight.position.set(-1,3,5);scene.add(warmLight); const fill=new THREE.DirectionalLight('#568eac',0.6);fill.position.set(10,5,-20);scene.add(fill); const sphere=new THREE.SphereGeometry(1,20,12), box=new THREE.BoxGeometry(1,1,1), cyl=new THREE.CylinderGeometry(1,1,1,12), cone=new THREE.ConeGeometry(1,1,12); function mesh(g,m,parent,x=0,y=0,z=0,sx=1,sy=sx,sz=sx){const o=new THREE.Mesh(g,m);o.position.set(x,y,z);o.scale.set(sx,sy,sz);o.castShadow=true;o.receiveShadow=true;parent.add(o);return o;} function ball(parent,m,x,y,z,sx,sy=sx,sz=sx){return mesh(sphere,m,parent,x,y,z,sx,sy,sz);} function rod(parent,m,a,b,r){const d=new THREE.Vector3().subVectors(b,a);const o=mesh(cyl,m,parent,0,0,0,r,d.length(),r);o.position.copy(a).add(b).multiplyScalar(0.5);o.quaternion.setFromUnitVectors(new THREE.Vector3(0,1,0),d.normalize());return o;} function lineSet(points,color,opacity=1){const g=new THREE.BufferGeometry();g.setAttribute('position',new THREE.Float32BufferAttribute(points,3));return new THREE.LineSegments(g,new THREE.LineBasicMaterial({color,transparent:opacity<1,opacity}));} const floor=mesh(new THREE.PlaneGeometry(180,160),mat('#172225'),scene,0,-0.06,-20);floor.rotation.x=-Math.PI/2;floor.castShadow=false; function path(z){return Math.sin((z+19)*0.19)*3.0;} const roadPos=[],roadUV=[],roadIdx=[]; for(let i=0;i<=120;i++){const z=-28+i*0.41;for(let j=0;j<2;j++){roadPos.push(path(z)+(j?3.1:-3.1),0.01,z);roadUV.push(j,i/120);}} for(let i=0;i<120;i++){let a=i*2;roadIdx.push(a,a+2,a+1,a+1,a+2,a+3);} const roadGeo=new THREE.BufferGeometry();roadGeo.setAttribute('position',new THREE.Float32BufferAttribute(roadPos,3));roadGeo.setAttribute('uv',new THREE.Float32BufferAttribute(roadUV,2));roadGeo.setIndex(roadIdx);roadGeo.computeVertexNormals(); const road=new THREE.Mesh(roadGeo,new THREE.MeshStandardMaterial({map:stone,color:'#7e8d9b',roughness:0.82,side:THREE.DoubleSide}));road.receiveShadow=true;scene.add(road); let seed=7281;function rand(){seed=(seed*16807)%2147483647;return(seed-1)/2147483646;} const dummy=new THREE.Object3D(); const grass=new THREE.InstancedMesh(new THREE.ConeGeometry(0.065,0.65,3),mat('#273b3a'),1600); for(let i=0;i<1600;i++){const z=-30+rand()*60,side=rand()<0.5?-1:1;dummy.position.set(path(z)+side*(3.25+rand()*13),0.1,z);dummy.scale.set(0.7+rand(),0.3+rand()*1.4,0.7);dummy.rotation.set(0,rand()*6.28,side*rand()*0.4);dummy.updateMatrix();grass.setMatrixAt(i,dummy.matrix);}scene.add(grass); // Distant cedars frame the open sky. const trunks=[],boughs=[]; for(let i=0;i<36;i++){const z=-34+rand()*57;const x=(rand()<0.5?-1:1)*(9+rand()*20);const h=10+rand()*13;trunks.push({x,z,h});} const treeTrunks=new THREE.InstancedMesh(cyl,mat('#101b25'),trunks.length); const treeCrowns=new THREE.InstancedMesh(cone,mat('#10232c'),trunks.length*3); trunks.forEach((t,i)=>{dummy.rotation.set(0,0,0);dummy.position.set(t.x,t.h*0.4,t.z);dummy.scale.set(0.24,t.h*0.8,0.24);dummy.updateMatrix();treeTrunks.setMatrixAt(i,dummy.matrix);for(let k=0;k<3;k++){dummy.position.set(t.x,t.h*(0.58+k*0.13),t.z);dummy.scale.set(3.5-k*0.7,t.h*0.5,3.5-k*0.7);dummy.updateMatrix();treeCrowns.setMatrixAt(i*3+k,dummy.matrix);}});scene.add(treeTrunks,treeCrowns); // Moon, behind the dimensional gate. const moon=ball(scene,new THREE.MeshBasicMaterial({color:'#adc6bd'}),-11,20,-62,3.0);moon.castShadow=false; const moonHalo=new THREE.Mesh(new THREE.PlaneGeometry(19,19),new THREE.ShaderMaterial({transparent:true,depthWrite:false,blending:THREE.AdditiveBlending,vertexShader:'varying vec2 vUv; void main(){vUv=uv;gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0);}',fragmentShader:'varying vec2 vUv;void main(){float r=length(vUv-0.5)*2.0;gl_FragColor=vec4(0.32,0.48,0.5,exp(-r*r*8.0)*0.12);}'}));moonHalo.position.copy(moon.position);scene.add(moonHalo); // A tear in space, with ragged nested contours. const portalGroup=new THREE.Group();portalGroup.position.set(0,4.3,-19);scene.add(portalGroup); const portalUniforms={t:{value:0},power:{value:params.portal}}; const portalFace=new THREE.Mesh(new THREE.PlaneGeometry(6.9,9.3),new THREE.ShaderMaterial({uniforms:portalUniforms,transparent:true,depthWrite:false,side:THREE.DoubleSide,vertexShader:'varying vec2 vUv;void main(){vUv=uv;gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0);}',fragmentShader:`varying vec2 vUv;uniform float t;uniform float power; void main(){vec2 p=(vUv-0.5)*2.0;float a=atan(p.y,p.x);float r=length(p);float rough=0.025*sin(a*19.0+t)+0.018*sin(a*37.0-t*0.5);float edge=abs(r-0.84-rough);float rim=exp(-edge*85.0);float mist=exp(-edge*14.0);float spiral=sin(a*4.0+r*32.0-t*0.5);float veil=(0.5+0.5*spiral)*0.028;vec3 col=vec3(0.004,0.016,0.027)+vec3(0.12,0.9,0.67)*(rim*1.9+mist*0.18+veil)*power;float alpha=(1.0-smoothstep(0.87,1.0,r))*0.98;gl_FragColor=vec4(col,alpha);}` }));portalGroup.add(portalFace);portalFace.castShadow=false; const contours=[]; for(let k=0;k<7;k++){const positions=new Float32Array(241*3);const geo=new THREE.BufferGeometry();geo.setAttribute('position',new THREE.BufferAttribute(positions,3));const m=new THREE.LineBasicMaterial({color:k%2?'#8bffe2':'#339eab',transparent:true,opacity:0.65-k*0.065,blending:THREE.AdditiveBlending,depthWrite:false});const line=new THREE.Line(geo,m);portalGroup.add(line);contours.push({line,positions,k});} // Weathered vermilion gate, its hanging paper talismans trembling. const gate=new THREE.Group();gate.position.set(0,0,-19.3);scene.add(gate); for(const side of [-1,1]){mesh(cyl,red,gate,side*3.75,4.7,0,0.27,9.4,0.27);mesh(box,black,gate,side*3.75,0.4,0,0.65,0.8,0.65);} mesh(box,red,gate,0,8.3,0,9.2,0.34,0.5);mesh(box,ink,gate,0,9.15,0,10,0.4,0.8); for(const side of [-1,1]){const e=mesh(box,ink,gate,side*5.05,9.25,0,0.9,0.35,0.8);e.rotation.z=side*0.18;} const ropePoints=[];for(let i=0;i<=60;i++){const x=-3.6+i*0.12;ropePoints.push(new THREE.Vector3(x,7.85-0.55*(1-x*x/13),0.4));} const rope=new THREE.Mesh(new THREE.TubeGeometry(new THREE.CatmullRomCurve3(ropePoints),60,0.065,5,false),ochre);gate.add(rope); const talismans=[]; for(let i=0;i<7;i++){const g=new THREE.Group();g.position.set(-2.7+i*0.9,7.45+0.2*Math.abs(i-3)/3,0.42);gate.add(g);for(let j=0;j<3;j++){const q=mesh(box,ivory,g,(j%2)*0.12,-j*0.18-0.1,0,0.22,0.27,0.018);q.rotation.z=(j%2?1:-1)*0.65;}talismans.push(g);} function ribs(parent,radius,height){const a=[];for(let k=0;k<8;k++){let y=-height*0.44+k*height*0.125;let rr=radius*Math.sqrt(Math.max(0.05,1-(y/(height*0.55))**2));for(let j=0;j<32;j++){const x=j*Math.PI/16,xx=(j+1)*Math.PI/16;a.push(rr*Math.cos(x),y,rr*Math.sin(x),rr*Math.cos(xx),y,rr*Math.sin(xx));}}parent.add(lineSet(a,'#4c332c',0.65));} function lantern(parent,x,y,z,scale=1,monster=false){const g=new THREE.Group();g.position.set(x,y,z);g.scale.setScalar(scale);parent.add(g);ball(g,lanternMat,0,0,0,0.32,0.48,0.32);ribs(g,0.325,0.91);mesh(cyl,ink,g,0,0.47,0,0.15,0.07,0.15);mesh(cyl,ink,g,0,-0.46,0,0.17,0.07,0.17);rod(g,wood,new THREE.Vector3(0,0.5,0),new THREE.Vector3(0,0.85,0),0.018);if(monster){eye(g,0,0.06,0.31,0.17);ball(g,black,0,-0.22,0.295,0.19,0.12,0.055);ball(g,tongue,0,-0.38,0.34,0.09,0.22,0.035);}return g;} function eye(parent,x,y,z,r){ball(parent,eyeMat,x,y,z,r,r*0.72,r*0.34);ball(parent,black,x,y,z+r*0.27,r*0.31,r*0.49,r*0.16);} function robe(parent,m,height=1.35){const geo=new THREE.CylinderGeometry(0.28,0.64,height,10,1,true);mesh(geo,m,parent,0,height*0.5+0.36,0);const obi=mesh(cyl,rust,parent,0,1.02,0,0.44,0.2,0.4);return obi;} function umbrella(){const g=new THREE.Group();const parts={};rod(g,wood,new THREE.Vector3(0,0.5,0),new THREE.Vector3(0,2.7,0),0.055); const pos=[],uvs=[],idx=[];pos.push(0,2.8,0);uvs.push(0.5,0.5);for(let i=0;i<=12;i++){const a=i*Math.PI/6;pos.push(Math.cos(a)*1.07,2.12-(i%2)*0.13,Math.sin(a)*1.07);uvs.push(0.5+Math.cos(a)*0.5,0.5+Math.sin(a)*0.5);if(i<12)idx.push(0,i+1,i+2);}const geo=new THREE.BufferGeometry();geo.setAttribute('position',new THREE.Float32BufferAttribute(pos,3));geo.setAttribute('uv',new THREE.Float32BufferAttribute(uvs,2));geo.setIndex(idx);geo.computeVertexNormals();mesh(geo,rand()<0.5?ochre:rust,g); const spokes=[];for(let i=0;i<12;i++){const a=i*Math.PI/6;spokes.push(0,2.805,0,Math.cos(a)*1.07,2.12-(i%2)*0.13,Math.sin(a)*1.07);}g.add(lineSet(spokes,'#312a2a')); eye(g,0,2.36,0.7,0.28);ball(g,black,0,2.1,0.9,0.3,0.09,0.05);const t=ball(g,tongue,0.05,1.83,1.0,0.14,0.31,0.055);t.rotation.z=-0.12; const leg=new THREE.Group();leg.position.y=0.84;g.add(leg);mesh(cyl,ivory,leg,0,-0.26,0,0.10,0.58,0.1);mesh(box,wood,leg,0,-0.63,0.12,0.36,0.16,0.65);mesh(box,black,leg,0,-0.75,0.04,0.34,0.16,0.1);mesh(box,black,leg,0,-0.75,0.27,0.34,0.16,0.1);parts.leg=leg;parts.tongue=t;return {g,parts,type:0};} function oni(){const g=new THREE.Group(),parts={};robe(g,rand()<0.5?blue:ink,1.6); for(const side of [-1,1]){const arm=new THREE.Group();arm.position.set(side*0.32,1.8,0);g.add(arm);const sleeve=mesh(box,blue,arm,side*0.37,-0.26,0,0.6,0.85,0.5);sleeve.rotation.z=side*0.18;ball(arm,ochre,side*0.65,-0.54,0.14,0.12);parts[side<0?'left':'right']=arm;const leg=mesh(box,wood,g,side*0.24,0.19,0.08,0.25,0.25,0.52);parts[side<0?'footL':'footR']=leg;} const head=new THREE.Group();head.position.set(0,2.25,0);g.add(head);ball(head,rust,0,0,0,0.51,0.6,0.42);ball(head,rust,0,-0.12,0.41,0.22,0.16,0.14); for(const s of [-1,1]){const h=mesh(cone,horn,head,s*0.3,0.68,0,0.13,0.58,0.13);h.rotation.z=-s*0.27;eye(head,s*0.22,0.13,0.37,0.145);const brow=mesh(box,ink,head,s*0.22,0.27,0.4,0.34,0.09,0.09);brow.rotation.z=s*0.26;const tooth=mesh(cone,ivory,head,s*0.22,-0.24,0.42,0.065,0.24,0.055);tooth.rotation.z=Math.PI;} ball(head,black,0,-0.29,0.35,0.3,0.14,0.1);mesh(box,ivory,head,0,-0.24,0.445,0.3,0.07,0.025); const stick=rod(g,wood,new THREE.Vector3(0.92,0.1,0.25),new THREE.Vector3(0.92,3.45,0.25),0.045);parts.lantern=lantern(g,0.92,2.8,0.25,0.77);parts.head=head;return{g,parts,type:1};} function longneck(){const g=new THREE.Group(),parts={};robe(g,robeWhite,1.35);for(const s of [-1,1]){const arm=new THREE.Group();arm.position.set(s*0.3,1.5,0);g.add(arm);const m=mesh(box,robeWhite,arm,s*0.3,-0.35,0,0.53,0.95,0.42);m.rotation.z=s*0.25;parts[s<0?'left':'right']=arm;} const neckGroup=new THREE.Group();neckGroup.position.set(0,1.65,0);g.add(neckGroup);const curve=new THREE.CatmullRomCurve3([new THREE.Vector3(0,0,0),new THREE.Vector3(0.18,0.65,0),new THREE.Vector3(-0.32,1.3,0),new THREE.Vector3(-0.25,1.8,0.1)]);mesh(new THREE.TubeGeometry(curve,24,0.115,8,false),faceMat,neckGroup);const head=new THREE.Group();head.position.set(-0.25,1.88,0.1);neckGroup.add(head);ball(head,black,0,0.08,-0.08,0.39,0.5,0.33);ball(head,faceMat,0,-0.05,0.13,0.29,0.37,0.22);for(const s of [-1,1]){const e=mesh(box,black,head,s*0.12,-0.015,0.34,0.12,0.024,0.018);e.rotation.z=s*0.17;}ball(head,tongue,0,-0.22,0.337,0.075,0.027,0.018);parts.neck=neckGroup;parts.lantern=lantern(g,-0.75,0.9,0.3,0.7);return{g,parts,type:2};} function chochin(){const g=new THREE.Group(),parts={};const l=lantern(g,0,1.85,0,1.85,true);parts.lantern=l;const tails=[];for(let j=0;j<3;j++){const strip=mesh(box,robeWhite,g,(j-1)*0.19,0.58,0,0.12,1.0-j*0.1,0.025);strip.rotation.z=(j-1)*0.2;tails.push(strip);}parts.tails=tails;return{g,parts,type:3};} const creatures=[]; for(let i=0;i<32;i++){let c=[umbrella,oni,longneck,chochin][i%4]();c.phase=rand()*6.28;c.lane=(i%3-1)*1.6;c.offset=i/32;c.scale=0.8+rand()*0.3;c.g.scale.setScalar(c.scale);scene.add(c.g);creatures.push(c);} // Stone votive lanterns along the verge. for(let i=0;i<8;i++){const z=9-i*4.9;const x=path(z)+(i%2?-4.2:4.2);const g=new THREE.Group();g.position.set(x,0,z);scene.add(g);mesh(box,ink,g,0,0.14,0,0.85,0.28,0.85);mesh(cyl,ink,g,0,0.7,0,0.2,1.15,0.2);mesh(box,ink,g,0,1.35,0,0.75,0.2,0.75);ball(g,lanternMat,0,1.6,0,0.22,0.27,0.22);for(const s of [-1,1])for(const t of [-1,1])mesh(box,ink,g,s*0.29,1.64,t*0.29,0.09,0.55,0.09);mesh(cone,ink,g,0,2.04,0,0.7,0.4,0.7);} // Ghostfire and paper fragments, drifting in the gate's wake. const flameGeo=new THREE.SphereGeometry(1,10,8); const flames=new THREE.InstancedMesh(flameGeo,jadeMat,70);scene.add(flames); const sparksG=new THREE.BufferGeometry(),sparkData=new Float32Array(650*3),sparkSeed=[]; for(let i=0;i<650;i++){sparkSeed.push([rand(),rand(),rand()]);sparkData[i*3]=(rand()-0.5)*40;sparkData[i*3+1]=rand()*13;sparkData[i*3+2]=-25+rand()*45;}sparksG.setAttribute('position',new THREE.BufferAttribute(sparkData,3)); const sparks=new THREE.Points(sparksG,new THREE.PointsMaterial({color:'#a9d8c9',size:0.045,transparent:true,opacity:0.55,depthWrite:false,blending:THREE.AdditiveBlending}));scene.add(sparks); const composer=new EffectComposer(renderer);composer.addPass(new RenderPass(scene,camera));const bloom=new UnrealBloomPass(new THREE.Vector2(size.width,size.height),0.55,0.65,0.85);composer.addPass(bloom);composer.addPass(new OutputPass()); let audio=null,lastBell=-10,elapsed=0,travel=0,px=0,py=0,dragX=0,dragY=0,held=false,lastX=0,lastY=0; function down(e){held=true;lastX=e.clientX;lastY=e.clientY;if(!audio)audio=sfx.loop('sfx_mN5r2U3pvkiC',{volume:0.4});if(elapsed-lastBell>1.8){sfx.play('sfx_HPtBxCiT3hsW',{volume:0.32,rate:0.9+Math.random()*0.18,pan:0});lastBell=elapsed;}} function move(e){if(held){dragX=THREE.MathUtils.clamp(dragX+(e.clientX-lastX)/Math.max(size.width,1)*2,-0.7,0.7);dragY=THREE.MathUtils.clamp(dragY+(e.clientY-lastY)/Math.max(size.height,1),-0.25,0.3);lastX=e.clientX;lastY=e.clientY;}} function up(){held=false;} canvas.addEventListener('pointerdown',down);canvas.addEventListener('pointermove',move);canvas.addEventListener('pointerup',up);canvas.addEventListener('pointercancel',up);canvas.addEventListener('pointerleave',up);canvas.style.touchAction='none'; const look=new THREE.Vector3(0,3.2,-6.5); function layout(){camera.fov=46;camera.near=0.1;camera.far=160;camera.updateProjectionMatrix();composer.setSize(size.width,size.height);} layout(); const coldColor=new THREE.Color('#92edcc'),hotColor=new THREE.Color('#ffa14c'); return {update({time,delta,pointer}){ elapsed=time;const dt=Math.min(delta,0.05);travel+=dt*params.pace*0.58; sfx.volume=params.sound; scene.fog.density=params.fog;portalUniforms.t.value=time;portalUniforms.power.value=params.portal;gateLight.intensity=110*params.portal; lanternMat.emissive.copy(coldColor).lerp(hotColor,params.warmth);lanternMat.color.copy(coldColor).lerp(hotColor,params.warmth);warmLight.color.copy(lanternMat.emissive); px=THREE.MathUtils.damp(px,pointer.inside?pointer.x:0,2,dt);py=THREE.MathUtils.damp(py,pointer.inside?pointer.y:0,2,dt); if(!held){dragX*=Math.exp(-dt*0.09);dragY*=Math.exp(-dt*0.09);} const portrait=Math.max(0,1-size.width/Math.max(size.height,1));const dist=1+portrait*1.0;const a=0.25+px*0.055+dragX*0.5; camera.position.set(Math.sin(a)*30*dist,7.7+portrait*4+py*0.35+dragY*5,Math.cos(a)*30*dist-6.5);camera.lookAt(look); for(let i=0;i{g.rotation.x=Math.sin(time*0.9+i)*0.17;g.rotation.z=Math.sin(time*0.7+i)*0.07;}); for(let i=0;i<70;i++){const a=i*2.399+time*0.1;const z=-20+((i*0.715+time*0.18)%34);dummy.position.set(path(z)+Math.sin(a)*(2.5+i%4),1.3+(i%7)*0.6+Math.sin(time+i)*0.25,z);const r=0.035+(i%4)*0.013;dummy.scale.set(r,r*(2.1+Math.sin(time*2+i)*0.5),r);dummy.rotation.set(0,0,Math.sin(time+i)*0.3);dummy.updateMatrix();flames.setMatrixAt(i,dummy.matrix);}flames.instanceMatrix.needsUpdate=true; const arr=sparks.geometry.attributes.position.array;for(let i=0;i<650;i++){const v=sparkSeed[i];arr[i*3]=(v[0]-0.5)*35+Math.sin(time*0.13+v[1]*12)*0.5;arr[i*3+1]=(v[1]*14+time*0.08)%14;arr[i*3+2]=-27+v[2]*48;}sparks.geometry.attributes.position.needsUpdate=true; moonHalo.quaternion.copy(camera.quaternion);bloom.strength=0.4+params.portal*0.12; },render(){composer.render();},resize(){layout();},dispose(){canvas.removeEventListener('pointerdown',down);canvas.removeEventListener('pointermove',move);canvas.removeEventListener('pointerup',up);canvas.removeEventListener('pointercancel',up);canvas.removeEventListener('pointerleave',up);if(audio)audio.stop();composer.dispose();env.dispose();pmrem.dispose();}}; }