Код Object in Three. js всегда отображается поверх другого - PullRequest
Новая
       19

Код Object in Three. js всегда отображается поверх другого

0 голосов
/ 03 мая 2020

Я новичок в JavaScript и Three. js, и я написал здесь некоторый код для рендеринга сферы (Земли) и другой меньшей сферы (Спутника) на орбите. У меня проблема в том, что когда спутник проходит за Землей, он все еще виден на вершине Земли. 

// Create Renderer
const renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor(0x000000, 1);
document.body.appendChild( renderer.domElement );

// Create Scene
const scene = new THREE.Scene();

// Create Camera
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 100.0 * R_earth );
camera.position.z = 4.0 * R_earth;
camera.position.y = 1.0 * R_earth;
camera.lookAt(0,0,0);
scene.add(camera);

// Earth Mesh
const earth_geom = new THREE.SphereGeometry(R_earth, 32, 32);
const earth_mat = new THREE.MeshPhongMaterial( {color: 0x999999} );
const earth_mesh = new THREE.Mesh(earth_geom, earth_mat);
scene.add(earth_mesh);

// Satellite Mesh
const sat = new Satellite(2.0 * R_earth, 0.0, Math.PI/2.0, 0.0, 0.0, 0.0);
const sat_geom = new THREE.SphereGeometry(0.1 * R_earth, 32, 32);
const sat_mat = new THREE.MeshLambertMaterial( { color: 0xff0000 } );
const sat_mesh = new THREE.Mesh(sat_geom, sat_mat);
scene.add(sat_mesh);

// Ambient Light Source
const ambient_light = new THREE.AmbientLight(0xf1f1f1, 1);
scene.add(ambient_light);

// Spot Light Source
const spot_light = new THREE.DirectionalLight(0xffffff);
spot_light.position.set(100*R_earth,100*R_earth,100*R_earth);
scene.add(spot_light);

// Render loop
var t = 0.0;
function render() {
    t += 100.0;
    requestAnimationFrame(render);
    const sat_pos = sat.position(t);
    sat_mesh.position.x = sat_pos.get([0]);
    sat_mesh.position.y = sat_pos.get([1]);
    sat_mesh.position.z = sat_pos.get([2]);
    renderer.render(scene, camera);
}
render();

Класс Satellite записан в другом файле, но все, что он делает, это предоставить уравнения механики орбиты, чтобы получить вектор положения спутника в момент времени t. Я проверил, что спутниковый объект действительно проходит позади Земли, поэтому я не думаю, что это проблема с фактическим положением объектов в космосе.

Я пытался найти эту проблему, найденные ссылки с понятием порядка рендеринга, с которым я в некотором роде знаком (у меня нет опыта в компьютерной графике), но все посты, которые я нашел, были о том, как навязывать порядок рендеринга определенным образом, то есть делать один объект всегда поверх еще один. Здесь у меня, похоже, возникла противоположная проблема, мне нужно, чтобы спутник был спрятан Землей, но это не так.

1 Ответ

1 голос
/ 03 мая 2020

Я обнаружил, что источником проблемы является значение радиуса Земли. Я определил это в метрах как 

const R_earth = 6.371009e6;

Поскольку многие параметры в коде кратны этому числу, может возникнуть проблема с числовым значением. Я обнаружил, что при использовании меньших значений, например, при использовании километров вместо метров, проблема решается.

Спасибо @ Mugen87 за помощь.

...