Mesh disparaît soudainement en trois. Js. Coupure?

Scénario:
Dans ma scène, j'ai implémenté un shadis de sommet qui positionne un maillage d'avion sur l'axe xz à la position de la caméra. Donc, si la caméra se déplace, le maillage de l'avion se déplace avec elle. Cela conduit à l'effet visuel que, tout en déplaçant la caméra, le maillage de l'avion semble rester fixe en place. Cela semble fonctionner correctement.

Problème:
Si je déplace la caméra (et donc la maille de l'avion) ​​dans une certaine mesure, le maillage disparaît brusquement.
Je me suis rendu compte qu'il semble y avoir une relation entre la disparition et la taille de l'avion, c'est-à-dire plus l'avion est grand, plus je peux déplacer la caméra avant que le maillage de l'avion ne disparaisse.

En outre, dans ma scène de test, le maillage d'avion ne disparait que lorsqu'il se déplace sur l'axe négatif des x, l'axe des abscisses positif ou l'axe z négatif. Il ne disparaît PAS lorsque vous déplacez sur l'axe z positif.

Je suppose qu'il a quelque chose à voir avec une sorte d'écrêtage, mais peut-être fausse. La recomposition de la boîte délimitée du maillage plan n'a eu aucun effet.

• La liste ng-repeat dans AngularJS n'est pas mise à jour lorsqu'un appel ajax change sa valeur
• Comment identifier si la fenêtre ouverte est un pop-up ou un onglet?
• Comment puis-je cacher un contenu de page jusqu'à ce que toutes les images soient complètement chargées?
• Mode raccourci pour construire l'objet JS avec le nom de la propriété variable
• Javascript dynamiquement getter / setter pour les propriétés privées

Des idées?

À votre santé

Violon:
J'ai créé un violon qui montre le problème: http://jsfiddle.net/p8wZ6/10/

Dans le violon, j'ai ajouté un maillage de boîte supplémentaire pour mieux visualiser que la caméra se déplace réellement.
– Pour changer l'axe, la caméra se déplace (axe z négatif par défaut) (non) commenter la ligne de code appropriée dans la méthode de coche.
– Pour modifier la taille de l'avion, modifiez la valeur de la taille dans la méthode createPlane.

Sourcecode Shader:

<script id="vertexShader" type="x-shader/x-vertex"> void main() { vec4 pos = vec4( position, 1.0 ); vec4 wPos = modelMatrix * pos; wPos.x += cameraPosition.x; wPos.z += cameraPosition.z; // standard // vec4 pPos = projectionMatrix * modelViewMatrix * pos; // keep fixed vec4 pPos = projectionMatrix * viewMatrix * wPos; gl_Position = pPos; } </script> <script id="fragmentShader" type="x-shader/x-fragment"> void main() { gl_FragColor.rgb = vec3(0.7, 0.7, 0.7); gl_FragColor.a = 1.0; } </script> 

Sourcecode JS:

 var scene; var camera; var light; var renderer; var controls; var onTick; var planeMesh; var boxMesh; var heightmap; var clock; function createPlane(){ // disappearance seems related to size of geometry. // the larger the longer it takes until disappearance. var size = 20; var geom = new THREE.PlaneGeometry(size, size, 20, 20); return geom; } function createBox(){ var geom = new THREE.CubeGeometry(2, 2, 4); return geom; } function createMesh(){ // plane var geom = createPlane(); var shaderMaterial = new THREE.ShaderMaterial({ vertexShader: document.getElementById( 'vertexShader' ).textContent, fragmentShader: document.getElementById( 'fragmentShader' ).textContent, side: THREE.DoubleSide, wireframe: true }); planeMesh = new THREE.Mesh(geom, shaderMaterial); var axis = new THREE.AxisHelper(4); planeMesh.rotation.x = -90 * (Math.PI / 180); planeMesh.add(axis); scene.add(planeMesh); // box geom = createBox(); var material = new THREE.MeshBasicMaterial( { color: 0xff00ff, }); boxMesh = new THREE.Mesh(geom, material); boxMesh.position.x = 5; boxMesh.position.z = -15; axis = new THREE.AxisHelper(4); boxMesh.add(axis); scene.add(boxMesh); } function startRendering(){ onTick(); }; function onTick(){ // move camera // causes disappearance // neg. z camera.position.z -= .1; // pos. x // camera.position.x += .1; // neg. x // camera.position.x -= .1; // causes no disappearance // pos. z // camera.position.z += .1; requestAnimationFrame(onTick); //controls.update(clock.getDelta()); renderer.render(scene, camera); } function init(){ renderer = new THREE.WebGLRenderer(); renderer.setClearColor( 0xffffff, 1 ); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); scene = new THREE.Scene(); scene.add(new THREE.AxisHelper(4)); camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 1, 0); light = new THREE.DirectionalLight(0xffffff, 1); light.shadowCameraVisible = true; light.position.set(0, 0, 100); scene.add(light); //clock = new THREE.Clock(); //controls = new THREE.FirstPersonControls(camera); //controls.movementSpeed = 20; //controls.lookSpeed = .1; } init(); createMesh(); startRendering(); 

• Quel est le bon moyen d'ajouter des auditeurs à de nouveaux éléments après avoir utilisé AJAX pour obtenir le contenu html? (JQuery, Javascript)
• Formulaire de soumission pour exécuter javascript, puis poster dans le script php
• Commonalité d'expression régulière avec / g modificateur et eval – comportement étrange dans FireFox et Chrome
• Comment chargez-vous dynamiquement un fichier javascript de différents domaines?
• TinyMCE – Navigateur Chrome – Impossible de coller des images dans Chrome comme dans FF

  planeMesh.frustumCulled = false; 

 planeMesh.position.set( 0, -1, 0 ); camera.add( planeMesh ); scene.add( camera ); 

 var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );