Utilize three.js to set the camera's position and rotation

In my current setup, I have a particular object in view using a PerspectiveCamera. By utilizing OrbitControls, I can navigate around the object, rotate it, pan it, and more.

My goal is to reposition the object to a specific location at a specific angle and then retrieve the camera's position and rotation. I plan to update the camera with these values later on. However, there seems to be an issue with three.js not applying some of these values correctly. Here is how I am attempting to obtain the camera's position, rotation, and the lookAt vector:

console.log("Position", camera.position)
console.log("Rotation", camera.rotation)
console.log("World Direction", camera.getWorldDirection())

Once I have these vectors, I document them and apply them like so:

camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
camera.rotation.set(-3.14, -0.44, -3.14);
camera.position.set(-1067.29, 34.23, 205.82);
camera.lookAt(0.43, -7.10, 0.90)

However, I encounter an issue where the rotation and position values change unexpectedly if I have used the pan function with OrbitControls.

Answer №1

Ensure to call "controls.update()" on Orbitcontrols after adjusting the camera's position.

For a code example, refer to the OrbitControlDocumentation

Update: Important: orbitcontrols may override camera transformations

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

Issue with ESLint: Unexpected token found in JavaScript when converting to a dictionary

I've implemented a JavaScript code snippet that loops through an array of fields to find specific properties and then adds them to a dictionary. For another example, you can check out this site. return this.getFields() .reduce((mappings, field) =& ...

Generating a JavaScript array in PHP

As I work on developing a dynamic Google Geochart, one key aspect is creating an array to hold the data. The structure includes the country as the unique identifier and the color value to determine the map shading. arrayData = [['Country',' ...

Adding a Sequence of Class Names to <li> Elements with JavaScript

How can you easily generate sequential class names in a for loop? ...

Adapt appearance according to the length of the text

Currently, I have an array that stores multiple strings based on displayed charts. My objective is to find the longest string within this array. So far, this task has been executed without any issues. The code snippet for this process is as follows: var ...

Creating reactive behavior with a Promise initiated within a constructor - A guide

I am facing an issue with my Thing class. In the constructor, there is an asynchronous operation using fetch. Once the fetch completes, the result is assigned to a field in the Thing object: class Thing { constructor() { this.image = null ...

Error: The function seems to be malfunctioning or missing

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $('div'); // <--- THIS DOESN'T WORK </script> An issue has been encountere ...

I must only assign the result to "value" if the condition of the map is true

I am looking to set the variable "value" to only contain the value that meets the condition in the map function const arr= [1,2,3,4,5]; value = arr.map(item => item > 4 && item) console.log(value); The resulting value is currently [false, false, fa ...

HELP! Imagemaps are being ruined by overlapping DIVs!

I encountered a minor issue. In summary, I have a container div that displays rotating images and image maps with clickable links within each image setup like a gallery with built-in navigation. Recently, I was tasked with adding simple animations to the i ...

The Firebase Authentication module encountered an uncaught error: [$injector:modulerr]

I encountered a challenge while developing a small task for Gmail user login and logout using Firebase authentication. The issue in my code is Uncaught Error: [$injector:modulerr] The libraries I included are: <script src='https://cdn.firebase.co ...

Find distinct elements in an array of objects

Imagine you have an array filled with different objects: var itemsArray = [ {name: "apple", color: "red", weight: "100g"}, {name: "banana", color: "yellow", weight: "120g"}, {name: "apple", color: "red", weight: "100g"}, {name: "banana", color: "y ...

What is the method to allocate the smallest available number that has not yet been assigned?

As I'm dynamically generating elements and adding them to the page, each element needs a unique numerical id. However, due to non-linear removal of elements, there can be gaps in the assigned ids. For example... In one scenario: 1, 3, 4, 5, 16, 22. ...

Guide on subscribing to an object from a service in Angular 2/5

I am facing an issue where I need to update my property component with data received from the server. In the Service, I have implemented something like this: private events: Event[] = []; eventChanged = new Subject<any>(); // Edit: added an observa ...

Tips on capturing a URL using JQuery

Currently, I am in the process of importing an external HTML file into my webpage. Within this file, there is a JavaScript method linked to a form submission event. function ValidateInput(){ //some code if(validationFailed){ ...

Show/hide functionality for 3 input fields based on radio button selection

I need assistance with a form that involves 2 radio buttons. When one radio button is selected, I want to display 3 text boxes and hide them when the other radio button is chosen. Below is the code snippet: These are the 2 radio buttons: <input type= ...

Unable to change placeholder in Material UI's Select Form

I'm having trouble modifying my SelectionForm. I need to update the color of the placeHolder image from red to a different color, but I can't find any properties or props on the material ui Docs to do so. Can someone assist me with this? https:/ ...

Is it possible to utilize getInitialProps in both _app.js and in individual pages within the application?

I am currently developing my first significant NextJS application. Instead of hardcoding the left navigation data directly into the app, I have set it up to pull in JSON data. This allows me to make minor changes to the site's navigation without havin ...

When downloading files in Chrome or Safari, the $ajax call is in a pending state, whereas in IE or Firefox,

Measuring the time it takes to download a 1MB file using AJAX calls. Below is the code snippet: var start = new Date(); $(document).ready(function() { $.ajax ({ url: 'https://www.example.com/dummyFile1024', crossDomain: t ...

Organizing a Vue.js SPA project: Implementing Vuex store and API calls efficiently

Here is how I have organized the structure of my Vue app: components/ article/ AppList.vue common/ AppObserver.vue NoSSR.vue layout/ AppFooter.vue AppHeader.vue ui/ AppButton. ...

Combining various data types within a single field in BigQuery

Is it feasible to specify a table schema with a field that allows for multiple data types? For instance: BIGQUERY TABLE SCHEMA schema: [{ name: 'field1', type: 'string', }, { name: 'field2', type: &apo ...

Design an interactive vertical divider using d3

I am interested in developing a vertical rule similar to the one demonstrated at that updates its value dynamically based on the user's mouse movement. The example provided uses cubism.js, however, I would like to achieve the same functionality usin ...