CODEWITHSUNDEEP
javascripthtmlthree.js
user2579865
user2579865

Reputation:

Three.js - Things disappear when zooming out

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; http://qs.lc/uui7g

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.

Upvotes: 10

Views: 4922

Answers (1)

gaitat
gaitat

Reputation: 12632

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.

Upvotes: 7

Related Questions