What is the best way to adjust the camera position in three.js while keeping it from rotating?

Question

What is the best way to adjust the camera position in three.js while keeping it from rotating?

I've been working on an interface using three.js and the CSS3DObject rendering tool. To control movement, I've disabled rotation by setting the orbit to 0, allowing only panning and zooming.

Just a heads up - I'm also utilizing Orbit Control in my project.

To position the camera at x=-2000, I used the following code:

camera.position.x=-2000;
camera.position.z=4000;

While this code moves the camera, it still ends up facing (0,0,0) which distorts the view. It seems that giving it a vector may solve this issue.

camera.up = new THREE.Vector3(0,1,0);  //keeps the camera horizontal
camera.lookAt(new THREE.Vector3(2000,0,0));  //should point the camera straight forward

I'm still in the process of understanding how the lookAt function works, so any insights would be appreciated.

javascript three.js

Answer 1

Answer №1

After further investigation, it appears that the orbit control is taking precedence over the camera.lookAt function, causing it to not work as expected. In order to achieve the desired panning effect, I adjusted the camera's x position to match the target value. Additionally, I removed the line of code related to camera.up.

var myCameraX = -2000;
var myCameraY = 500;

camera.position.x = myCameraX;
camera.position.y = myCameraY;
control.target.set(myCameraX, myCameraY, 0);

I hope this solution proves helpful to someone else.

Answer 2

After further investigation, it appears that the orbit control is taking precedence over the camera.lookAt function, causing it to not work as expected. In order to achieve the desired panning effect, I adjusted the camera's x position to match the target value. Additionally, I removed the line of code related to camera.up.

var myCameraX = -2000;
var myCameraY = 500;

camera.position.x = myCameraX;
camera.position.y = myCameraY;
control.target.set(myCameraX, myCameraY, 0);

I hope this solution proves helpful to someone else.

What is the best way to adjust the camera position in three.js while keeping it from rotating?

Answer №1

Similar questions

Assign a default value to empty elements in an array

The operation of 'val' is not supported by HTMLInputElement

Ways to run evaluations on 'private' functions within an angular service using Karma and Jasmine

Thinking of hosting an event centered around Google Maps?

The HTML body content of an iframe

Is there a way to implement a local gltf loader in three.js to display on a GitHub server within my repository?

JQuery: Checkbox keeps unchecking when switching between buttons

Tips for incorporating mapbox.js as a background while keeping html content and Navbar consistently displayed on top

When utilizing :id with Vue, HTML attributes become hidden from view

Depth sorting in Three.js CanvasRenderer is vital for accurate rendering of

What is the process for obtaining a JSON result after completing an upload?

Angular is throwing an error when trying to create a new service: "Workspace must be loaded before it can be used."

Utilizing the Ajax success callback to trigger a subsequent Ajax request as the loop iterates

Exploring AngularJS: Effortlessly Retrieving Object Values

I am encountering problems with images that are imported as module imports in a Vue.js project

The base64 code generated by the toDataURL method on the canvas appears to be incorrect

Using a for loop to add a nested div inside another div

Importing objects using Three.js OBJLoader without automatically adding them to the scene

What could be causing the service method in the controller not to be called by Node JS?

Inserting items into the document after updating the list with fresh data