Tips for utilizing the Raycaster in tandem with a CombinedCamera?

When trying to implement a Raycaster for selection, I encountered an issue where it worked fine with a PerspectiveCamera but not with a CombinedCamera.

It appears that the Raycaster does not support CombinedCamera, so I made some modifications in the three.js file by adding the following code:

if ( camera instanceof THREE.CombinedCamera ) {
    if( camera.inPerspectiveMode ) {
        camera = camera.cameraP;
    } else if ( camera.inOrthographicMode ) {
        camera = camera.cameraO;
    }
}

if ( camera instanceof THREE.PerspectiveCamera ) {

...

However, this approach did not solve the issue because it seems that the nested cameras' position, quaternion, and rotation are not updated. How can I modify this to make the Raycaster work seamlessly with both Ortho and Perspective modes of a CombinedCamera?

Answer №1

To enable raycasting, the renderer must have access to the world matrix data. To implement this functionality, adjust the CombinedCamera code as follows:

  // Update the .toPerspective() method:
  this.matrixWorldInverse = this.cameraP.matrixWorldInverse; //
  this.matrixWorld = this.cameraP.matrixWorld;               //

  // Include the following in the .toOrthographic() method:
  this.matrixWorldInverse = this.cameraO.matrixWorldInverse; //
  this.matrixWorld = this.cameraO.matrixWorld;               //

This enhancement is applicable from version r73 onwards.

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

What is the best way to incorporate multiple conditions within a React component?

When working in React, I have the ability to conditionally render any div using the following code snippet: {hasContent && <span>{value}</span> } Recently, I attempted to include two conditions as follows: {hasContent || hasDesc &am ...

How can I implement a Dynamic Input field using Angular?

Suppose there is an input field where a user enters an ID. Once the user clicks the "add" button, I need to send a request to my server to fetch a "name". Afterwards, I want to disable the text input field, hide the "add" button, and show a number input fi ...

React.js: Dynamically Highlighting Menu Items Based on Scrolling位置-GaidoWhen a

Having trouble finding a solution for this issue. I'm currently working on creating a navigation bar with scroll-to functionality, where clicking on a menu item scrolls the page to the corresponding section. However, I am unsure how to change the colo ...

What is the best way to assign user input to my JavaScript variables?

As a newcomer to programming, I am eager to develop an app that utilizes the numerical values inputted by customers as variables for calculations. How can I extract the value from an input using JavaScript? For instance, how can I subtract one input value ...

Transferring an array of objects from one array to another with the click of a button

I'm facing an issue with moving data between two arrays of objects using buttons in a Nextjs project. The functionality works correctly when selecting a single data item, but it gives unexpected results when selecting multiple items. Although my code ...

What is the proper way to input a Response object retrieved from a fetch request?

I am currently handling parallel requests for multiple fetches and I would like to define results as an array of response objects instead of just a general array of type any. However, I am uncertain about how to accomplish this. I attempted to research "ho ...

Utilizing the LitElement component multiple times within a single webpage

Developed a web component using LitElement which is being utilized multiple times on the same page. Looking to initiate a single event when the component is rendered for the first time on the page. ...

Enabling and disabling multiple input fields based on the status of a checkbox in order to manage dynamic inputs

I need help with a situation involving dynamic input fields and checkboxes. My goal is to disable the input field if the checkbox with the corresponding ID is checked. Here is the PHP code snippet: <table class="table table-striped"> <thead& ...

NgZone is no longer functioning properly

Seemingly out of the blue, my NgZone functionality has ceased to work. I'm currently in the process of developing an application using Ionic, Angular, and Firebase. An error is being thrown: Unhandled Promise rejection: Missing Command Error ; Zon ...

Restructure an array of objects into a nested object structure

I have a list of task items that I need to organize into a structured object based on the ownerID var tasks = [ {taskID: "1", title: "task1", ownerID: "100", ownerName: "John", allocation: 80}, {taskID: "2", title: "task2", ownerID: "110", ownerNam ...

Display a text over a full-screen HTML5 video

Is there a way to display text on a fullscreen video in HTML? I have tried using absolute positioning for the text and relative/fixed/none positioning for the video, but it does not work when the video is in fullscreen mode. I also attempted to call the ...

Is it possible to achieve a file upload in splinter using Python?

A challenging task lies ahead with my web application, where users can upload XML-style files and make modifications directly in the browser. To test this scenario using Splinter, I need to ensure correct input (id="form-widgets-body"): https://i.sstatic ...

A Step-by-Step Guide to Launching PDF Blob from AJAX Response in a Fresh Chrome Tab

I'm sending a POST request to a server, and in response, I receive a PDF file that is returned as a blob. To handle this blob, I am using the "handle-as='blob'" attribute of iron-ajax (a Polymer element), just to cover all bases. Now, my g ...

I encountered an error in my React project while compiling: "Module not found: Error: Can't resolve 'react-reveal'. What is this 'react-reveal' and why is it showing up in my

Issue with Module: Error: Unable to locate 'react-reveal Upon running "npm start" in my React project, I encountered this error. Despite attempting multiple solutions, the problem persists. How can I resolve this issue? Even after downloading the np ...

Ways to sort items in an array according to their attributes

Is there a way to filter objects within an array based on their properties? Here is the current code I am using: products = [ { title: "Bambu shorts 2.0" }, { title: "Bambu shorts 2.0" }, { title: ...

Executing a javascript function numerous times

Here are a few examples: <div class="statement">text goes here</div> <div class="response"><input type="text" id="amount1" style="border: 0; color: #f6931f; font-weight: bold;" /></div> <div id="sli ...

Vue.js encountered an error while trying to load the component: either the template or render function is not

Currently I am delving into the realm of Vue.js paired with Laravel by following this series, where the narrator seems to breeze through without encountering any errors. Unfortunately, when I attempted to change the route, a pesky error made an appearance. ...

What is the method for obtaining a Boolean value that exists in mongoose?

I'm currently attempting to verify if an account associated with the same username already exists. However, when utilizing the exist method for checking, I'm receiving a large object instead of a Boolean value. async checkExisting(username,userCo ...

Is there a way to specifically call the last promise in a loop?

I'm new to promises and could use some help. I have a situation where promises are resolving randomly, how can I ensure that the last promise in the loop is resolved after the full loop executes? For example, if this.selectedValues has 4 values, som ...

JQuery unable to retrieve the value from a radio button

Currently, I'm facing an issue with a form featuring image-based radio buttons. The problem arises when attempting to initiate an AJAX call based on the chosen value (either 10, 30, or 100). Despite selecting a value other than 10, it keeps defaulting ...