Obtain the OrbitControls view result from ThreeJS and set it as the default position

When implementing OrbitControls in ThreeJS, users can freely move the camera around. However, upon refreshing the model, the camera resets to its default position. I attempted to preserve the camera position and rotation using the code snippet below:

camera.position.x = lastPosX
...
...
camera.rotation.x = lastRotX
...
...

Despite my efforts, the result is not accurate and the view appears inverted and incorrect. I need to find a way to reproduce the exact view that users see when interacting with the camera using OrbitControls, even after refreshing the scene. What steps am I overlooking to achieve this?

javascriptthree.js

Answer №1

Did you attempt using camera.position.set(x,y,z) to adjust the orientation? Perhaps setting them all at once could help achieve the desired result.

Answer №2

One potential solution is to store the camera's coordinates in a global variable within the update function, updating them every 2 seconds. Then, upon refreshing, the most recent coordinates can be loaded.

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

Is it possible to adjust the timezone settings on my GraphQL timestamp data?

I've come across a lot of helpful information regarding the usage of Date() and timezones, but something seems to be off. In my GraphQL setup (sourcing from Sanity), I have configured it to use formatString in this manner: export default function Minu ...

javascriptgraphqltimezonesanity

Should loaders be utilized in an Angular application?

Webpack configuration allows the use of various loaders, such as file-loader, html-loader, css-loader, json-loader, raw-loader, style-loader, to-string-loader, url-loader, and awesome-typescript-loader. Does Angular have built-in knowledge of loaders with ...

javascriptangulartypescriptwebpack

Using React hook form to create a Field Array within a Dialog component in Material UI

I have a form with custom fields added via Field Array from react-hook-form, and everything is functioning properly. However, I recently implemented drag and drop functionality for the property items to allow reordering them. Due to the large number of fie ...

javascriptreactjsformsmaterial-uireact-hook-form

Convert JavaBeans sources into a JSON descriptor

I'm in search of a tool or method to analyze standard JavaBeans source code (featuring getters and setters) and create json descriptors using tools like grunt or ant, or any other suitable option. Here's an example: FilterBean.java: package com ...

javajavascriptjsonjavabeans

Obtain the AngularJS service using Vanilla JavaScript

Trying to access the AngularJS service from plain JavaScript. Utilizing the following syntax: angular.injector(['ng', 'error-handling']).get("messagingService").GetName(); It works fine when the messagingservice has no dependencies. H ...

javascriptangularjs

Struggling to loop through a child in Firebase real-time database?

I'm struggling to retrieve a nested child from my database with the following structure https://i.stack.imgur.com/ZDs38.png I am attempting to get the URI from the Gallery object. When I log in, I can see this in the console https://i.stack.imgur.c ...

javascriptreactjsfirebasereact-nativefirebase-realtime-database

Having trouble parsing the JSON object values within the Error section of the Ajax call

When making an Ajax call to a rest web API, I encountered an error that I need help resolving. Here is the code snippet: $.ajax({ url: "/********/getbytitle('****')/items", type: "POST", contentType: "applicat ...

javascriptjqueryjsonajax

The content is not displayed in the d3 visualization

While examining the code of this visualization found at http://bl.ocks.org/mbostock/4062045, I noticed that the name from the JSON file is not displaying alongside the nodes. Even though the code includes: node.append("title").text(function(d) { return ...

javascripthtmljsonsvgd3.js

"Automate the process of manual content duplication with JavaScript's for each replacement

Seeking a solution to automate the selection process without writing individual JS scripts for every input. For instance, having 10 double inputs (total of 20 inputs) and utilizing the each() function or other methods by only declaring selectors. Find th ...

javascriptjqueryhtmleach

Building a like/dislike feature in Angular

Here is a snippet of code I have that includes like and dislike buttons with font-awesome icons: <ng-container *ngFor="let answer of question.answers"> <p class="answers">{{answer.text}} <i class="fa fa-hand-o-le ...

javascriptangulartypescript

Tips for continuously running a loop function until retrieving a value from an API within a cypress project

Need help looping a function to retrieve the value from an API in my Cypress project. The goal is to call the API multiple times until we receive the desired value. let otpValue = ''; const loopFunc = () => { cy.request({ method: &ap ...

javascripttypescriptecmascript-6cypress

During bundling, utilize an npm script to copy the package.json file to the dist directory

Currently, I am facing a challenge while trying to enhance my npm bundle script. Although the initial part is functioning smoothly, I am encountering difficulties in including three additional files along with the bundle. At present, my script looks like ...

javascriptnode.js

Is there a way to substitute the function variable using JavaScript?

Is there a method to dynamically replace the variable 'abc' with 'cde' in HTML using JavaScript? For example, if I have the following code: <table width="150" border="0" cellspacing="0" cellpadding="2" id="productBox"> <tr> ...

javascript

Exploring ways to check async calls within a React functional component

I have a functional component that utilizes the SpecialistsListService to call an API via Axios. I am struggling to test the async function getSpecialistsList and useEffect functions within this component. When using a class component, I would simply cal ...

javascriptreactjsfrontendreact-testing-library

Upon successful registration, users will be automatically redirected to their profile page

Having trouble with the redirection to the login page from my profile page, which is an HTML file and the main page is the login page. I've tried redirecting to both pages, but it always lands in the catch block whenever a redirect is attempted. angu ...

javascriptangularjstokenangularjs-ng-route

Select an option within a for loop nested in an each function

How To Fetch JSON Data and Create a Shopping Cart $.ajax({ url: "myurl", type: 'POST', dataType: "json" }).done(function(response){ $.each(response,function(k,v){ //UL this products info list ...

javascriptjqueryfor-loop

Update input box value using Javascript

Here is the code for a <script> tag on a webpage that includes an input box within the body of an HTML document- <script type="text/javascript" language="JavaScript"> window.onload = function addSearchText() { document.getElementB ...

javascripthtmlajax

Ajax undoes any modifications enacted by JavaScript

When using ajax, I trigger an OnTextChangedEvent. Before this event occurs, there is a Javascript function that validates the input field and displays text based on its validity. However, once the Ajax is executed, it resets any changes made by the Javascr ...

c#javascriptasp.netajax

Sending parameters to async.parallel in Node.js

My goal is to create a simple example that demonstrates the concept I have described. Below is my attempt at a minimal example, where I expect to see the following output: negative of 1 is -1 plus one of 2 is 3 Here is the code I've written: var asy ...

javascriptnode.jsasynchronous

I am attempting to activate the HTML5 color picker's popup using JQuery

Is there a way to open a color picker in a popup window when an input[type=color] is clicked, using JavaScript? HTML <div id="customColorPick"></div> <input id="customColorPickInput" type="color" /> JQuery $("#customColorPick").click( ...

javascriptjqueryhtml