# [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

``````  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

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