javascript - Three js objects intersects at same place - how to tell which one to show -
lets have 2 or more object intersects @ same place, how can 1 set 1 show? otherwise flickering time.
http://jsfiddle.net/gyq5v/187/
var scale = 1; var scene = new three.scene(); var camera = new three.perspectivecamera(45, window.innerwidth / window.innerheight, 100, 1000000); camera.position.x = 0; camera.position.y = 0; camera.position.z = 100 * scale; var renderer = new three.webglrenderer({ antialias: false }); renderer.setsize(window.innerwidth, window.innerheight); document.body.appendchild(renderer.domelement); var light = new three.ambientlight(0xffffff); scene.add(light); var material = new three.meshbasicmaterial({ transparent: false, side: three.doubleside, fog: false, color: 0xffff00, opacity: 1.0 }); var cubegeometry = new three.planegeometry(50 * scale, 50 * scale, 1, 1); var cubemesh = new three.mesh(cubegeometry, material); cubemesh.position.set(50, 0, 0); scene.add(cubemesh); var cubegeometry = new three.planegeometry(50 * scale, 50 * scale, 1, 1); var cubemesh = new three.mesh(cubegeometry, material); cubemesh.position.set(-50, 0, 0); scene.add(cubemesh); var cubegeometry = new three.planegeometry(50 * scale, 50 * scale, 1, 1); var cubemesh = new three.mesh(cubegeometry, material); cubemesh.position.set(0, -50, 0); scene.add(cubemesh); var cubegeometry = new three.planegeometry(50 * scale, 50 * scale, 1, 1); var cubemesh = new three.mesh(cubegeometry, material); cubemesh.position.set(0, 50, 0); scene.add(cubemesh); var material = new three.meshbasicmaterial({ transparent: false, side: three.doubleside, fog: false, color: 0xff0000, opacity: 1.0 }); var cubegeometry = new three.planegeometry(100 * scale, 100 * scale, 1, 1); var cubemesh = new three.mesh(cubegeometry, material); scene.add(cubemesh); function render() { var time = date.now() * 0.5; camera.position.x = math.sin(time / 1000) * 150 * scale; camera.position.y = 0; camera.position.z = math.cos(time / 1000) * 150 * scale; camera.lookat(scene.position); renderer.render(scene, camera); requestanimationframe(render); } render(); tried add renderer.sortobjects = false; - nothing changed
the effect seeing called z-fighting: take @ https://en.wikipedia.org/wiki/z-fighting.
better z-buffer precision can achieved changing camera near , far plane values 0.1 , 1000 respectively. 1000000 toooooo big.
similar questions: how correctly render coincident polygons in opengl (es) , three.js - overlapping layers flickering.
Comments
Post a Comment