Rotate camera around item when dragged

Question

Rotate camera around item when dragged

In my three.js scene, there is an object positioned at {x: 0, y: 0, z: -150}, while the camera is placed at {x: 0, y: 0, z: 75}. I am trying to allow the user to drag the camera around the object, keeping it in view at all times.

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

The camera should move along the circular path when dragged to the left or right.

I attempted to achieve this by using the OrbitControls and setting a pivotPoint:

const controls = new OrbitControls(camera, renderer.domElement);
controls.update();
         
object.position.set(0, 0, -150);
pivotPoint = new THREE.Object3D();
object.add(pivotPoint);

camera.position.set(0, 0, 75);
camera.lookAt(object.position);

However, I am facing an issue where the camera is rotating around itself rather than around the object.

javascript three.js 3d camera drag

Answer 1

Answer №1

Give this a try:

camera.position.set(0, 0, 75);

object.position.set(0, 0, -150);

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.copy(object.position);
controls.update();

The concept behind the code snippet above is to utilize the target property of the OrbitControls to define the focal point. There is no requirement to manually employ the lookAt() function on the camera object.

Answer 2

Give this a try:

camera.position.set(0, 0, 75);

object.position.set(0, 0, -150);

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.copy(object.position);
controls.update();

The concept behind the code snippet above is to utilize the target property of the OrbitControls to define the focal point. There is no requirement to manually employ the lookAt() function on the camera object.

Rotate camera around item when dragged

Answer №1

Similar questions

The result of combining two JavaScript variables

display saved data from ajax request

Do not reveal result of coin flip using Javascript and API

What is the best way to create a fixed footer in Next.js using React?

React frontend unable to retrieve JSON data from Rails API

Working with ng-model on an array with multiple dimensions

AJAX isn't quite cooperating - it seems that only the error callback is getting

What is the simplest way to test an npm module while coding?

Sort the array by unique ID and retrieve the object with the first and last index

Transmit the data.json file to a node.js server using Postman

Is it feasible to retrieve information within a behavior in Drupal?

Submitting an AJAX request to upload an XML file and an image file simultaneously in one call

Send location data to the PHP server through AJAX and then fetch it in JavaScript once it has been handled

I'm experiencing trouble with Shopify as it appears to be failing to execute

Mysterious line appearing beneath alternate rows in Table with border-collapse and border-spacing applied. Unable to pinpoint the culprit property causing the issue

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

Is there a way to replicate Twitter's "what's happening" box on our website?

Guide on how to use a tooltip for a switch component in Material-UI with React

The information is not appearing in the dropdown menu

What steps should I follow to obtain the return value after invoking these functions?