Three.js - Things disappear when scaling

Question

In my three.js project, I am using high z position for my camera. When the z position is too high, my scene goes black. So when I zoom out, it turns black. But I do not want this to happen.

So it is with camera.position.z = 3000;

And when I zoom out, just one zoom, it’s something like this:

For controls, I use OrbitControls. My camera is similar:

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

And here is the code for the planet and the orbits of some planets:

 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); 

The violin could not be created because for some reason it did not work. If you need more code, tell me in the comments and I will add it.

Any ideas? thanks.

Answer 1

The plane plane of your camera is 3000, which means that everything that is 3000 units will be cropped and not drawn.

At the same time, you set your camera to (0,0,3000), so you are right at the place where things will start to disappear.