Camera In front of an object

Questions
1

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 ?

2

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.

https://jsfiddle.net/f2Lommf5/13374/

This approach should also work for CSS3DRenderer.

3

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)

5

These is a working example here http://mdma.gr/three/

It has several CSS3Objects randomly scattered and rotated.

Just click on document to go to next project

6

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:

7

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

8

Can you please try it like this: https://jsfiddle.net/f2Lommf5/13420/

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

1 Like
9

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,
Manolis

1 Like
10

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

2 Likes