ID/ lab

Step 01: Where are we?

To start with, we need to make ourselves aware of the location of the ‘camera’ or rather our point of view within the gaussian splat. To know that easily, we add x - y - z coordinates


                        <div id="coords">

    <p>{x: <span id="coordX"></span>, y: <span id="coordY"></span>, z: <span id="coordZ"></span>}</p>

</div>



<script>

        // Update coordinates

        coordX.text(camera.position.x.toFixed(2));

        coordY.text(camera.position.y.toFixed(2));

        coordZ.text(camera.position.z.toFixed(2));

</script>

Step 02: Set a path

Now, with these coordinates you can easily capture interesting angles. The x, y and z axes are already in json format: {x: -0.38, y: 1.93, z: 0.13}. I add this to the script in an array. Now I can link the scroll function to the array of coordinates and that way it is possible to move from one point to another. Interpolating the distance between different points creates a natural camera movement.


                         <script>

    // Array of coordinates

    let pathCoordinates = [

        {x: -0.38, y: 1.93, z: 0.13},

        {x: -0.55, y: 0.08, z: 0.35},

        {x: -4.91, y: 0.30, z: 0.81}

    ];

    

    //Scrolling along the array of coordinates

    window.addEventListener(scroll, () => {

        if (!isFreeMoveEnabled) {

            const scrollY = window.scrollY;

            const viewportHeight = window.innerHeight;

            const totalScrollHeight = document.body.scrollHeight - viewportHeight;

            const scrollFraction = scrollY / totalScrollHeight;

            const pathIndex = Math.floor(scrollFraction * (pathCoordinates.length - 1));

            const nextPathIndex = Math.min(pathIndex + 1, pathCoordinates.length - 1);

            const progress = (scrollFraction * (pathCoordinates.length - 1)) % 1;



            const currentCoord = pathCoordinates[pathIndex];

            const nextCoord = pathCoordinates[nextPathIndex];



            // Interpolate between currentCoord en nextCoord

            camera.position.x = currentCoord.x + (nextCoord.x - currentCoord.x) * progress;

            camera.position.y = currentCoord.y + (nextCoord.y - currentCoord.y) * progress;

            camera.position.z = currentCoord.z + (nextCoord.z - currentCoord.z) * progress;

            camera.lookAt(scene.position);



            if (scrollFraction < 1) {

                canvas.classList.remove(transparent); // Zorg ervoor dat de canvas zichtbaar is

            } else {

                canvas.classList.add(transparent); // Maak de canvas langzaam transparant

            }

        }

    });

    </script>

Scroll through a location according to a self-selected path

What about timing?