ThreeJs плоскость над Box

Question

У меня есть проблема, когда я положил самолет над коробкой , когда я двигаюсь все или камеры, самолет исчезает в определенном положении

Я чувствую, что это связанно с полигоном коробки, но я не знаю

Вы можете увидеть Exemple здесь: http://jsfiddle.net/fv9sqsoj/9/

var camera, scene, renderer,controls,Allobjects; 
init(); 
animate(); 

function init() { 
    renderer = new THREE.CanvasRenderer(); 
    renderer.setClearColor(0x000000, 1.0); 
    renderer.setSize(770, 478); 
    document.getElementById('fd__3d').appendChild(renderer.domElement); 
    // on initialise la scène 
    scene = new THREE.Scene(); 
    // on initialise la camera que l’on place ensuite sur la scène 
    camera = new THREE.PerspectiveCamera(50, 770/478, 1, 1000); 
    camera.position.set(0, 300, 600); 
    scene.add(camera); 
    camera.rotation.x = -0.4; 
    // on ajoute une lumière blanche 
    var lumiere = new THREE.DirectionalLight(0xffffff, 1.0); 
    lumiere.position.set(0, 200, 500); 
    scene.add(lumiere); 
    // objets conteneurs 
    var objects = new THREE.Object3D(); 
    Allobjects = new THREE.Object3D(); 
    Allobjects.add(objects); 
    scene.add(Allobjects); 
    // box 
    var geometry = new THREE.CubeGeometry(100, 20, 100); 
    var color = 0xffffff; 
    var material = new THREE.MeshLambertMaterial({ 
     color: color, 
     shading: THREE.SmoothShading, 
     vertexColors: THREE.VertexColors, 
     overdraw: true 
    }); 
    var mesh = new THREE.Mesh(geometry, material); 
    mesh.renderDepth = 0; 
    // ajout de la box 
    var objectsM = new THREE.Object3D(); 
    objectsM.add(mesh); 
    objects.add(objectsM); 
    // plane 
    var materialP = new THREE.MeshLambertMaterial({ 
     color: 0xFF0000, 
     overdraw: true, 
     side: THREE.DoubleSide 
    }); 
    var imgplane = new THREE.Mesh(new THREE.PlaneGeometry(50, 50),materialP); 
    imgplane.renderDepth = 1; 
    // ajout et position plane 
    objects.add(imgplane); 
    var angleRadian = Math.PI * Math.round(90)/180; 
    imgplane.rotation.x = angleRadian; 
    imgplane.position.y = 11; 
    imgplane.position.x = 10; 
    imgplane.position.z = 10; 
} 

function animate() { 
    Allobjects.rotation.y += 0.01 
    requestAnimationFrame(animate); 
    renderer.render(scene, camera); 
} 

Thanx за вашу помощь!

Answer 1

Для полного ответа WestLangley

Это ПРОБЛЕМА CanvasRenderer

Это не так плохо, когда вы увеличиваете тесселяции как в посте, который разместил WestLangley: Disappearing Objects - Three.js CanvasRenderer

var geometry = new THREE.PlaneGeometry(width, height, 10, 10); 

, но это не решит проблему.

Лучший способ использовать WebGLRenderer Причины все браузеры не поддерживают его, есть детектор WebGL для использования его, то это возможно: https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js

renderer = Detector.webgl? new THREE.WebGLRenderer(): new THREE.CanvasRenderer();