fix: world should no longer load before ready

Author: robeecodes

src/index.js

@@ -115,21 +115,24 @@ function toGuide(e) {
  * Load all entities for the world and car
  */
 function loadEntities() {
+    guide.innerHTML = `<p>Now Loading...</p> 
+                        <div class="spinner-border" role="status">
+                        </div>`;
     world = new LivingRoom(gltfLoader, scene, physicsWorld, groundMaterial, camera, () => {
         world.car = new car(gltfLoader, scene, physicsWorld, world.carStart, wheelMaterial, camera);
     });
 
-    const threeLoaderPromise =
-        new Promise((resolve) => {
-            loadingManager.onLoad = () => {
-                resolve();
-            };
-        });
+    const checkLoaded = () => {
+        if (world.isLoaded) {
+            UITools.removeUIElement(guide);
+            // Add renderer to the document
+            document.body.appendChild(renderer.domElement);
+        } else {
+            requestAnimationFrame(checkLoaded); // Check again in the next frame
+        }
+    };
 
-    // Wait for loading manager and Tone to be loaded
-    Promise.all([threeLoaderPromise, Tone.loaded()]).then(() => {
-        UITools.removeUIElement(guide);
-    });
+    checkLoaded();
 }
 
 /**
@@ -177,10 +180,9 @@ function init() {
     groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0);
     physicsWorld.addBody(groundBody);
 
-    //specify our renderer and add it to our document
+    //specify our renderer
     renderer = new THREE.WebGLRenderer({antialias: true});
     renderer.setSize(window.innerWidth, window.innerHeight);
-    document.body.appendChild(renderer.domElement);
 
     // lighting
     colour = 0xffffff;

src/scripts/cars/Car.js

@@ -87,18 +87,17 @@ export default class Car {
 
             // Wait for vehicle to load before proceeding
             const checkVehicleLoaded = () => {
-                if (this.chassis && this.isLoaded) {
+                if (this.chassis) {
+                    // Configure honk and engine noise
+                    this._createHonk();
+                    this._createEngineNoise();
+                    this._createCollisionNoise();
                     this.isLoaded = true;
                 } else {
                     requestAnimationFrame(checkVehicleLoaded); // Check again in the next frame
                 }
             };
             checkVehicleLoaded();
-
-            // Configure honk and engine noise
-            this._createHonk();
-            this._createEngineNoise();
-            this._createCollisionNoise();
         });
     }
 
@@ -285,6 +284,25 @@ export default class Car {
 
         // Add the vehicle to the physics world
         this.vehicle.addToWorld(physicsWorld);
+
+        this._syncToPhysics();
+    }
+
+    /**
+     * Sync models to their physics body
+     * @protected
+     */
+    _syncToPhysics() {
+        // Sync the chassis
+        this.models.chassis.mesh.position.copy(this.chassis.position);
+        this.models.chassis.mesh.quaternion.copy(this.chassis.quaternion);
+
+        // Sync each wheel mesh with the wheel body
+        this.vehicle.wheelBodies.forEach((wheelBody, index) => {
+            const wheelMesh = this.models.wheels[index].mesh
+            wheelMesh.position.copy(wheelBody.position);
+            wheelMesh.quaternion.copy(wheelBody.quaternion);
+        });
     }
 
     /**
@@ -330,7 +348,6 @@ export default class Car {
 
         // Save instance
         Car.instance = this;
-        this.isLoaded = true;
     }
 
     /**
@@ -573,23 +590,14 @@ export default class Car {
      * @public
      */
     update() {
-        // Do nothing if the care isn't load
+        // Do nothing if the car isn't loaded
         if (!this.isLoaded) return;
 
         // Drive is enabled
         if (this.isDriving) this._drive();
 
         // Sync models to their physics body
-        // Sync the chassis
-        this.models.chassis.mesh.position.copy(this.chassis.position);
-        this.models.chassis.mesh.quaternion.copy(this.chassis.quaternion);
-
-        // Sync each wheel mesh with the wheel body
-        this.vehicle.wheelBodies.forEach((wheelBody, index) => {
-            const wheelMesh = this.models.wheels[index].mesh
-            wheelMesh.position.copy(wheelBody.position);
-            wheelMesh.quaternion.copy(wheelBody.quaternion);
-        });
+        this._syncToPhysics();
 
         // Control proximity volume between car and camera
         proximityVolume(this.chassis.position, this.camera, this.gainNode, -0.3);

src/scripts/objects/Radio.js

@@ -19,6 +19,7 @@ export default class Radio {
         this.currentStationIndex = 0;
         this.isPlaying = true;
         this.radioPosition = this.radioObject.position;
+        this.isLoaded = false;
 
         // Load radio stations
         this.stations = [
@@ -30,6 +31,7 @@ export default class Radio {
         // When all stations are loaded, set up the proximity audio
         Tone.loaded().then(() => {
             this._setupProximityAudio();
+            this.isLoaded = true;
         });
     }
 

src/scripts/objects/TV.js

@@ -16,6 +16,7 @@ export default class TV {
      */
     constructor(tvObject, listener, scene) {
         this.listener = listener;
+        this.isLoaded = false;
 
         // Create the video element and texture
         this.video = document.createElement('video');
@@ -45,8 +46,17 @@ export default class TV {
             tvObject.mesh.visible = false;
         }
 
-        // Setup proximity audio
-        this._setupProximityAudio();
+        // Add video audio to Tone.Player
+        this.audio = new Tone.Player({
+            url: "video/jerma_the_saga.mp4",
+            loop: true,
+        }).toDestination();
+
+        Tone.loaded().then(() => {
+            this._setupProximityAudio();
+            this.isLoaded = true;
+        });
+
         this.isPlaying = false;
     }
 
@@ -55,11 +65,6 @@ export default class TV {
      * @protected
      */
     _setupProximityAudio() {
-        // Add video audio to Tone.Player
-        this.audio = new Tone.Player({
-            url: "video/jerma_the_saga.mp4",
-            loop: true,
-        }).toDestination();
 
         // Set volume
         this.audio.volume.value = -10;

src/scripts/worlds/LivingRoom.js

@@ -137,6 +137,16 @@ export default class LivingRoom extends World {
         // Create tv and radio
         this.radio = new Radio(this.objects["Radio"], this.camera);
         this.tv = new TV(this.objects["TVScreen"], this.camera, this.scene);
+        // Wait for assets to load before proceeding
+        const checkLoaded = () => {
+            if ((this.radio && this.radio.isLoaded) && (this.tv && this.tv.isLoaded)) {
+                this.isLoaded = true;
+            } else {
+                requestAnimationFrame(checkLoaded); // Check again in the next frame
+            }
+        };
+
+        checkLoaded();
     }
 
     /**

src/scripts/worlds/World.js

@@ -46,10 +46,6 @@ export default class World {
         // Reference the camera
         this.camera = camera;
 
-        this.loader = loader;
-
-        this.physicsWorld = physicsWorld;
-
         // Reference the car once it's created
         this.car = null
 
@@ -73,7 +69,6 @@ export default class World {
             const checkCarLoaded = () => {
                 if (this.car && this.car.isLoaded) {
                     this._start();
-                    this.isLoaded = true;
                 } else {
                     requestAnimationFrame(checkCarLoaded); // Check again in the next frame
                 }
@@ -286,7 +281,7 @@ export default class World {
      * @protected
      */
     _start() {
-
+        this.isLoaded = true;
     }
 
     /**