After modifying the enabled or object properties, the Aframe raycaster fails to register any hits

My goal is to have my raycaster detect intersections only when the trigger on my Vive controller is pressed. I was thinking of initializing the raycaster with a dummy class in objects, then switching it to the real one using .prop and capturing the intersectedEls

let rightHand = document.getElementById('rightController');
rightHand.setAttribute('line', 'color: purple; opacity: 1;');
rightHand.setAttribute('raycaster', { showLine: true, objects: '.none' });
rightHand.setAttribute('cursor', { downEvents: ['triggerdown'], upEvents: ['triggerup'], rayOrigin: 'entity', fuse: false });

let scene = document.getElementById('scene');
scene.addEventListener('triggerdown', this.myTriggerDown);
scene.addEventListener('triggerup', this.myTriggerUp);

myTriggerDown() {
    let rightHand = document.getElementById('rightController');
    rightHand.setAttribute('raycaster', { showLine: true, objects: '.prop' });
    rightHand.components['raycaster'].refreshObjects();

    let raycaster = rightHand.components['raycaster'];
    let intersectedEls = raycaster.intersectedEls;

    if (typeof intersectedEls !== 'undefined' && intersectedEls.length > 0) {
        scene.components['resize'].enableResize(intersectedEls[0]);
    } else {
        console.log('1234 no intersections')
    }
}
myTriggerUp() {
   let rightHand = document.getElementById('rightController');
   rightHand.setAttribute('raycaster', { showLine: true, objects: '.none' });
}

I'm consistently seeing the

console.log('1234 no intersections')
message despite my efforts.

I've tried adding the refreshObjects() line with no success. I also attempted toggling the enabled property instead of changing the objects, but encountered the same issue.

Any advice or assistance would be greatly appreciated. Thank you

edit:

Interestingly, looking for intersections in the triggerup section seems to work. However, this workaround prevents me from utilizing the intersected element and performing actions while holding the trigger. I still want to understand why enabling the ray/changing target objects and immediately searching for intersections doesn't yield the desired results.

Answer №1

My suggestion is to utilize the raycaster.enabled property instead of switching to a placeholder class.

The raycaster examines for intersections once per frame (or as frequently as the raycaster.interval dictates). When triggered down, you activate the raycaster, but it will only detect intersections on the following frame.

You have the option to manually trigger an intersection check by using raycaster.checkIntersections() or implement a setTimeout prior to checking for intersections.

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

Uncovering design elements from Material UI components

The AppBar component applies certain styles to children of specific types, but only works on direct children. <AppBar title="first" iconElementRight={ <FlatButton label="first" /> }/> <AppBar title="second" iconElementRight={ <di ...

Is there a way to make chrome.webRequest.onBeforeRequest.addListener() trigger automatically upon Chrome launch?

I've been working on a Chrome extension that uses a native messaging host. In my background.js file, I have set up a listener to process all onBeforeRequest events and pass them to the native helper application. Everything works fine when a page is vi ...

Can you explain the purpose of the .subscribe() function?

Currently, I am in the process of developing an API using Angular2 and NodeJS. My focus has been on implementing services for my API that are responsible for retrieving a list of tasks and presenting them. Below is the code snippet for the task service: i ...

Retrieving data from an external PHP script

I'm facing an issue with retrieving results from a PHP file after submitting a form: index.php (located at ) <form id='loginForm' action='http://domain1.com/mail.php' method='POST'> <input id=&apo ...

Are asynchronous promises thenable for chaining?

Can someone explain to me how asynchronous chaining works with thenable? I am new to using promises in Node.js and I am a bit confused about the concept. In the code example provided below, it seems like the promise returned from the previous Promise.the ...

Is there a way to verify the presence of data and halt code execution if it is not found?

In my data, there is a table containing a total of 5 links. The first 2 links can vary in availability as they are dynamic, while the last 3 links are static and are always displayed. The dynamic links' data is deeply nested within the state object, s ...

The creation of the object has not been initialized within the ion slide box

Recently, I added a progress bar to one of the slides in my ion slide box. The initialization of the progress bar is done within the slide controller: //partial code var appControl = angular.module('volCtrlPanel.controllers', []); appControl.c ...

Various ways to utilize Apollo's Query property

There are a couple of ways I've come across to utilize the new Query and Mutation props from Apollo. However, I've only been able to successfully implement one of them. First, defining the query within the Query prop directly like this: <Qu ...

Trouble persisting in loading PopperJS and Bootstrap through RequireJS, despite following the suggested PopperJS version

Struggling to load jquery, popperjs, and bootstrap (v4-beta) using requirejs, I'm consistently encountering this error in the console: Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org) at bootstrap.js:6 at bootstrap ...

Shortcuts for $scope variables in AngularJS templates

Within my controller, I often set: $scope.currentThing.data For different parts of my template, sometimes I require currentThing.data.response[0].hello and other times currentThing.data.otherStuff[0].goodbye //or currentThing.data.anotherThing[0].goo ...

Outputting Javascript code from a PHP variable can be achieved by utilizing the echo function

I've been diving into Cross Site Scripting and decided to test some vulnerable examples we were given in class. Currently, I'm experimenting with a form that stores its value in $_REQUEST['in'] of PHP upon submission. The stored value i ...

Unable to generate a select element using the JSON data retrieved from an Ajax request

After making an AJAX call to fetch some JSON objects, I successfully retrieve them. However, I encountered an issue while trying to generate a select element from the returned JSON - it doesn't seem to create one. This is what my JavaScript looks lik ...

Concentrating on the open window monitored by $window

I need to launch multiple windows from my angular application. What I want is to give the user the option to click a button on the main page in order to bring one of these windows back into focus. Typically, in JavaScript, I would accomplish this using the ...

Having some success with AngularJs autocomplete feature

Currently working on a small search application that utilizes Elasticsearch and AngularJS. I have made progress in implementing autocomplete functionality using the AngularJS Bootstrap typeahead feature. However, I am encountering difficulties in displayin ...

Execute a function that handles errors

I have a specific element that I would like to display in the event of an error while executing a graphql query (using Apollo's onError): export const ErrorContainer: React.FunctionComponent = () => { console.log('running container') ...

The function auth.createUserWithEmailAndPassword is not recognized in the context of React

base.jsx: import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; const firebaseConfig = { config }; export const app = initializeApp(firebaseConfig); export const auth = getAuth(); Register.jsx ...

Revise the background-image to a different one that is generated dynamically through an ajax script request

Is there a way to use the GD function ImagePng without storing the image, but instead using it as a background-image property on an element? I have set up an ajax call to a php script that generates the image, and I want to use the response from this call ...

A new module is unable to load Angular Material

Recently, I developed an Angular material module similar to a core module. import { NgModule} from '@angular import {MatCheckboxModule} from '@angular/material/checkbox'; @NgModule({ imports: [ MatCheckboxModule ], exports: [ ...

Integrating a Google map into an Ionic Side-Menu application

I am trying to incorporate a Google map into my Ionic app. I followed the code provided in this https://developers.google.com/maps/documentation/javascript/adding-a-google-map and it worked fine in Angular, but not in my side-menu Ionic project. The specif ...

Exploring how to alter state in a child component using a function within the parent component in React

class ParentComponent extends Component { state = { isDialogOpen: false, setStyle: false } handleClose = () => { this.setState({ isDialogOpen: false, setStyle: false }) } handleOpen = () => { this.setState({ isDialogOpen: true ...