The adjustment of camera angles within the `THREE.OrbitControls` method in the three.js framework leads

Initially, the THREE.OrbitControls works well with the default camera position. However, when the camera position and rotation are changed via a button click, the camera's position shifts unexpectedly when trying to rotate the view on the canvas.

Camera:

 Camera = new THREE.PerspectiveCamera(45, Width / Height, 0.1, 1000);
 Camera.position.set(170, 120, 400); //initial camera position
 Scene.add(Camera); 


Camera.position.set(30, 167, 81);
Camera.rotation.set(-0.149, 0.3, 0.045); //final camera position

Orbit controls:

controls = new THREE.OrbitControls(Camera, Renderer.domElement);

Check out the fiddle here

Answer №1

For those using THREE.OrbitControls who want to adjust the camera target or position, follow these steps:

Moving the Camera Position:

camera.position.set(-0.041, 1.9, -1.21);
controls.update();

See Demo

Changing the Target Point:

controls.target.set(30, 167, 81);
controls.update();

Try Demo

Resetting the Camera

To return the camera to its original position, use this code:

controls.reset();

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

Cycle through an array of elements and generate a fresh object

Here is an array of objects: [ {id:1,val: 5,name: 'Josh'}, {id:2,val: 7,name: 'John'}, {id:3,val: 6,name:'mike'}, {id:4,val: 7,name: 'Andy'}, {id:5,val: 8,name: 'Andrew'}, {id:6,val: 7,name: &a ...

The enigmatic jQuery AJAX glitch is craving additional arguments

My website uses jQuery's ajax function to handle user signups. Despite using similar code throughout the site, I encountered an error while trying to execute the code below: Error Message: uncaught exception: [Exception... "Not enough arguments" nsr ...

Interactive div containing elements that cannot be clicked

http://codepen.io/anon/pen/zxoYBN To demonstrate my issue, I created a small example where there is a link button within a div that toggles another div when clicked. However, I want the link button to not trigger the toggle event and be excluded from the ...

Updating state within a loop of properties in a React ComponentDidUpdate function

I have been working on a project where I needed to update the state after the componentDidMount lifecycle method. The props that I am expecting in the child component are only available at mount, so I can only update the state after that point. The only so ...

How to Perform a Method Call or Array Iteration in JSX within HTML

Encountering a new issue that I haven't faced before, this is my first time working on something like this and finding a solution is proving to be tricky. Currently, I'm using SendGrid to send an HTML email through a POST request in express on N ...

Having trouble getting the innerHTML update to be triggered by onchange

Hey there, I am looking to tweak my file upload button so that it triggers a change in a specific span, signaling to the user that a file has indeed been selected. <script type="text/javascript"> function get_fileName(fileSelector, fileId) { var ...

How can I prevent emailjs from submitting empty fields in an HTML form?

I recently created a form with an onclick event that triggers the submission of the form even if it's empty. Here is an example: <form> <div class="form-item"> <label for="date">Date:</label> ...

Dimensions of Collada Element

This is my first time delving into the world of javascript, WebGL, and Three.js. I successfully added a dae 3D model to my scene, but now I need to determine its size in order to generate objects within it. However, upon adding the dae object, it appeared ...

Encountering a 400 Bad Request error when attempting to post data, but still managing to successfully save

CODE OPERATION: STORING USER DATA IN DATABASE AS A NEW APP USER REGISTRATION. ISSUE: DATA IS SAVED, BUT RECEIVING "400 BAD REQUEST" AND ERROR MESSAGE IN CONSOLE ERROR: "Cannot save() the same document multiple times in parallel" SCRIPT (GENERATING JWT T ...

Unable to locate the variable named setState

Having trouble creating a toggle button that changes icon and color when clicked? I'm following a tutorial but encountered an issue. Despite attempting different modifications, the same error persists: "Cannot Find Variable: setState" Variable Error ...

Value is extracted from the getDisplayedRowCount() function in the AGrig React and placed into

By utilizing the following code, I have been able to effectively console.log the value: console.log(this.gridApi.getDisplayedRowCount()); This snippet is placed inside the onGridReady function of my component. I am interested in retrieving this value an ...

Use jQuery or javascript to eliminate the 'Webpage Dialog' from the 'showModalDialog' window

At one point on the page, I have a line of code that looks like this: onclick="window.showModalDialog("http://rauf-thecoder.blogspot.com/");" When executed, it displays the following: Is there a way to eliminate the title bar text for the Webpage Dialog ...

How does this particular save method function within the context of mongoose, without explicitly mentioning the specific database

Starting off, I have a main workspace folder called "Projects" Inside this folder, there are 2 subfolders: Models: 1) Something-model => const mongoose = require("mongoose"); const Schema = mongoose.Schema; const Something-Schema = new Schema({ n ...

When scrolling, use the .scrollTop() function which includes a conditional statement that

As a newcomer to jQuery, I've been making progress but have hit a roadblock with this code: $(window).scroll(function(){ var $header = $('#header'); var $st = $(this).scrollTop(); console.log($st); if ($st < 250) { ...

Leveraging client-side routes in conjunction with page templates retrieved from Contentful

Objective In an effort to restrict access to certain content under a specific URL (/dashboard), I am exploring the use of client-only routes. This content, sourced from Contentful and utilizing a page template, will follow a route structure like {MYDOMAIN ...

What could be causing my YAML value to be undefined when I try to read it in JavaScript, despite it being defined in every other

I have been attempting to access a YAML file from my local directory. While I am able to read the file, the data within it appears to be undefined. The error message that I am encountering is as follows: https://i.sstatic.net/yXC0H.png Here is an exampl ...

Monitoring Changes in Input Values within PHP foreach Loop using jQuery

In my PHP code, I have a foreach loop inside a form that populates input values from a database. Each input has a unique ID generated based on the loop index. <form class="form-horizontal"> <?php $count = 0; foreach ($value as ...

Is it feasible to separate the bin and lib dependencies in an npm module?

Imagine you have already successfully released a nodejs module on npm. This module is straightforward - just install and import it, provide a string and a config object, and it will return a string for you. Now, here's the twist: you want this module ...

Unable to assign a local variable in Jquery .ajax() function to a global variable

Check out this example of a jQuery AJAX code: $(document).ready(function() { var custom_array = new Array(); $.ajax({ url: 'data.json', type: 'get', dataType: 'json', success: function(response) { $ ...

What is the best method for converting an Object with 4 properties to an Object with only 3 properties?

I have a pair of objects: The first one is a role object with the following properties: Role { roleId: string; name: string; description: string; isModerator: string; } role = { roleId:"8e8be141-130d-4e5c-82d2-0a642d4b73e1", ...