In my three.js project I use a high z position for my camera. When the z position is too high my scene bees black. So, when I zoom out it bees 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:

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 ments and I will add it.

Any ideas? thanks.

In my three.js project I use a high z position for my camera. When the z position is too high my scene bees black. So, when I zoom out it bees 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:

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 ments and I will add it.

Any ideas? thanks.

• javascript
• html
• three.js

1 Answer 1

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.