Camera In front of an object

I have an object (css3d) in xyz position with xyz rotation and all I want is to place the camera in front of the object. Any ideas ?

You can do the following:

  • Get the world direction of your object via Object3D.getWorldDirection().
  • Copy the position of the object to the camera and then add the direction vector multiplied by a factor. This factor determines how close the camera is in front of the object.
  • Call camera.lookAt( object.position ); so the camera actually looks at the object’s position.

This approach should also work for CSS3DRenderer.

Thank you very much indeed, but it doesn’t take into consideration the object’s X rotation, so the image appears upside down sometimes (I have a random X rotation)

These is a working example here

It has several CSS3Objects randomly scattered and rotated.

Just click on document to go to next project

I see, the approach does not seem to work. Can you please include the unminified version of three.js into your app? That makes it easier to debug :innocent:

Done. Thank you very much for your help, I really appreciate it.

Also I want to tween move the camera, so I need to find the final position’s xyz values

Can you please try it like this:

So we are not using lookAt() but just copy the quaternion.

1 Like

Man I really dont know how to thank you. You are awesome! Please give me a name and a url if you have so that I can include you in the credits.

Thanks again,

1 Like

Not necessary. Your “Thank you” is enough :grin: