Callback function in Aframe not triggering

My camera motion callback function in aframe is not being called. I have registered the component like this:

window.onload = function () {
  AFRAME.registerComponent('listener', {
    tick: function () {
      console.log("TICK IS CALLED");
    }
  });
  addMaze();
};

and set up the scene as follows:

<body>
  <a-scene physics id="a">
<a-entity position="33 0 -33" rotation="0 180 0" id="camera" camera="userHeight: 1.6" kinematic-body universal-controls listener>
</a-entity>

<!-- walls -->
<a-box color="#abc" static-body position="-35 0 0" width="0.001" height="6" depth="70"></a-box>
<a-box color="#abc" static-body position="35 0 0" width="0.001" height="6" depth="70"></a-box>

<!-- Lighting -->
<a-light type="ambient" color="#bbb"></a-light>
<a-light color="#ccc" position="0 30 0" distance="100" intensity="0.4" type="point"></a-light>
<a-light color="#ccc" position="3 10 -10" distance="50" intensity="0.4" type="point"></a-light>

</a-scene>
</body>

The callback function is not triggered when moving the mouse. How can I ensure that it is correctly called?

Answer №1

It is crucial to register the component before any actions take place.

<head>
  <script>
    AFRAME.registerComponent('listener', {...});
  </script>
</head>
<body>
  <a-scene>
    <!-- ... -->
  </a-scene>
</body>

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

Storing values from a content script into textboxes using a button press: a simple guide

I am new to creating chrome extensions and currently utilizing a content script to fetch values. However, I am facing difficulty in loading these values into the popup.html. Here is the code snippet: popup.html <head> <script src ...

Issue with Express/Node.js route unable to access key values within an object

I am currently struggling with creating a node/express route that fetches data from a MongoDB collection and facing an infuriating issue. The collection in question is named nba_players_v2, and I've tried crafting the following route: router.get(&apo ...

Tips for Managing Disconnection Issues in Angular 7

My goal is to display the ConnectionLost Component if the network is unavailable and the user attempts to navigate to the next page. However, if there is no network and the user does not take any action (doesn't navigate to the next page), then the c ...

Utilize debounce functionality for custom filtering in a Vuetify data table

I am looking to enhance my search functionality by implementing a debounce method that would pause the search action after each keystroke for 1 second. However, even after implementing it, the search still occurs with every keystroke instead of waiting for ...

AngularJS: Transitioning from Expressions to Javascript (Coffeescript)

Looking to convert an expression into JavaScript in order to maintain an object's value in $scope: <dl class = "mortgage-information"> <dt><abbr title = "Loan-to-value Ratio">LTV</abbr></dt> <dd>{{(total_fi ...

What is the best way to access the value of an HTML tag in React?

Currently in the process of developing a feature for the price tab using React. These components are designed to allow users to add price classes to their shopping cart. One challenge I'm facing is how to retrieve the HTML string of an HTML tag. Here& ...

Integrate a resizable sidebar on the webpage's right side that dynamically adjusts the layout

As I develop a Chrome Extension, my goal is to incorporate a sidebar into all webpages without overlapping the existing content. The sidebar should be placed beside the content, effectively reducing the width of the body of the webpage to the initial width ...

Unraveling exceptions in Node.js akin to handling them in Java

I'm seeking to develop a node application and I need guidance on exception handling. In Java, we utilize the exception class for this purpose. How can I achieve something similar in node? Are there any libraries available specifically for handling exc ...

Is there a way for me to extract all the elements within an object nested inside an array and then append them to another array?

I'm currently facing a challenge that's bothering me quite a bit. My skills in handling JSON data manipulation are not up to par. The problem I'm dealing with involves an array of multiple objects, each containing some data. Within these ob ...

The event listener for 'annotations.create' in the PSPDFKIT instance does not include the required annotation type

I'm facing difficulties with integrating pspdfkit to properly create and display my annotations. My goal is to create annotations in the following manner: instance.addEventListener("annotations.create", createdAnnotations => { ...

Executing a script in the browser console automatically upon clicking a link can be achieved using Python

I am interested in executing JavaScript in my browser's DevTools console. Currently, I have managed to open a specific website through it. Is there a way to achieve this using Python? Here is the code I am currently using: url = 'http://some-we ...

Change CSS style sheets depending on the size of the viewport

I've tried to implement the method from CSS-Tricks that allows for changing stylesheets based on the viewport width using multiple .css files and jQuery. However, my code isn't functioning as expected. I've spent the past hour trying to figu ...

Renew the php blade foreach loop using jQuery to update data live

I have a foreach cycle in my HTML, and at one point, some data is posted from JavaScript. I would like to append it once it is added to the database. I need to find a way to refresh the foreach loop without reloading the entire page (I could simply use ap ...

What is the best way to select and retrieve all span elements generated on my HTML webpage using jQuery?

For retrieving all input texts on my HTML page, I use the following code: var inputs = data.context.find(':input'); $('#result').text(JSON.stringify(inputs.serializeArray())); Once executed, I end up with a JSON string containing th ...

Implementing a Button Click Event Listener on a Separate Component in React

Currently, my React application incorporates MapBox in which the navbar is its parent component. Within the navbar component, there is a button that collapses the navbar when clicked by changing its CSS class. I also want to trigger the following code snip ...

Tips for choosing an option in a form using Selenium with JavaScript

I am currently in the process of automating some tests for a specific form, and I have successfully automated all steps except for selecting an option from a dropdown menu using JavaScript. Here is my code: const {Builder, By, Key} = require("sel ...

Inquiring about building a comprehensive AJAX website: SEO, Google index, design templates

I'm currently developing a fully AJAX-based website. My focus right now is on implementing page navigation and content display without the need for page reloading. Here's my approach: <html> <head> <!--CSS--> .hidde ...

Issue with JQuery slide toggle preventing screen from scrolling down

On my website, I have a div classed as .slidingDiv that is hidden until the anchor .show_hide is clicked, causing it to slide down. This feature works perfectly when the .slidingDiv is the only content on the page. However, if there is other content above ...

Is it possible to conduct a feature test to verify the limitations of HTML5 audio on

Is there a way to detect if volume control of HTML5 audio elements is possible on iOS devices? I want to remove UI elements related to the volume if it's not alterable. After referring to: http://developer.apple.com/library/safari/#documentation/Aud ...

VueJS component fails to properly sanitize the readme file, as discovered by Marked

Could someone explain why the output from the compiledMarkdown function is not sanitized, resulting in unstyled content from the markdown file? <template> <div style="padding:35px;"> <div v-html="compiledMarkdown" ...