Determine the camera's new location following a rotation around a specific point on the mesh

Question

Determine the camera's new location following a rotation around a specific point on the mesh

I'm currently working on implementing the following scenario:

When the user clicks on a mesh, focus the perspective camera on that point
Allow the user to rotate the camera using orbitControls
After rotation, adjust the camera position and target so it appears that the camera is still looking at the mesh from the same angle as before

This should give the illusion that the user has rotated the camera around a specific point on the mesh.

While steps 1 and 2 are clear, I'm facing confusion with step 3.

I have included some images to help illustrate the process:

1) User clicks on a point on the mesh

2) Camera focuses on the clicked point

3) User rotates the camera around the selected pivot point

4) On mouse up, the camera should be repositioned so the selected point appears unchanged and the camera angle remains consistent

The question is how to achieve the behavior shown in the 4th image.

The key is to make it seem like the camera is maintaining the same perspective while the mesh appears to be rotated around the clicked point.

Any assistance would be greatly appreciated. Thank you!

javascript three.js 3d camera rotation

Answer 1

Answer №1

I trust that I have understood your query correctly. Calculate the variance between the starting target and the target point on an object, and upon releasing the mouse click - adjust your camera position by this calculated value.

var w = window.innerWidth,
  h = window.innerHeight;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, w / h, 1, 1000);
camera.position.setScalar(5);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(w, h);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.GridHelper(10, 10));

var prismGeom = new THREE.ConeBufferGeometry(1, 2, 3);
prismGeom.translate(0, 1, 0);
var prismMat = new THREE.MeshBasicMaterial({
  color: "red",
  wireframe: true
});
var prism = new THREE.Mesh(prismGeom, prismMat);
prism.position.set(-1, 0, -2);
scene.add(prism);

var centralMarker = new THREE.Mesh(new THREE.SphereBufferGeometry(0.125, 4, 2), new THREE.MeshBasicMaterial({
  color: "aqua"
}));
scene.add(centralMarker);

var pointMarker = new THREE.Mesh(centralMarker.geometry, new THREE.MeshBasicMaterial({
  color: "magenta"
}));
pointMarker.visible = false;
scene.add(pointMarker);


var oldTarget = scene.position;
var targeted = false;
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var intersects = [];

window.addEventListener("mousedown", onMouseDown, false);
window.addEventListener("mouseup", onMouseUp, false);

function onMouseDown(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  intersects = raycaster.intersectObject(prism);
  if (intersects.length > 0) {
    targeted = true;
    controls.target.copy(intersects[0].point);
    pointMarker.position.copy(intersects[0].point);
    pointMarker.visible = true;
    controls.update();
  }
}

function onMouseUp(event) {
  if (!targeted) return;
  let shift = new THREE.Vector3().copy(oldTarget).sub(controls.target);
  camera.position.add(shift);
  controls.target.copy(oldTarget);
  controls.update();
  targeted = false;
  pointMarker.visible = false;
}

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera)
})

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Answer 2

I trust that I have understood your query correctly. Calculate the variance between the starting target and the target point on an object, and upon releasing the mouse click - adjust your camera position by this calculated value.

var w = window.innerWidth,
  h = window.innerHeight;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, w / h, 1, 1000);
camera.position.setScalar(5);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(w, h);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.GridHelper(10, 10));

var prismGeom = new THREE.ConeBufferGeometry(1, 2, 3);
prismGeom.translate(0, 1, 0);
var prismMat = new THREE.MeshBasicMaterial({
  color: "red",
  wireframe: true
});
var prism = new THREE.Mesh(prismGeom, prismMat);
prism.position.set(-1, 0, -2);
scene.add(prism);

var centralMarker = new THREE.Mesh(new THREE.SphereBufferGeometry(0.125, 4, 2), new THREE.MeshBasicMaterial({
  color: "aqua"
}));
scene.add(centralMarker);

var pointMarker = new THREE.Mesh(centralMarker.geometry, new THREE.MeshBasicMaterial({
  color: "magenta"
}));
pointMarker.visible = false;
scene.add(pointMarker);


var oldTarget = scene.position;
var targeted = false;
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var intersects = [];

window.addEventListener("mousedown", onMouseDown, false);
window.addEventListener("mouseup", onMouseUp, false);

function onMouseDown(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  intersects = raycaster.intersectObject(prism);
  if (intersects.length > 0) {
    targeted = true;
    controls.target.copy(intersects[0].point);
    pointMarker.position.copy(intersects[0].point);
    pointMarker.visible = true;
    controls.update();
  }
}

function onMouseUp(event) {
  if (!targeted) return;
  let shift = new THREE.Vector3().copy(oldTarget).sub(controls.target);
  camera.position.add(shift);
  controls.target.copy(oldTarget);
  controls.update();
  targeted = false;
  pointMarker.visible = false;
}

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera)
})

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Answer 3

Answer №2

const width = window.innerWidth,
  height = window.innerHeight;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
camera.position.setScalar(5);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

const controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.GridHelper(10, 10));

