Currently dealing with an issue involving two planes positioned very closely together.
One of the planes is causing glitches or disappearing from certain angles.
Check out the following code snippet:
var renderer, scene, camera, controls, mesh;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 16, window.innerWidth / window.innerHeight, 1, 50000 );
camera.position.set(8000, 4000, 13000);
controls = new THREE.OrbitControls( camera );
controls.target = new THREE.Vector3(0,0,0);
controls.minPolarAngle = 0
controls.maxPolarAngle = (Math.PI / 2) - 0.05;
mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 7000, 7000 ), new THREE.MeshBasicMaterial);
mesh.position.y = 0;
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
scene.add( mesh );
mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshBasicMaterial({color:0x00ff00}));
mesh.position.y = 5;
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
scene.add( mesh );
}
function animate() {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
}
For the live example, follow this link:
http://jsfiddle.net/mae1storm/2hLjn1t5/1/Seeking guidance on resolving this issue. Any suggestions?
Your understanding is appreciated despite any language barriers. Thank you.