The presence of a WebXR overlay disrupts the functionality of the ThreeJS AR Controller

Currently, I am working on a school project which involves creating a webshop where users can view products in Augmented Reality (AR). I have used WebXR to add an overlay to the AR session that includes a button for repositioning the model. However, I noticed that when I click the button, both the click event on the button and the select event on the ARController are triggered simultaneously.

Is there any way to stop the controller from being activated when I click the button?

Appreciate any assistance! :)

javascriptthree.jswebxr

Answer №1

To implement the desired functionality, make sure to utilize the beforexrselect event and invoke preventDefault() method according to this resource: https://www.example.com/webxr-custom-events/#onbeforexrselect

overlayButton.addEventListener('beforexrselect', event => {
  event.preventDefault();
});

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

A method for transforming each word in a string to begin with a capital letter

I'm not sure if my approach to solving this problem is correct: function capitalizeFirstLetter (string) { let stringArray = string.split(' '); for (let i = 0; i < stringArray.length; i++) { let firstLetter = stringArray[i ...

javascriptarraysfor-loop

The data in the textarea is lost once a script is executed

As a beginner in client side web programming, I am currently working on a simple code. In the initial part of the script, I assign a textarea with the text "Why is this text staying". When the user clicks on the submit button of the form, my goal is to c ...

javascripthtmlformstextarea

Guide to uploading a recorded audio file (Blob) to a server using ReactJS

I'm having trouble using the react-media-recorder library to send recorded voice as a file to my backend. The backend only supports mp3 and ogg formats. Can anyone provide guidance on how to accomplish this task? Your help would be greatly appreciated ...

javascriptreactjstypescriptnext.js

Where to begin with Angular materials?

Here is a snippet of my Angular materials test code: <div class="radioButtondemoBasicUsage" ng-app="MyApp"> <form ng-submit="submit()" ng-controller="AppCtrl"> <p>Selected Value: <span class="radioValue">{{ data.group1 }}< ...

javascriptangularjsangular-material

Encountering undefined JavaScript functions when called from HTML

I had most of these functions working perfectly, but after restarting my program, I'm now encountering issues with undefined functions in Chrome. I can't pinpoint the exact problem, and even though I've checked through Eclipse, I still can&a ...

javascripthtml

How can we change a jQuery document click function to an inline onclick function?

Under certain circumstances, I have to refactor my click function into a standalone function and trigger it using inline onClick="myFunction();" This is my current code structure: $(document).on('click','.exBtn', function(){ var ex = ...

javascriptjquery

Refresh element once AJAX call is completed successfully

Issue Despite a successful AJAX request, I am encountering difficulties updating an element on the webpage. JavaScript Code $(function() { $(".upvote").click(function() { var id = $(this).parent().find("input").val(); $.ajax( ...

phpjavascriptjqueryajax

Enhance user experience with Bootstrap by automatically adding a frame around a card upon clicking

Hello everyone! I am a beginner in the Angular/Web Development world and I am currently working on improving my HTML/CSS skills. While using Bootstrap in my Angular project, I ran into a challenge that I couldn't figure out on my own. I have implement ...

javascripthtmlcssangularbootstrap-5

Guidelines on declining a pledge in NativeScript with Angular 2

I have encountered an issue with my code in Angular 2. It works fine in that framework, but when I tried using it in a Nativescript project, it failed to work properly. The problem arises when I attempt to reject a promise like this: login(credentials:Cr ...

javascriptangulartypescriptnativescriptangular2-nativescript

Steps to invoke a function to add an element into a list

Every time a user clicks on a button, I want to generate a new tab. In this tab, when the user clicks again, I want a function to be called like: onclick('+reportname+','+report type+') onclick("'+reportname+'","'+repor ...

javascriptjqueryasp.net

Search through an array of objects in mongoose to verify if it includes a collection of strings

If we imagine a scenario where I have the following data stored in my database: knights { name: 'Knightley', skills: [ { name: 'sword', level: 2 }, { name: 'shield', level: 1 } ] }, { name: & ...

javascriptnode.jsmongodbmongoosemongoose-schema

What is the best way to change the inner text of an HTML element without causing it to resize or impacting its overflow?

Is it possible to change the text content of an HTML element without affecting its size? I am using Bootstrap and the card component. I want to dynamically update the card text without impacting the overflow that I have already set. Here is a sample of t ...

javascripthtmlbootstrap-5

Toggle dark mode in child Layout component with React and Material-UI

Trying to incorporate a dark mode switch in a React+MUI (JS) layout component has been quite challenging. I have been struggling to find a solution using states for this feature. The main goal is to toggle between light and dark modes by utilizing a switch ...

javascriptreactjsmaterial-uithemesstate

What could be causing the arrows on my card carousel to malfunction?

I'm facing some issues with my card carousel functionality. I'm in the process of learning JavaScript and I believe that's where the problem lies, but I'm unsure how to resolve it. Every time I click on the button/arrow for the carousel ...

javascripthtmlcssbootstrap-4

Page encountering NextJS cors error, while API route remains unaffected

In my Next.js application, I have encountered an issue where executing a call to fetch a page from an external website works perfectly fine when done from the backend through an API route. However, when attempting the same action from the frontend, I encou ...

javascriptreactjshttpnext.jscors

Prevent validation on a particular input field with JQuery validator and Bootstrap

Is there a way to use JQuery validator to validate an entire form except for a specific input? Here is an example code snippet showing how this can be done: jQuery.validator.setDefaults({ debug: true, success: "valid" }); ...

javascriptjqueryjquery-validatebootstrap-5

I can't figure out why I keep receiving the InvalidArgumentError for H.Map with Argument #0 [object Object]

I recently refactored the code taken from the Maps API for JavaScript "Working with React" section. As a beginner in React and currently learning it in school, I have to utilize functional components. The material provided guidance on class component syn ...

javascripthere-api

The mouse event listener fails to function in plain JavaScript

I've been tackling a fun little project from The Odin Project called "ETCH-A-SKETCH". The idea is to change the color of squares when the mouse hovers over them, but I'm having trouble getting the onmouseover event to trigger. Any idea what could ...

javascripthtmlcss

What is the best way to display a particular JavaScript variable in an HTML document?

Is there a way to display the value of a Javascript variable in an HTML form, such as showing it on the screen? Below is my JavaScript code: <script type="text/javascript"> var howLongIsThis = myPlayer.duration(); </script> The variable howL ...

javascripthtml

Implement a click event to trigger a search functionality within Bootstrap

I have implemented the following code to add search options in the navigation bar. It is displaying correctly, but I am not getting the click action that I require. For example, I want to trigger an action from JavaScript when the user clicks on the enter ...

javascripthtmlangularjstwitter-bootstrap