https://vpcinc.jp/assets/js/canvas.js?2

1const vertexShader = `
2
3	uniform float size;uniform float time;uniform sampler2D noiseTex;uniform vec3 mousePos;varying vec3 vColor;const float ts1 = 0.0001000; const float ts2 = 0.0000130; const float ts3 = 0.000010; 
4	float outQuad (float n) {return n *(2. - n);}float rand (float s) {return fract(sin(s*4378.5453123));}					
5	void main() {
6		vColor = color;
7		// vColor = vec3(1., 1., 0.);
8
9		vec4 mvPosition = modelViewMatrix * vec4(
10            // vec3(0.,0.,-1.)*length(position.xy)+ //lol
11			vec3(1., 1., 1.) * position
12            // +time*0.0003
13            + //sin(time*ts1)*
14            
15            10.*(0.5 - texture2D(noiseTex,time*ts2*vec2(-3., -1.1) 
16                                    +position.zz/3.+ position.xy/12.).rgb)
17            *clamp(-0.4 + 1.3*texture2D(noiseTex,time*ts3*vec2(+1.7, -1.3) 
18                                    +position.xy/36.).rgb, 0.,1.)
19            *(1.+77.*(1.-outQuad(min(1.,time / 1.))))
20			* max(0.3,5.5 - 0.85 * length(mousePos-position))
21
22            // + vec3(2., 0., 0.) * (position.z>0.?1.:0.) //z [-1. 1]
23            // + vec3(2., 0., 0.) * (position.y>-5.?1.:0.) //x,y [-6. 6]
24            // +         //// 
25			// vec3(0., 0., 0.5) 
26			// normal*0.13
27			// * max(0.,5.5-length(mousePos-position))
28			// + normal*max(0., 0.3 * (1. - time / 5000.) ) //can be done outside and eased there
29			// + vec3(0., 0., 0.01) * sin(position.x*40. + time * 0.0013)
30			, 1.0 );
31		gl_PointSize = size * ( 60.0 / -mvPosition.z ) ;//* max(0., 0.5 + position.z/2. );
32		// gl_PointSize = size * ( 60.0 / -mvPosition.z )*max(0.,position.z );
33		// gl_PointSize = size * ( 60.0 / -mvPosition.z );
34		// gl_PointSize = 5.* ( 300.0 / -mvPosition.z );
35
36		gl_Position = projectionMatrix * mvPosition;
37
38	}
39`;
40
41// Fragment Shader
42const fragmentShader = `
43uniform sampler2D texture;
44	varying vec3 vColor;
45	void main() {
46		gl_FragColor = vec4(vColor, 1.);
47		gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
48	}
49`;var container;const cameraIsOrbit=!0;var raycaster,camera,scene,renderer;var cameraZ=60;var windowHalfX=window.innerWidth/2;var windowHalfY=window.innerHeight/2;let particlesShMat;let rayPlane;let INTERSECTED;let mouse=new THREE.Vector2();let mousePrev=new THREE.Vector2();let mouseShader=new THREE.Vector3();let controls;init();let timeStart=performance.now();animate();function init(){container=document.createElement('div');document.body.appendChild(container);camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1500);controls=new THREE.OrbitControls(camera);controls.enableZoom=!1;controls.enableRotate=!1;controls.enablePan=!1;controls.autoRotate=!0;controls.autoRotateSpeed=2;camera.position.z=cameraZ;window.addEventListener('wheel',function(event){const scrollDirection=event.deltaY>0?1:-1;const scrollSpeed=Math.abs(event.deltaY)*0.01;controls.autoRotateSpeed=Math.min(Math.max(4+scrollSpeed,1),20)*scrollDirection;clearTimeout(this.scrollTimeout);this.scrollTimeout=setTimeout(()=>{controls.autoRotateSpeed=1},500)});let lastTouchY=0;window.addEventListener('touchstart',function(event){lastTouchY=event.touches[0].clientY});window.addEventListener('touchmove',function(event){const currentTouchY=event.touches[0].clientY;const deltaY=lastTouchY-currentTouchY;lastTouchY=currentTouchY;const scrollDirection=deltaY>0?1:-1;const scrollSpeed=Math.abs(deltaY)*0.01;controls.autoRotateSpeed=Math.min(Math.max(4+scrollSpeed,1),20)*scrollDirection;clearTimeout(this.scrollTimeout);this.scrollTimeout=setTimeout(()=>{controls.autoRotateSpeed=1},500)});scene=new THREE.Scene();let noiseTex=new THREE.TextureLoader().load('/assets/textures/noise.webp');noiseTex.wrapS=THREE.RepeatWrapping;noiseTex.wrapT=THREE.RepeatWrapping;let uniforms={texture:{value:new THREE.TextureLoader().load('/assets/textures/sprites/disc.png')},noiseTex:{value:noiseTex},mousePos:{value:new THREE.Vector3(0,0,0)},size:{value:3},time:{value:0.0},};particlesShMat=new THREE.ShaderMaterial({uniforms:uniforms,vertexShader:vertexShader,fragmentShader:fragmentShader,blending:THREE.AdditiveBlending,depthTest:!1,transparent:!0,vertexColors:!0});rayPlane=new THREE.Mesh(new THREE.PlaneGeometry(100,100),new THREE.MeshBasicMaterial({color:0xff0000,side:THREE.DoubleSide,wireframe:!0}));raycaster=new THREE.Raycaster();var ambientLight=new THREE.AmbientLight(0xcccccc,0.4);scene.add(ambientLight);var pointLight=new THREE.PointLight(0xffffff,0.8);camera.add(pointLight);scene.add(camera);var loader=new THREE.PCDLoader();loader.load('/assets/textures/ccc.pcd',function(mesh){let chGeo=mesh.geometry;let origPosArr=chGeo.attributes.position.array;let origNormArr=chGeo.attributes.normal.array;let newPos=[];let newNorm=[];let newSize=[];let newColor=[];let mn=100000,mx=-100000;const hFrom=0.1;const hTo=1;for(let i=0;i<origPosArr.length;i+=3){const sc=4;const z=sc*origPosArr[i+0];const y=sc*origPosArr[i+1]-6;const x=-1.2-sc*origPosArr[i+2];const xn=origNormArr[i+0];const yn=origNormArr[i+1];const zn=origNormArr[i+2];let vv=y;mn=Math.min(mn,vv);mx=Math.max(mx,vv);let minY=-1.629,maxY=2.472;let hCur=hFrom+(y-minY)/(maxY-minY)*(hTo-hFrom);hCur=Math.abs(hCur);let col=[1.0,1,1.0];newPos.push(x,y,z);newNorm.push(xn,yn,zn);newColor.push(...col)} var newGeo=new THREE.BufferGeometry();newGeo.addAttribute('position',new THREE.BufferAttribute(new Float32Array(newPos),3));newGeo.addAttribute('normal',new THREE.BufferAttribute(new Float32Array(newNorm),3));newGeo.addAttribute('color',new THREE.BufferAttribute(new Float32Array(newColor),3));var particles=new THREE.Points(newGeo,particlesShMat);scene.add(particles)});const canvas = document.getElementById('canvas1');renderer = new THREE.WebGLRenderer({canvas: canvas,antialias: true,alpha: true});renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth,window.innerHeight);document.addEventListener('mousemove',onDocumentMouseMove,!1);window.addEventListener('resize',onWindowResize,!1)} function hsvToRgb(h,s,v){var r,g,b;var i=Math.floor(h*6);var f=h*6-i;var p=v*(1-s);var q=v*(1-f*s);var t=v*(1-(1-f)*s);switch(i%6){case 0:r=v,g=t,b=p;break;case 1:r=q,g=v,b=p;break;case 2:r=p,g=v,b=t;break;case 3:r=p,g=q,b=v;break;case 4:r=t,g=p,b=v;break;case 5:r=v,g=p,b=q;break} return[r,g,b]} function onWindowResize(){windowHalfX=window.innerWidth/2;windowHalfY=window.innerHeight/2;camera.aspect=window.innerWidth/window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth,window.innerHeight)} function onDocumentMouseMove(event){mouse.x=(event.clientX/window.innerWidth)*2-1;mouse.y=-(event.clientY/window.innerHeight)*2+1} function animate(){requestAnimationFrame(animate);particlesShMat.uniforms.time.value=performance.now()-timeStart;controls.update();raycaster.setFromCamera(mouse,camera);var intersects=raycaster.intersectObjects(scene.children,!0);if(intersects.length>0){mouseShader=mouseShader.lerp(intersects[0].point,0.1);particlesShMat.uniforms.mousePos.value=mouseShader}else{} render()} function render(){renderer.render(scene,camera)}