The raycaster is experiencing issues when used with multiple cameras in the Three.js library

I am currently developing an application similar to the threeJs editor. In this project, I have implemented four different cameras, each with unique names and positions. Here is an example of one of the cameras:

cameras['home'] = new THREE.CombinedCamera(window.innerWidth / 2, window.innerHeight / 2, 70, 1, 1000, -500, 1000);
cameras['home'].lookAt(centerPoint);

However, when I attempt to use a raycaster with the selected camera:

raycaster.setFromCamera(mouse, selectedCamera);
var intersects = raycaster.intersectObjects([sceneObjects], true);

I encounter the following error message:

'THREE.Raycaster: Unsupported camera type.'

In order to address this issue, I made modifications to the Three.js code:

Raycaster.prototype = {
...
setFromCamera: function ( coords, camera ) {
    if ( (camera ) ) {

Despite these changes, the Raycaster functions properly. I am curious as to why the CombinedCamera is not compatible with the raycaster.

Answer №1

It seems like the issue lies within the error message itself: the Raycaster code is not compatible with CombinedCamera at this time. It's worth noting that CombinedCamera consists of 2 cameras, one orthographic and one perspective.

You could experiment with using setFromCamera(selectedCamera.cameraP) or setFromCamera(selectedCamera.cameraO) as a potential solution, although I cannot confirm its effectiveness since I haven't personally tested it.

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

Enhancing a popup with animated effects

I have been working on a popup that I want to add a subtle animation to. A fade effect seems like the perfect solution. Here is the code for the button: <a href="javascript:void(0)" onclick="document.getElementById('back_overlay').style.disp ...

JQuery mishandles its left positioning

Here's the code snippet I've been working with: $(this).closest("p").after('<strong>' + arMess[iCurIndex] + '</strong>').next().animate({ top: $(this).offset().top - 57, left: -$(this).widt ...

Executing an Ajax call to trigger a NodeJS function that executes a bash script

I have created a bash script to generate a JSON file that needs to be parsed and sent to the client-side JavaScript for display. My goal is to achieve this without refreshing the page and without using jQuery. I attempted to use Axios but seem to be facing ...

Sequential execution not functioning properly in NodeJS Async series

Here is the code snippet I am working with: var async = require('async'); var rest = require('restler'); async.series([ function(callback){ rest.get('https://api.twitter.com/1.1/statuses/mentions_timeli ...

Exploring the world of ASP .NET development with the powerful Sonar

We're currently working on an ASP .NET project and are looking for a way to analyze JavaScript files on-the-fly. Unfortunately, SonarLint only offers analysis for C# files. The incremental analysis feature seems to have been phased out, and issues ana ...

Unable to modify the appearance of an HTML element when injected via a Chrome extension

I am currently developing a unique chrome extension that uses Ajax to inject custom HTML into the current tab. This extension appends a <div> element to the body, and now I need to manipulate it using JavaScript. Specifically, I want it to dynamical ...

Is it possible to automatically format a date as mm/dd/yyyy when typing into a date picker textfield in Nuxt.js?

In my Nuxt.js with Vuetify app, I successfully implemented a date picker that works well when selecting dates from the calendar. Now, I want to extend this functionality to allow users to type in dates as well. For example, if someone types "12122021", it ...

Is there a method to retrieve all Class elements without using a for-loop?

I am trying to retrieve all elements with a specific class using document.getElementsByClassName(); <body> <div class="circle" id="red"></div> <div class="circle" id="blue"></div> <div class="circle" id="yell ...

Issue with ng-bind-html in TranslateJS causing problems

I have been working on implementing translation in a web application using angularJS and the angular-translate repository, which can be found at . As per the documentation, it is possible to use this repository to set text for a specific element in the HTM ...

Is there a way to gather selected checkboxes from all child checkbox components in vue?

I have a unique setup where my table rows are generated by child components, each containing a checkbox. I am looking for a way to retrieve all the checked checkboxes at once without using two-way binding or updating an array on the parent component. Here ...

Error encountered in Internet Explorer 11 - Access is forbidden - XMLHttpRequest

I am encountering a unique issue with IE11 and ajax. Most of the time, everything works as expected when I use the code below for my requests. However, I have noticed that when I try to use it in combination with a copy and paste function, an 'Access ...

Finding the IP address from a hostname in Node.js: A step-by-step guide

I am looking for a solution to resolve a hostname defined in the hosts file to its corresponding IP address. Take, for instance, my hosts file located at "/etc/hosts": 127.0.0.1 ggns2dss81 localhost.localdomain localhost ::1 localhost6.localdomain ...

I must update the menu to show only one sub-menu at a time, ensuring that multiple menus cannot be displayed simultaneously

When I click on a menu option, it displays correctly, but when I click on another option, both are displayed. The goal is to only display one at a time. https://i.sstatic.net/J6vLf.png $('.sub-menu ul').hide(); $(".sub-menu a").click( ...

Differentiating between an individual array and an array containing multiple arrays

Can jQuery differentiate between a regular array, an array of arrays, and an array of objects? var a = [1,2,3]; var a2 = [[12,'Smith',1],[13,'Jones',2]]; var a3 = [{val:'12', des:'Smith', num:1}]; //a = regular arr ...

Is it possible to include HTML in a response when verifying emails with Node JS and Angular?

Before diving in, I want to make it clear that I have experience using APIs created in NodeJS with Angular. However, I am encountering a bit of a challenge. The issue at hand involves a function that verifies the email used during registration: exports.co ...

Is it possible to include pseudo element elements in the configuration of a custom theme in Material UI?

Within my file themeConfig.js, I have defined several theme variables that are utilized to style different components throughout my application. Among these variables, there is a need for implementing the -webkit scrollbar styles for certain components. Du ...

Revealed the previously hidden private variables within the Revealing Module Pattern

I have encountered an issue while implementing the Revealing Module Pattern, as I am struggling to expose a modified private property. var myRevealingModule = (function(){ var name = 'Samantha'; function updateName () { name = ...

What methods are available for parsing JSON data into an array using JavaScript?

I possess an item. [Object { id=8, question="وصلت المنافذ الجمركية في...طنة حتّى عام 1970م إلى ", choice1="20 منفذًا", more...}, Object { id=22, question="تأسست مطبعة مزون التي تع... الأ ...

Output information to the specified divID using Response.Write

Currently, I have knowledge of javascript and I am currently expanding my skills in ASP.NET C#. My goal is to achieve the following task using javascript: document.getElementById('divID-1').innerHTML= '<p>Wrong Password< ...

Learning to extract information from a JSON file with various key and value combinations

I am facing a challenge with my JSON data file, which contains UserIDs as keys and Passwords as values. My goal is to use JavaScript for validation by reading this JSON file. The structure of my JSON is as follows: IDsNPass = '[{"A":"A15"},{"B":"B15" ...