Three.js - Things disappear when zooming out

Question

In my three.js project I use a high z position for my camera. When the z position is too high my scene becomes black. So, when I zoom out it becomes black. But I don't want that to happen.

This is how it is with camera.position.z = 3000;

And when I zoom out, just one zoom, it is like this: enter image description here

For the controls I use OrbitControls, My camera is like:

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 3000);
camera.position.z = 3000;

And here the code for the planet and some planets' orbits:

var scene = new THREE.Scene();

var material = new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture("assets/img/sun.jpg")
});

var sun = new THREE.Mesh(new THREE.SphereGeometry(200, 50, 50), material);
scene.add(sun);

var orbitLine = function(radius,y)
{
    var segments = 64,
        line_material = new THREE.LineBasicMaterial( { color: 0xffffff } ),
        geometry = new THREE.CircleGeometry( radius, segments );

    geometry.vertices.shift();

    var orbit = new THREE.Line( geometry, line_material );
    if(y)
        orbit.position.y=y;
    else if(!y)
        orbit.position.y=0;

    scene.add(orbit);
};
var Mercury_orbit = orbitLine(400,-70);
var Venus_orbit = orbitLine(700,70);
var Earth_orbit = orbitLine(900,70);
var Mars_orbit = orbitLine(1250,70);
var Jupiter_orbit = orbitLine(3000,70);

Couldn't provide a fiddle as for some reason it didn't work. If you need more code tell me in the comments and I will add it.

Any ideas? thanks.

score 6 · Accepted Answer · answered Mar 21 '15 at 19:31

6

Your camera's far plane is at 3000 which means everything that is 3000 units away will be clipped and not drawn.

At the same time you have placed your camera at (0,0,3000) so you are right on the position where things will start to disappear.

answered Mar 21 '15 at 19:31

gaitat

12,449
4
52
76

1

be careful though because setting the far plane value that high reduces the resolution of the depth buffer. It is much better to change the units of your world. In your example, divide everything by 10. Then you can set the far plane to 1000. – gaitat Mar 21 '15 at 19:49

Three.js - Things disappear when zooming out

1 Answers1

Linked