Tr.js pov camera looks around error

Question

I created a base scene using three.js. My goal is to create a pov-camera based on FirstPersonControls.js

I modified my code to fit my needs (mouse click movement, etc.). I am almost done, but the error remains: when I first move the camera, it does not begin to move from the position of the object. I look at the scene.

This happens when I set the camera position. Otherwise, it works almost , as you can see from this link: http://jsfiddle.net/42qeojs0/

Just uncomment these 3 lines (after line 60)

camera.position.x = 10; camera.position.y = 10; camera.position.z = 250; 

Then try moving the view around the object by dragging it with the mouse. You will see that the starting position of your drag is not the same as the position in which you first look.

Thanks in advance

Answer 1

To fix the initial jump, you get when you click on the mouse. Introduce a new dist variable for the distance to the object you are looking at, and use atan2 as a more reliable way to get longitude.

 dist = Math.hypot(blue1.position.x,blue1.position.y,blue1.position.z); phi = Math.acos(blue1.position.y/dist); theta = Math.atan2(blue1.position.z,blue1.position.x); lon = THREE.Math.radToDeg(theta); lat = 90-THREE.Math.radToDeg(phi); 

In onDocumentMouseMove use

 camera.target.x = dist * Math.sin( phi ) * Math.cos( theta ); camera.target.y = dist * Math.cos( phi ); camera.target.z = dist * Math.sin( phi ) * Math.sin( theta ); 

Thus, if you take the starting position, calculate lat, long and dist, and then calculate the search for the vector, you get what you started from. Using a fixed multiple of 500 actually led to a sudden shift to a position farther than you started. (Note: Math.Hypot is not supported in IE, so you may need to calculate this yourself if you want to configure IE).