const prismGeometry = new THREE.ConeBufferGeometry(1, 2, 3);
prismGeometry.translate(0, 1, 0);
const prismMaterial = new THREE.MeshBasicMaterial({
  color: "red",
  wireframe: true
});
const prismObj = new THREE.Mesh(prismGeometry, prismMaterial);
prismObj.position.set(-1, 0, -2);
scene.add(prismObj);

const centralMarker = new THREE.Mesh(new THREE.SphereBufferGeometry(0.125, 4, 2), new THREE.MeshBasicMaterial({
  color: "aqua"
}));
scene.add(centralMarker);

const pointMarker = new THREE.Mesh(centralMarker.geometry, new THREE.MeshBasicMaterial({
  color: "magenta"
}));
pointMarker.visible = false;
scene.add(pointMarker);

const initialTarget = scene.position;
let isTargeted = false;
const raycaster = new THREE.Raycaster();
const mousePosition = new THREE.Vector2();
let clickedIntersects = [];

window.addEventListener("mousedown", onMouseDown, false);
window.addEventListener("mouseup", onMouseUp, false);

function onMouseDown(event) {
  mousePosition.x = (event.clientX / window.innerWidth) * 2 - 1;
  mousePosition.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mousePosition, camera);
  clickedIntersects = raycaster.intersectObject(prismObj);
  if (clickedIntersects.length > 0) {
    isTargeted = true;
    controls.target.copy(clickedIntersects[0].point);
    pointMarker.position.copy(clickedIntersects[0].point);
    pointMarker.visible = true;
    controls.update();
  }
}

function onMouseUp(event) {
  if (!isTargeted) return;
  const shift = new THREE.Vector3().copy(initialTarget).sub(controls.target);
  camera.position.add(shift);
  controls.target.copy(initialTarget);
  controls.update();
  isTargeted = false;
  pointMarker.visible = false;
}

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera)
})

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Answer 4

const width = window.innerWidth,
  height = window.innerHeight;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
camera.position.setScalar(5);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

const controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.GridHelper(10, 10));

const prismGeometry = new THREE.ConeBufferGeometry(1, 2, 3);
prismGeometry.translate(0, 1, 0);
const prismMaterial = new THREE.MeshBasicMaterial({
  color: "red",
  wireframe: true
});
const prismObj = new THREE.Mesh(prismGeometry, prismMaterial);
prismObj.position.set(-1, 0, -2);
scene.add(prismObj);

const centralMarker = new THREE.Mesh(new THREE.SphereBufferGeometry(0.125, 4, 2), new THREE.MeshBasicMaterial({
  color: "aqua"
}));
scene.add(centralMarker);

const pointMarker = new THREE.Mesh(centralMarker.geometry, new THREE.MeshBasicMaterial({
  color: "magenta"
}));
pointMarker.visible = false;
scene.add(pointMarker);

const initialTarget = scene.position;
let isTargeted = false;
const raycaster = new THREE.Raycaster();
const mousePosition = new THREE.Vector2();
let clickedIntersects = [];

window.addEventListener("mousedown", onMouseDown, false);
window.addEventListener("mouseup", onMouseUp, false);

function onMouseDown(event) {
  mousePosition.x = (event.clientX / window.innerWidth) * 2 - 1;
  mousePosition.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mousePosition, camera);
  clickedIntersects = raycaster.intersectObject(prismObj);
  if (clickedIntersects.length > 0) {
    isTargeted = true;
    controls.target.copy(clickedIntersects[0].point);
    pointMarker.position.copy(clickedIntersects[0].point);
    pointMarker.visible = true;
    controls.update();
  }
}

function onMouseUp(event) {
  if (!isTargeted) return;
  const shift = new THREE.Vector3().copy(initialTarget).sub(controls.target);
  camera.position.add(shift);
  controls.target.copy(initialTarget);
  controls.update();
  isTargeted = false;
  pointMarker.visible = false;
}

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera)
})

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Determine the camera's new location following a rotation around a specific point on the mesh

Answer №1

Answer №2

Similar questions

What is the best way to send the totalAmount data from one child component to its parent, and then pass it on to another

Is it necessary to implement the useCallback hook along with React.memo for rendering optimization in React components?

Dispose the inputpicker filter after setting the value

"Troubleshooting callback errors and viewing statistics in multi-configuration setups

Tips for showcasing a dataset within a table using Angular.js ng-repeat

Encountering an issue with core.js:15723 showing ERROR TypeError: Unable to access property 'toLowerCase' of an undefined value while using Angular 7

Performing an AJAX POST request in Laravel

Tips for adjusting a pre-filled form?

Unknown and void

Sinon experiences delays during an AJAX call

How to use $$[n] in Spectron/WebdriverIO to target the nth child element instead of the selector

What is the best method for gracefully opening external links in a reusable new tab?

Attempting to update the state by utilizing the values provided by useContext

Ways to conceal various components while showcasing just a single element from every individual container

Executing JavaScript code within a Django application to load a file

Troubleshooting multiple file upload errors in Asp.net Mvc using ajax

Could someone assist me in understanding why VScode is displaying an error stating it cannot locate a module?

There is an issue with the sorting function: [orderBy:notarray]. The expected input was an array

What steps should I take to insert a divider in a dropdown menu?

Tips on how to eliminate a dimension in a cube