https://www.bayomics.com/static/home/default/js/canvasWave.js?v=20261007222044

1// JavaScript Document
2
3var SEPARATION =110, AMOUNTX =50, AMOUNTY =50;
4//var container;
5var camera, scene, renderer;
6var particles, particle, count = 0;
7var mouseX = 0, mouseY = -350;
8/*
9var windowHalfX = window.innerWidth / 2;
10var windowHalfY = window.innerHeight / 2;
11*/
12
13var windowHalfX, windowHalfY, containerDiv;
14
15
16
17function init(container) {
18	//container = document.getElementById("proA3_bg");
19	containerDiv = container;
20	windowHalfX = $(container).innerWidth() / 2;
21	windowHalfY = $(container).innerHeight() / 2;
22	camera = new THREE.PerspectiveCamera(75, $(container).innerWidth() / $(container).innerHeight(), 1, 10000);
23	camera.position.z = 1000;
24	scene = new THREE.Scene();
25	particles = new Array();
26	var PI2 = Math.PI * 2;
27	var material = new THREE.ParticleCanvasMaterial({
28		color: 0xf0f0f0,
29		program:function(context){
30			context.beginPath();
31			context.arc(0, 0, 1, 0, PI2, true ); //创建一个圆形
32			context.fill();
33		}
34	});
35	var i = 0;
36	for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
37		for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
38			particle = particles[ i ++ ] = new THREE.Particle( material );
39			particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
40			particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 );
41			scene.add( particle );
42		}
43	}
44	renderer = new THREE.CanvasRenderer();
45	renderer.setSize(window.innerWidth, window.innerHeight);
46	container.appendChild(renderer.domElement);
47	//container.addEventListener( 'mousemove', onDocumentMouseMove, false );
48	//container.addEventListener( 'touchstart', onDocumentTouchStart, false );
49	//container.addEventListener( 'touchmove', onDocumentTouchMove, false );
50	window.addEventListener( 'resize', onWindowResize, false );
51}
52
53function onWindowResize() {
54	//windowHalfX = window.innerWidth / 2;
55	//windowHalfY = window.innerHeight / 2;
56	windowHalfX = $(containerDiv).innerWidth() / 2;
57	windowHalfY = $(containerDiv).innerHeight() / 2;
58	camera.aspect = $(containerDiv).innerWidth() / $(containerDiv).innerHeight();
59	camera.updateProjectionMatrix();
60	renderer.setSize( $(containerDiv).innerWidth(), $(containerDiv).innerHeight() );
61}
62
63function onDocumentMouseMove( event) {
64	mouseX = event.clientX - windowHalfX;
65	mouseY = event.clientY - windowHalfY;
66}
67
68function onDocumentTouchStart(event) {
69	if(event.touches.length === 1) {
70		event.preventDefault();
71		mouseX = event.touches[ 0 ].pageX - windowHalfX;
72		mouseY = event.touches[ 0 ].pageY - windowHalfY;
73	}
74}
75
76function onDocumentTouchMove(event) {
77	if(event.touches.length === 1) {
78		event.preventDefault();
79		mouseX = event.touches[ 0 ].pageX - windowHalfX;
80		mouseY = event.touches[ 0 ].pageY - windowHalfY;
81	}
82}
83
84function animate() {
85	requestAnimationFrame( animate );
86	render();
87}
88
89function render() {	
90	camera.position.x += ( mouseX - camera.position.x ) * .05;
91	camera.position.y += ( - mouseY - camera.position.y ) * .05;
92	camera.lookAt( scene.position);
93	var i = 0;
94	for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
95		for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
96			particle = particles[ i++ ];
97			particle.position.y = ( Math.sin( ( ix + count ) * 0.3 ) * 50 ) + ( Math.sin( ( iy + count ) * 0.5 ) * 50 );
98			particle.scale.x = particle.scale.y = ( Math.sin( ( ix + count ) * 0.3 ) + 1 ) * 2 + ( Math.sin( ( iy + count ) * 0.5 ) + 1 ) * 2;
99		}
100	}
101	renderer.render( scene, camera );
102	count += 0.05;
103}