What is the process for incorporating various cameras with orbit controls?

My Situation:

In this scenario, I have setup two cameras - one displayed in the 3D space and the other recording that specific area. The code snippet below is used to create and configure these cameras along with the orbit controls.

https://i.sstatic.net/ioiqn.png

//Setting up the First THREE Camera
camera_Main = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera_Main.position.set(-2000, 500, 500);
camera_Main_declared = true;

orbitController_Main = new THREE.OrbitControls(camera_Main, renderer_Main.domElement);
orbitController.maxPolarAngle = Math.PI / 2;  
orbitController.enablePan = false;
orbitController.maxDistance = 2800;
orbitController.minDistance = 400;
orbitController.saveState();

//Configuring the Second Camera
camera_RT = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, -100, -500);
var helper = new THREE.CameraHelper( camera_RT );
scene_Main.add( helper );

The Problem:

I am facing an issue where I need to set a different camera as default for the orbit controller. So when I execute the following lines of code:

orbitController.?????????? // Set camera_RT as default
orbitController.reset(); //Reset camera_RT orbit controls

my intention is to reset the orbit controls of camera_RT, rather than affecting camera_Main.

javascriptthree.jscamera

Answer №1

If you're looking for a straightforward way to switch control between two cameras, one easy method is to create separate instances of OrbitControls() for each camera and then simply activate or deactivate them as required:

var oControl_Main = new THREE.OrbitControls(camera_Main, renderer_Main.domElement);
var oControl_RT = new THREE.OrbitControls(camera_RT, renderer_Main.domElement);

// Only enable control for main camera
function enableMain() {
    oControl_Main.enabled = true;
    oControl_RT.enabled = false;
}

// Switch control to RT camera
function enableRT() {
    oControl_Main.enabled = false;
    oControl_RT.enabled = true;
}

For a more complex approach to changing control, you could consider modifying the source code of OrbitControls.js by adding a function to dynamically change the camera assigned to this.object = object. However, managing the transition between different camera states along with their respective orientations and positions may introduce additional complexities.

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

Upgrade to a more stable configuration version for Nodemailer as the current configuration is not supported. Consider down

I'm currently utilizing Nodemailer version 2.6.4 with Node version 6.9.1 var nodemailer = require("nodemailer"); var wellknown = require('nodemailer-wellknown'); var transporter = nodemailer.createTransport("SMTP",{ service: "yahoo", ...

javascriptnode.jsnpmnodemailer

Editing in real time, yet no instance to be found

I have developed my own custom non-jQuery ajax solution for building web applications. Recently, I encountered compatibility issues with IE9 while using TinyMCE, so I am considering switching to CKeditor. The editable content is contained within a div str ...

javascriptajaxckeditor

The custom pagination feature in Addsearch UI always default to displaying the first page of search

I am currently using addsearch-ui version 0.7.11 for my project. I have been attempting to integrate a customized pagination function based on this example template. However, I have encountered an issue where the arrow buttons always navigate to the first ...

javascripthtmlnpmpaginationhandlebars.js

Problem related to permissions within a node.js package

