https://www.morelhifi.com/scripts/js/soundwaves.js

1
2import * as THREE from './three.module.js'
3
4jQuery.fn.soundWaves = function(options){
5
6	var defaultOptions = {
7		background: "#000000",
8		width: $(window).width(),
9		height: $(window).height(),
10		alpha: false,
11		separation : 150,
12        amountX : 700,
13        amountY : 600,
14		scale: 1,
15		position: { x:0, y:900, z:1000 },
16		mousemove:true,
17		color:0xffffff
18	}
19
20	options = $.extend(true, defaultOptions, options);
21	options.alpha = options.background=="transparent"?1:0;
22
23
24	let container = $(this)[0];
25	let camera, scene, renderer;
26
27	let particles, count = 0;
28
29	let mouseX = 0, mouseY = 0;
30
31	options.width = convertpercent.call(this, options.width, "width");
32	options.height = convertpercent.call(this, options.height, "height");
33
34	console.log(options.height);
35
36	let windowHalfX = options.width / 2;
37	let windowHalfY = options.height / 2;
38
39	init();
40	animate();
41
42	function init(){
43
44		camera = new THREE.PerspectiveCamera( 75, options.width / options.height, 1, 10000 );
45		camera.position.x = options.position.x;
46		camera.position.y = options.position.y;
47		camera.position.z = options.position.z;
48		var backgroundfinal = trimAny(options.background, '');
49		scene = new THREE.Scene();
50
51		//
52
53		const numParticles = options.amountX * options.amountY;
54
55		const positions = new Float32Array( numParticles * 3 );
56		const scales = new Float32Array( numParticles  );
57
58		let i = 0, j = 0;
59
60		for ( let ix = 0; ix < options.amountX; ix ++ ) {
61			for ( let iy = 0; iy < options.amountY; iy ++ ) {
62				positions[ i ] = (ix * options.separation - ( ( options.amountX * options.separation ) / 2 ))/options.scale; // x
63				positions[ i + 1 ] = 0; // y
64				positions[ i + 2 ] = (iy * options.separation - ( ( options.amountY * options.separation ) / 2 ))/options.scale; // z
65
66				scales[ j ] = 1;
67				i += 3;
68				j ++;
69			}
70		}
71
72		const geometry = new THREE.BufferGeometry();
73		geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
74		geometry.setAttribute( 'scale', new THREE.BufferAttribute( scales, 1 ) );
75
76		const material = new THREE.ShaderMaterial({
77			uniforms: {
78				color: { value: new THREE.Color( options.color ) },
79			},
80			vertexShader: document.getElementById( 'vertexshader' ).textContent,
81			fragmentShader: document.getElementById( 'fragmentshader' ).textContent
82		});
83
84		//
85
86		particles = new THREE.Points( geometry, material );
87		scene.add( particles );
88
89		//
90		renderer = new THREE.WebGLRenderer( { antialias: true, alpha:options.alpha} );
91		renderer.setPixelRatio( window.devicePixelRatio );
92		renderer.setSize( options.width, options.height );
93		renderer.setClearColor( '0x'+backgroundfinal, options.alpha?0:1 );
94
95		container.appendChild( renderer.domElement );
96
97
98		container.style.touchAction = 'none';
99		container.addEventListener( 'pointermove', onPointerMove );
100
101		//
102
103		window.addEventListener( 'resize', onWindowResize );
104
105	}
106
107	function onWindowResize() {
108		windowHalfX = options.width / 2;
109		windowHalfY = options.height / 2;
110
111		camera.aspect = options.width / options.height;
112		camera.updateProjectionMatrix();
113
114		renderer.setSize( options.width, options.height );
115	}
116
117	//
118
119	function onPointerMove( event ) {
120		if ( event.isPrimary === false ) return;
121		mouseX = event.clientX - windowHalfX;
122		mouseY = event.clientY - windowHalfY;
123	}
124
125	//
126
127	function animate() {
128		requestAnimationFrame( animate );
129		render();
130	}
131
132	function render() {
133		if(options.mousemove){
134			camera.position.x += ( mouseX - camera.position.x ) * .005;
135		}else{
136			camera.position.x = options.position.x;
137		}
138
139
140		//camera.position.y += ( - mouseY - camera.position.y ) * .05;
141		camera.position.y = options.position.y;
142		camera.lookAt( scene.position );
143
144		const positions = particles.geometry.attributes.position.array;
145		const scales = particles.geometry.attributes.scale.array;
146
147		let i = 0, j = 0;
148
149		for ( let ix = 0; ix < options.amountX; ix ++ ) {
150			for ( let iy = 0; iy < options.amountY; iy ++ ) {
151				positions[ i + 1 ] = ( Math.sin( ( ix + count ) * 0.3 ) * 50 ) +
152								( Math.sin( ( iy + count ) * 0.5 ) * 50 );
153				scales[ j ] = ( Math.sin( ( ix + count ) * 0.3 ) + 1 ) * 20 +
154								( Math.sin( ( iy + count ) * 0.5 ) + 1 ) * 20;
155				i += 3;
156				j ++;
157			}
158		}
159
160		particles.geometry.attributes.position.needsUpdate = true;
161		particles.geometry.attributes.scale.needsUpdate = true;
162		renderer.render( scene, camera );
163
164		count += 0.1;
165	}
166}
167
168function convertpercent(value, mode){
169	if(value.toString().indexOf("%")>0){
170		value = trimAny(value, "%")/100;
171		let calcValue = mode=="height"?$(this).parent().outerHeight()*value:$(this).parent().outerWidth()*value;
172		// console.log("calcValue");
173		// console.log($(this).parent());
174		// console.log(calcValue);
175		return calcValue;
176	}else{
177		return value;
178	}
179}