Threejs How to Program a Shotgun Blast Effect

threejs-how-to-program-a-shotgun-blast-effect.html

<!--////////////////////////////////////////////////////////////////////////////////////////
///                                                                                      ///
///  Example Using Three.js Library, HTML & Javascript                                   ///
///  Developer 3D Interactive 3D Games and Apps 2021-2023                                ///
///  Contact Shane Brumback https://www.shanebrumback.com                                ///
///  Send a message if you have questions about this project                             ///
///  Subscribe to my YouTube Channel                                                     ///
///  https://www.youtube.com/channel/UC5kqNYlnPWrL46eTKjTEPHg                            ///
///  Find More Example Code on Shane Brumback's Tech Blog                                ///
///  https://shanebrumback.blogspot.com/                                                 ///
///                                                                                      ///
////////////////////////////////////////////////////////////////////////////////////////////-->

function fireShotGunSpheres() {

    // Loop 20 times to create 20 spheres
    for (var i = 0; i < 20; i++) {

        // Create a sphere geometry with a radius of 0.05 units and 32 segments on each axis
        var sphere = new THREE.SphereGeometry(.05, 32, 32);

        // Create a basic mesh material with a yellow color
        var material = new THREE.MeshBasicMaterial({ color: 0xffff00 });

        // Combine the sphere geometry and material to create a mesh
        var sphereMesh = new THREE.Mesh(sphere, material);

        // Set the sphere position to a random position within a 0.5 unit cube area relative to the shotgun object position
        sphereMesh.position.x = camera.position.x + (Math.random() * 0.5 - 0.25);
        sphereMesh.position.y = camera.position.y + (Math.random() * 0.5 - 0.25) - 1;
        sphereMesh.position.z = camera.position.z + (Math.random() * 0.5 - 0.25);

        // Add the sphere to the scene
        scene.add(sphereMesh);

        // Add the sphere to the shotGunSpheres array
        shotGunSpheres.push(sphereMesh);
    }
}

function animateShotGunParticles() {

    // Loop through each sphere in the shotGunSpheres array
    for (var i = 0; i < shotGunSpheres.length; i++) {
        // Get the current sphere
        var sphere = shotGunSpheres[i];

        // Copy the rotation of the camera to the sphere
        sphere.rotation.copy(camera.rotation)

        // Calculate the distance between the sphere and the starting position
        var distance = sphere.position.distanceTo(shotgunObject.position);

        // If the distance is less than 10 units, move the sphere in a random direction on the x and y axis and down the -z axis
        if (distance < 10) {
            sphere.translateX(Math.random() * 2 - 1);
            sphere.translateY(Math.random() * 2 - 1);
            sphere.translateZ(-3);
        }

        // If the distance is less than 1 unit, hide the sphere
        if (distance < 1) {
            sphere.visible = false;
        }

        // If the distance is greater than 1 unit, show the sphere
        if (distance > 1) {
            sphere.visible = true;
        }

        // If the distance is greater than or equal to 10 units, remove the sphere from the scene and splice it from the shotGunSpheres array
        if (distance >= 10) {
            scene.remove(sphere);
            shotGunSpheres.splice(i, 1);
        }
    }
}