I am currently working on a project to create a model of the Solar System. Here is the metric I am using:
scale = 0.001;
// 1 unit - 1 kilometer
var AU = 149597871 * scale;
To set up the camera, renderer, and controls, I have defined them as follows:
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1 * scale, 0.1 * AU);
renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
controls = new THREE.OrbitControls(camera, renderer.domElement);
When the user selects a planet or moon to view, I adjust the camera position accordingly with this function:
function cameraGoTo() {
for (var i = scene.children.length - 1; i >= 0 ; i--) {
var obj = scene.children[i];
if (obj.name == parameters.selected) {
controls.target = obj.position;
camera.position.copy(obj.position);
camera.position.y += obj.radius * 2;
}
}
}
The Issue arises when viewing small planets or moons (radius <= 1000 km) as the camera shakes while rotating around the object. I have limited knowledge in computer graphics and I'm unsure if this problem originates from the Orbit Controls or the renderer itself. I attempted to resolve it by setting logarithmicDepthBuffer = true but had no success. Adjusting the scale parameter also did not make any difference.
Thank you in advance for any guidance or assistance provided.
EDIT:
A fiddle demonstration can be found here: http://jsfiddle.net/twxyz/8kxcdkjj/
It is evident that the shaking increases under the following conditions:
- the smaller the object,
- the further away the object is from the center of the scene,
What could be causing this issue? It appears unrelated to the near/far spectrum values of the camera and more related to the distance of objects from the scene's center.