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
- 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.
camera.lookAt( object.position );so the camera actually looks at the object’s position.
This approach should also work for
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 http://mdma.gr/three/
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
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: https://jsfiddle.net/f2Lommf5/13420/
So we are not using
lookAt() but just copy the quaternion.
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.
Not necessary. Your “Thank you” is enough