[SOLVED] Rotate Camera to face point on sphere

Evening/Morning y’all

thus far
example: https://codepen.io/magicspon/pen/jYJNBq?editors=0010

I’ve setup a click handler that responds to any of the points on the sphere being clicked.
I need to rotate the sphere so that the point clicked is facing the camera

I’m sure there is some beautifully simple way of achieving this… currently a little lost in google and maths, any pointers muchly appreciated.

thanks

You can move your camera instead of rotating the sphere:

  const item = intersects[0]
  
  var point = item.point;
  var camDistance = this.camera.position.length();
  this.camera.position.copy(point).normalize().multiplyScalar(camDistance);
  this.controls.update();

1 Like

Amazing, you absolute legend. Thank you a million times.

You’re welcome ))

I’d say that about many people from three.js community, but never about myself :smiley:

Any thoughts on animating the change…

I was thinking I could use the FLIP approach… i.e make the change, save, invert, and play…

I think I’ve got a lot to learn about three.js… this is my first dive into 3d… waaaa!

// get the current camera position
const { x, y, z } = this.camera.position
const start = new THREE.Vector3(x, y, z)

// move camera to the target
const point = item.point
const camDistance = this.camera.position.length()
this.camera.position
	.copy(point)
	.normalize()
	.multiplyScalar(camDistance)

// save the camera position
const { x: a, y: b, z: c } = this.camera.position

// invert back to original position
this.camera.position
	.copy(start)
	.normalize()
	.multiplyScalar(camDistance)

// animate from start to end
TweenMax.to(this.camera.position, 1, { x: a, y: b, z: c })

I’d use .onUpdate() instead of .onComplete() to control the camera:

// animate from start to end
TweenMax.to(this.camera.position, 1, { x: a, y: b, z: c, onUpdate: () => {
    this.controls.update()
} })
1 Like

He strikes again! You beauty. Thanks