Loading GLB images through a loop: only renders final object

Questions
,
5

For the convenience of anyone who may be able to provide insight, the loop (in its entierty) is as follows:

<script>

if ( WEBGL.isWebGLAvailable() ) {

    console.log("webgl is available");

    <?php
        if( have_rows('development_process') ):
            while ( have_rows('development_process') ) : the_row();
                $model = get_sub_field('step_3d_model');
                foreach (range(0, 2) as $number) {
                    $rows = get_field('development_process' ); // get all the ACF repeater rows
                    $first_row = $rows[$number]; // call a specific row
                    $first_row_image = $first_row['step_3d_model' ]; // get the sub field value
                    if($model['caption'] == $first_row_image['caption']){
                        $loopNum    = $number;
                        // These will become the unique JS variable for each loop
                        $camera     = "camera".$number;
                        $controls   = "controls".$number;
                        $scene      = "scene".$number;
                        $renderer   = "renderer".$number;
                    }
                }
    ?> 
    container = document.getElementById( '<?php echo $model['caption'] ?>' );

    var <?php echo $camera ?> , <?php echo $controls ?>, <?php echo $scene ?>, <?php echo $renderer ?>;

    init();
    animate();

    function init(){
           // Create the camera
            <?php echo $camera ?> = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 50);

            // camera.position dictates how far away it will be from the rotational axis. 1 is close and 1< is further away
            // Ultimatley, this will dictate the size of the object - by varying the distance between the object and the camera
            <?php echo $camera ?>.position.z = 7.25;

            // Set camera controls (REMEMBER: It's the camera that's rotating, not the object)
            // controls = new THREE.TrackballControls( camera );
            <?php echo $controls ?> = new THREE.TrackballControls(<?php echo $camera ?>, document.getElementById('<?php echo $model['caption'] ?>'));
            <?php echo $controls ?>.addEventListener('change', render);

            // Removes camera pan on right click
            <?php echo $controls ?>.noPan = true;

            // Removes camera zoom on scroll
            <?php echo $controls ?>.noZoom = true;

            // Create the scene where the object will be located
            <?php echo $scene ?> = new THREE.Scene();

            // Add light to the scene so that objects can be seen
            ambientLight = new THREE.AmbientLight(0x404040, 5, 0.5);
            <?php echo $scene ?>.add(ambientLight);

            // Add a spotlight to the scene for some direct lighting
            light = new THREE.PointLight(0xf5f5f5, 5, 5)

            // variable.position.set(x, y, z) references where the light will be angled
            light.position.set(3, 4, 3);
            light.castShadow = true;
            light.shadow.<?php echo $camera ?>.near = 0.001;
            light.shadow.<?php echo $camera ?>.far = 25;
            <?php echo $scene ?>.add(light);

            // for instances where you need more than one direct light source, you may add multiple spot lights
            light = new THREE.PointLight(0x404040, 5, 5)
            light.position.set(3, -2, 3);
            light.castShadow = true;
            light.shadow.<?php echo $camera ?>.near = 0.001;
            light.shadow.<?php echo $camera ?>.far = 25;
            <?php echo $scene ?>.add(light);

            <?php echo $renderer ?> = new THREE.WebGLRenderer({
                alpha: true 
            });

            <?php echo $renderer ?>.setSize(window.innerWidth, window.innerHeight);
            container.appendChild( <?php echo $renderer ?>.domElement );

            var loader = new THREE.GLTFLoader();
            <?php echo $renderer ?>.gammaOutput = true;
            <?php echo $renderer ?>.gammaFactor = 2.2;

            loader.load( '<?php echo $model['url'];?>', function ( glb ) {
                
                object = glb.<?php echo $scene ?>.children[0];
                // variable.scale.set(x, y, z) references the size of the object
                object.scale.set(1.4,1.4,1.4);
                // .position refers to the location of the object on the canvas
                object.position.set(-0.02,-0.75,2);
                // .rotation refers to the angle of the object
                object.rotation.set(90, 0.25, -0.5);
                
                <?php echo $scene ?>.add( object );

                // This code will center the cameras roatational axis around the loaded object.
                var boundingBox = new THREE.Box3();
                boundingBox.setFromObject( object );
                var center = boundingBox.getCenter();
                // set camera to rotate around center of object
                <?php echo $controls ?>.target = center;

            }, undefined, function ( error ) {
                console.error( error );

            } );

        }

        function animate(){

            requestAnimationFrame( animate );
            <?php echo $controls ?>.update();
        }

        function render(){
            <?php echo $renderer ?>.render(<?php echo $scene ?>, <?php echo $camera ?> );
        }

    <?php endwhile; else : ?>
        console.log("error");     
    <?php endif; ?>

} else {

    var warning = WEBGL.getWebGLErrorMessage();
    document.getElementById( '<?php echo $model['caption'] ?>' ).appendChild( warning );

    console.log("webgl is NOT available");

}

</script>

If I remove the line of code that instigates the ReferenceError: x is not defined at init, x just changes to another variable in the script. The result is that many of the default properties, from within the three.js library, trigger console errors.

Further, I’d also like to clarify that this is a unique error that has only occurred since the intorduction of the php foreach loop.

Thanks!