A-frame detects scene loading completion

Currently, I have an A-frame scene set up with various assets that require a loading screen before entering the actual scene. My main query revolves around figuring out how I can detect when my assets and scene have finished loading by logging a message in the console. Below is the basic code structure of my scene:

<html>
  <head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  </head>
  <body>
<script>
//Logging a message when scene is loaded
console.log ("Scene Loaded");
</script>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Answer №1

Check out this scene element event:

Here is some example code...

<html>
  <head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script>
      AFRAME.registerComponent("log", {
        init: function () {
          this.el.addEventListener("loaded", () => {
            console.log ("loaded");
          });
        }
      });
    </script>
  </head>
  <body>

    <a-scene log>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switch input value when tabbing

I'm currently developing a small web application to track the work hours of team members. Everything seems to be functioning properly, except for one issue. When I navigate to a fieldset, a new page opens with a form to edit the time for that specific ...

What is the best way to enhance the capabilities of a current tinyMCE button?

I am interested in enhancing the capabilities of the default buttons in tinyMCE by adding additional functionality. I'm curious to know how this can be achieved. For instance, If I would like the paste button not only to paste content, but also perf ...

Problem with Ionic 2 local storage: struggling to store retrieved value in a variable

Struggling to assign the retrieved value from a .get function to a variable declared outside of it. var dt; //fetching data this.local.get('didTutorial').then((value) => { alert(value); dt = value; }) console.log("Local Storage value: " ...

IE11 displays a white screen when in fullscreen mode

I am currently working on a three.js webGL application and attempting to make it go fullscreen using the following code: launchFullscreen(document.documentElement); function launchFullscreen(element) { if(element.requestFullscreen) { ele ...

Tips on retrieving JSON data from javascript files

Hey everyone, I need assistance with using Tumblr and connecting my Twitter account. Tumblr provided me with this sample file: I'm wondering if it's possible to retrieve follower count and screen name data from this file. If so, can someone guid ...

Incorporating a division using the data() method

Currently, I am in the process of generating a list of flash SWFs. The data for this list is retrieved through an ajax call, which returns a JSON object. To populate the rows with data, I utilize my makeAppRow function. makeAppRow = function(myData) { ...

Can the client (JRE) access server (node) variables without any intermediary steps?

I am in the process of configuring a server that allows clients to connect and indicate their presence by "raising their hand," with only one client allowed to do so at a time. Currently, I am using the express module to send a POST response when a button ...

Utilizing the POST request to signal the server's response of a 404

I'm having trouble sending a POST request to my server in order to update a user's information. Even though I have verified that the URL is correct, I keep receiving a 404 error response. GET requests are working fine, but there seems to be an is ...

How to retrieve the chosen option from a drop-down menu in WebDriver using JavaScript without relying on the Select Class

Currently, I am in the process of utilizing Webdriver with Java. My goal is to retrieve the selected value from a combobox without relying on the Select class provided by Webdriver. The specific markup that I am dealing with is as follows: <select nam ...

Issue with using async await in map function: async function may not complete before moving on to the next item in the

Currently, I have an array that needs to be mapped. Inside the mapping function, there is an asynchronous function being called, which conducts an asynchronous request and returns a promise using request-promise. My intention was for the first item in the ...

The entire Sphere Geometry in three.js is not completely encompassed by the texture

Click here to view the image I'm trying to create a rotating moon. Everything works perfectly with MeshStandardMaterial (with color but no texture), however, when I apply a texture to the sphere geometry, it behaves strangely. The issue I'm facin ...

Implement a jQuery loading animation triggered by scrolling down the page

Can anyone offer guidance on how to trigger an animation as you scroll down a webpage? I've come across this feature while browsing through this website: I would love to include code examples, but I'm unsure of where to start with implementing t ...

Having trouble loading Three.js in JavaScript file using npm install?

I am encountering a problem when trying to include Three.js in my JavaScript file without using the HTML script element. The error message I receive is "Uncaught SyntaxError: Cannot use import statement outside a module". Although my Three.js code runs suc ...

Decoding the renderer.info.render data in Three.js

Currently, I am exploring a Google Arts Experiment [link to page] that showcases numerous images using WebGL + GLSL in a web browser. One puzzling aspect is that the scene contains 1,167,858 vertices and 389,286 quad faces with only 3 vertices per face (th ...

What is the method to avoid writing to the depth buffer?

My goal is to create a background that can be tilted vertically as needed. I have a cube map available. If I simply use the built-in scene.background = texture, I won't be able to achieve the tilting effect. On the other hand, if I use a box or sphere ...

Trigger Popup Automatically When Anchor Exists

I have created an image gallery that loads images using Ajax when the page first loads and includes a "Load More" button. You can view a working example here (Plunker) My current challenge is automatically loading and opening a popup of an image if its ID ...

Retrieve JavaScript functions as JSON or text in AngularJS and execute them

Currently, I am working on developing an AngularJS application and have come across a particular challenge that needs to be addressed: After making a web service call, I receive JavaScript code that looks like this: { "script":"function foo(a, b) { c = ...

Ways to display only a specific color in an image

Looking to work with an image that contains predefined color blocks? Take this example picture as reference: https://i.sstatic.net/QlwvY.png Is there a method to display only certain colored areas while keeping the rest transparent? Note that no edge pat ...

When using `mongoose find({})`, the callback function is not automatically triggered

I have implemented a static function in my Mongoose model, defined in a separate file where I extend the schema before creating the model. The function looks like this: 'use strict'; exports.statics = { list : function (options, cb) { ...

The process of comparing two arrays of objects in es6 and filtering out the unmatched arrays

In my Angular application, I'm attempting to retrieve only the updated array that was modified from the user interface. Within this scenario, I have two arrays in which one of the role names has been changed. My goal is to compare and extract the mod ...