Three.js - 缩小时消失 [英] Three.js - Things disappear when zooming out

问题描述

在我的three.js项目中，我为我的相机使用了高z位置。
当z位置太高时，我的场景会变黑。
所以，当我缩小它变成黑色。但我不希望发生这种情况。

这是 camera.position.z = 3000;

当我缩小时，只有一个缩放，就像这样：

对于我使用OrbitControls的控件，我的相机就像：

  var camera = new THREE.PerspectiveCamera（45，window.innerWidth / window.innerHeight，1，3000）; 
 camera.position.z = 3000; 
  

这里是地球和一些行星轨道的代码：

  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）; 
 $ b $ var 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）; 
  

由于某些原因，它无法提供小提琴。
如果您需要更多的代码，请在评论中告诉我，我将添加它。

任何想法？
thanks。

解决方案

你的相机的飞机距离是3000，这意味着3000单位的距离将被剪切，未画出。

与此同时，您将相机放在（0,0,3000）处，这样您就可以立即开始消失。

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:

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.

解决方案

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.

这篇关于Three.js - 缩小时消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！