Блог

Я составляю 2D-плоскости с текстурами. У меня есть 3 уровня.

 A background plane at z=0, 
black shapes for conections at z=0.1 and 
small planes with textures at z=0.2
  

проблема в том, что при перемещении плоскостей камеры, кажется, меняется положение z.

Плоскости отображаются в неправильном Z, это зависит от положения камеры. При перемещении камеры она снова меняется и выглядит очень некрасиво.

Возможно, мне нужно активировать какое-либо свойство ZBuffer для правильного рисования

Инициализация WebGL выглядит так, и плоскости точно такие же (меняется только координата Z)

 renderer = new THREE.WebGLRenderer();    
renderer.setSize(window.innerWidth, window.innerHeight);
renderer._microCache = new MicroCache(); //cache de imagenes
renderer.setClearColor(0xeeeeee, 1);
document.body.appendChild(renderer.domElement);

// add directional light source
var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1300).normalize();
scene.add(directionalLight);

//background plane
plane = new THREE.Mesh(new THREE.PlaneGeometry(200000, 200000, 1, 1), new THREE.MeshLambertMaterial({ color: 0xffffff, opacity: planeOpacity, transparent: true }););          
plane.position.z = 0;
scene.add(plane);
  

Другие плоскости точно такие же, но с большей Z-позицией

Помогите, пожалуйста! Спасибо! Palomo

То, что вы видите, вероятно, z-борьба. Внутренне глубина представлена целым числом в графическом процессоре, поэтому существует только фиксированное количество различных z-s между ближней и дальней плоскостями камеры. Решение состоит в том, чтобы либо раздвинуть ваши плоскости, либо сузить ближний дальний диапазон камеры.