Introducing my newly built npm module called emeraldfw, now available for public use. Here is a glimpse of the contents in my package.json file: { "name": "emeraldfw", "version": "0.6.0", "bin": "./emeraldfw.js", "description": "Emerald Framework ...

javascriptnode.jsnpm

Determine the exact beginning and ending positions of a word when dividing it using Javascript

After creating a special function that breaks down a word based on spaces while keeping punctuation marks intact, I was able to achieve the desired result. function tokenizeUtterance( utterance ) { let spilittedUserText = utterance.toString().match( /[& ...

javascriptjqueryarraysjsonstring

Looking for a way to make this HTML tab appear using ng-show and an external variable in AngularJS - seeking guidance as a beginner!

Here is the HTML code snippet controlling the tab presentation: <li class="presentation" ng-show="currentUserAuthority == LIBRARIAN" > However, there seems to be an issue with the variable "currentUserAuthority" not updating until after the web pag ...

javascripthtmlangularjs

Obtaining the previous element with aria-selected using Jquery Selector rather than the current one

I am currently utilizing Semantic UI React to design a dropdown menu for selecting countries. To access the values that are passed as attributes to a <div role=option />, I use the following method: handleSelectCountry = (e, props) => { con ...

javascriptjqueryreactjs

An error occurs when attempting to upload an image in cropper js due to a violation of the Content Security Policy directive: "img-src * data:"

I'm currently using cropperjs to crop an image upon uploading click here to see the button Once the image is selected for upload, I encounter this problem The data in blob storage remains intact, but there seems to be an issue after the image is upl ...

javascript.netgoogle-chromecontent-security-policycropperjs

Creating a unique custom error message for every validation option

I am using a Joi schema and I would like to set custom error messages for each validation option. Here is an example of my schema: const schema = Joi.object().keys({ name: Joi.string() .min(5).error(() => 'first message') .ma ...

javascriptnode.jsvalidationjoi

Saving the current state of a member variable within an Angular 2 class

export class RSDLeadsComponent implements OnInit{ templateModel:RSDLeads = { "excludedRealStateDomains": [{"domain":""}], "leadAllocationConfigNotEditables": [{"attributeName":""}] }; oldResponse:any; constructor(private la ...

javascriptangulartypescript2-way-object-databindinges6-class

Providing input to a nested mongoose query

I can't figure out why I keep experiencing 504 Gateway timeouts. app.get("/api/exercise/log", function(req,res) { let userId = req.query.userId; let from = req.query.from; let to = req.query.to; let limit = req.query.limit; console.log("lim ...

javascriptmongodbexpressmongoosemongodb-query

React - method for transmitting dynamically generated styles to a div element

As a newcomer to the world of React, I keep encountering an unexpected token error related to the ":". Can someone please assist me with understanding the correct syntax for including multiple styles within the Box component provided below? Additionally, h ...

javascripthtmlcssreactjs

Enhance your website design with a custom content scroller using Bootstrap and

Having trouble getting this plugin to work with bootstrap on my website. Does anyone have a solution for this issue? Alternatively, does anyone know of another approach I could take? UPDATE: I managed to fix the problem myself. Add the following code ...

javascripthtmlcssjquery-pluginstwitter-bootstrap-3

Why does Internet Explorer throw a null pointer exception while Firefox does not?

My script loops through an array of HTML tag IDs, with some elements being empty. It works perfectly in Firefox but throws a null pointer or 'not an object' error in IE. if((storedVars.id) != ("")){selenium.browserbot.getCurrentWindow().document ...

javascriptselenium

Is there a way to trigger an action immediately after a collapse item is closed?

According to the Bootstrap 5 documentation, you can instantiate a collapse using the constructor. For example: var myCollapse = document.getElementById('myCollapse') var bsCollapse = new bootstrap.Collapse(myCollapse, { toggle: false }) I want ...

javascriptevent-handlingbootstrap-5

Determine the quantity of elements within a JSON object based on specified criteria

I am seeking a way to count the number of items in an array of JSON objects that meet specific conditions. The structure of my array is as follows: array = [{ name: 'Bob', age: 24 }, ...., { ...

javascriptjsonangularjs

Displaying an image based on user input

I'm attempting to display an image using JavaScript after a user completes an input field. I've managed to show the URL when using an input type="text," but when I attempt to change it to an img tag, it returns [object Object]. Is this achievable ...

javascriptphpajax

Error: Expecting only one React element child to be passed into React.Children.only() function

I am encountering an issue while attempting to construct a web table using the antd library. The exact error message reads: "react.development.js:1251 Uncaught Error: React.Children.only expected to receive a single React element child". I have been stru ...

javascriptreactjsnext.jsantd

Issue with mouse movement causing inaccurate coordinates

Hello there! I am facing an issue with a small project I'm working on. My goal is to have an indicator appear whenever I hover my mouse over the fishing area, but it seems like the coordinates are off when using the mousemove event. You can check out ...

javascriptcssvue.jssassgsap

List-style-type outside of a table's boundaries

I recently experimented with using <ol> as list elements within a table in order to dynamically insert new table rows. <table> <thead> <tr> <th>head</th> <th>head</th> <th>h ...

javascriptjqueryhtml