https://www.kpit.com/wp-content/themes/kpit-wp/assets/js/sectionWave.js?ver=1.0

1import * as THREE from 'three';
2
3const SEPARATION3 = 55, AMOUNTX3 = 80, AMOUNTY3 = 70;
4
5let container, stats;
6let camera3, scene3, renderer3;
7
8let particles3 = null, count = 0;
9
10let mouseX = 0, mouseY = 0;
11
12
13init3();
14
15function init3() {
16
17    const sizes = {
18        width: $(".section-wave").width(),
19        height: $(".section-wave").height()
20    }
21
22    camera3 = new THREE.PerspectiveCamera(45, sizes.width / sizes.height, 1, 10000);
23    camera3.position.z = 100;
24    camera3.position.y = 100;
25    camera3.rotation.x = 0.1;
26
27    scene3 = new THREE.Scene();
28    //
29
30    const numParticles = AMOUNTX3 * AMOUNTY3;
31
32    const positions = new Float32Array(numParticles * 3);
33    const scales = new Float32Array(numParticles);
34    const shapeTypes = new Float32Array(numParticles);
35    let i = 0, j = 0;
36
37    for (let ix = 0; ix < AMOUNTX3; ix++) {
38
39        for (let iy = 0; iy < AMOUNTY3; iy++) {
40
41            positions[i] = ix * SEPARATION3 - ((AMOUNTX3 * SEPARATION3) / 2); // x
42            positions[i + 1] = 0;
43            positions[i + 2] = iy * SEPARATION3 - ((AMOUNTY3 * SEPARATION3) / 2); // z
44
45            scales[j] = 1;
46            shapeTypes[j] = Math.random() < 0.5 ? 0.0 : 1.0;
47            i += 3;
48            j++;
49
50        }
51
52    }
53    const geometry = new THREE.BufferGeometry();
54    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
55    geometry.setAttribute('scale', new THREE.BufferAttribute(scales, 1));
56    geometry.setAttribute('shapeType', new THREE.BufferAttribute(shapeTypes, 1));
57    const material = new THREE.ShaderMaterial({
58
59        uniforms: {
60            color: { value: new THREE.Color(0x8BFF5C) },
61            opacity: { value: 1.0 }
62        },
63        blending: THREE.AdditiveBlending,
64        vertexShader: `attribute float scale;
65            attribute float shapeType;
66            varying float vShapeType;
67            varying vec2 vPointScale;
68
69            void main() {
70                vShapeType = shapeType;
71                vPointScale = (shapeType < 0.5) ? vec2(1.0, 1.0) : vec2(1.0, 2.0);
72                vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
73                gl_PointSize = scale * (200.0 / -mvPosition.z);
74                gl_Position = projectionMatrix * mvPosition;
75            }`,
76        fragmentShader: `uniform vec3 color;
77            uniform float opacity;
78            varying float vShapeType;
79            varying vec2 vPointScale;
80
81            void main() {
82                vec2 coord = (gl_PointCoord - vec2(0.5)) * vPointScale + vec2(0.5);
83
84                if (vShapeType < 0.5) {
85                    if (length(coord - vec2(0.5)) > 0.475) discard;
86                } else {
87                    if (coord.y < 0.0 || coord.y > 1.0 || coord.x < 0.0 || coord.x > 1.0) discard;
88                }
89
90                gl_FragColor = vec4(color, 1.0);
91            }`,
92        transparent: true,
93        // wireframe: true
94
95    });
96    material.uniforms.opacity.value = 0.5;
97    material.needsUpdate = true;
98
99    particles3 = new THREE.Points(geometry, material);
100    scene3.add(particles3);
101    scene3.rotation.x = 0.6;
102    scene3.scale.x = 1.5;
103    scene3.scale.y = 1.5;
104    scene3.scale.z = 1.5;
105
106    setTimeout(() => {
107
108
109        gsap.timeline({
110            scrollTrigger: {
111                trigger: ".section-wave",
112                start: "0% 80%",
113                end: "0% 30%",
114                // markers: true,
115                scrub: 1
116            },
117        })
118            .to(camera3.position, {
119                y: 900
120            }, 0)
121            .to(".section-wave", {
122                opacity: 1
123            }, 0)
124
125    }, 1000);
126
127
128
129    gsap.timeline({
130        scrollTrigger: {
131            trigger: ".section-wave",
132            start: "0% 50%",
133            end: "0% 50%",
134            // markers: true,
135            toggleActions: "play none none reverse",
136            preventOverlaps: true
137        },
138    })
139        .to(".pre-footer-wrap", {
140            scale: 1,
141            opacity: 1,
142            duration: 0.8
143        }, 0)
144
145    var container = document.querySelector(".section-wave")
146    const canvas = document.querySelector("#section-wave")
147    renderer3 = new THREE.WebGLRenderer({
148        canvas: canvas, alpha: true, antialias: true
149    });
150    renderer3.setPixelRatio(window.devicePixelRatio);
151    renderer3.setSize(sizes.width, sizes.height);
152    renderer3.setAnimationLoop(animate3);
153    container.addEventListener('pointermove', onPointerMove);
154
155}
156
157
158function animate3() {
159    render3();
160}
161function onPointerMove(event) {
162
163    let windowHalfX = window.innerWidth / 2;
164    let windowHalfY = window.innerHeight / 2;
165
166    if (event.isPrimary === false) return;
167
168    mouseX = event.clientX - windowHalfX;
169    mouseY = event.clientY - windowHalfY;
170
171}
172
173function render3() {
174    // camera.position.x += (mouseX - camera.position.x) * 0.02;
175    if (particles3) {
176        const positions = particles3.geometry.attributes.position.array;
177        const scales = particles3.geometry.attributes.scale.array;
178        let i = 0, j = 0;
179        for (let i = 0; i < scales.length; i++) {
180            scales[i] = (Math.sin(i + count) + 1) * 10;
181        }
182        for (let ix = 0; ix < AMOUNTX3; ix++) {
183            for (let iy = 0; iy < AMOUNTY3; iy++) {
184                positions[i + 1] = (Math.sin((ix + count) * 0.3) * 50) +
185                    (Math.sin((iy + count) * 0.5) * 50);
186
187                scales[j] = (Math.sin((ix + count) * 0.3) + 1) * 20 +
188                    (Math.sin((iy + count) * 0.5) + 1) * 20;
189                i += 3;
190                j++;
191            }
192        }
193        particles3.geometry.attributes.position.needsUpdate = true;
194        particles3.geometry.attributes.scale.needsUpdate = true;
195        particles3.material.uniforms.opacity.value = Math.abs(Math.sin(count * 0.1));
196        particles3.material.needsUpdate = true;
197    }
198    renderer3.render(scene3, camera3);
199    count += 0.1;
200}
201