When using this Three.js application (), the issue arises where the black wireframe competes with the yellow solid, causing pixel flickering on the screen. Is there a way to prevent this from happening? It's worth noting that the flickering effect is more prominent when zooming out.
To visualize the problem better, take a look at this animated GIF:
The obvious solution might be to increase the thickness of the wireframe model, but is there a way to address this issue while keeping the wireframe thin?
Thank you, Humberto.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Icosahedron</title>
<!-- JavaScript Libraries -->
<script src="threejs.r84/build/three.js"></script>
<script src="threejs.r84/examples/js/controls/FlyControls.js"></script>
<!-- CSS -->
<style type="text/css">
body {text-align: center;}
</style>
<!-- ThreeJS Code -->
<script type="text/javascript">
// check capabilities, and start if sufficient
var haswebgl = (function() {try {return !! window.WebGLRenderingContext &&
!! document.createElement('canvas').getContext('experimental-webgl');}
catch(e){return false;}})();
var hascanvas = !! window.CanvasRenderingContext2D;
var context0 = null;
var clock = new THREE.Clock();
if (hascanvas)
{
document.addEventListener( "DOMContentLoaded", init, false);
}
function init()
{
document.getElementById("msgwebglcontext0").innerHTML = "";
/* spawns the objects, scenes, cameras, renderers etc. */
context0 = {color: 0xccff33, name: "0"};
// set the scene
if (haswebgl)
{
context0.renderer = new THREE.WebGLRenderer({alpha: true, antialias: true });
}
else
{
context0.renderer = new THREE.CanvasRenderer({alpha: true, antialias: true });
}
context0.renderer.setSize(600, 400);
context0.viewport = document.getElementById("webglcontext0");
context0.viewport.appendChild(context0.renderer.domElement);
context0.scene = new THREE.Scene();
context0.camera = new THREE.PerspectiveCamera(20, 600/400.0, 0.1, 10000);
context0.camera.position.z = 4000;
context0.scene.add(context0.camera);
context0.controls = new THREE.FlyControls( context0.camera );
context0.controls.movementSpeed = 1000;
context0.controls.domElement = context0.viewport;
context0.controls.rollSpeed = Math.PI / 24;
context0.controls.autoForward = false;
context0.controls.dragToLook = false;
// Create icosahedron
context0.scene.add(new THREE.Mesh(new THREE.IcosahedronGeometry(503),
new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true})));
context0.scene.add(new THREE.Mesh(new THREE.IcosahedronGeometry(500),
new THREE.MeshBasicMaterial({color: context0.color, opacity: 0.9, transparent: true, side: THREE.DoubleSide})));
render();
animate();
}
function animate()
{
requestAnimationFrame(animate);
render();
}
function render()
{
var delta = clock.getDelta();
context0.controls.update(delta);
context0.renderer.render(context0.scene, context0.camera);
}
</script>
</head>
<body>
<div id="info">
<b>WASD</b> mover, <b>R|F</b> up | down, <b>Q|E</b> roll, <b>up|down</b> pitch, <b>left|right</b> yaw<br/>
</div>
<div style="text-align:center; display: table; margin: 0 auto;">
<span id="webglcontext0" style="width:410px; height:50px; display: table-cell; text-align:center; vertical-align: middle; border-style: solid; border-width: 1px;"></span>
</div>
<div id="msgwebglcontext0" style="text-align:center; display: table; margin: 0 auto;">
<span style="width:700px; height:50px; display: table-cell; text-align:center; vertical-align: middle; border-style: solid; border-width: 1px;">
Your browser does not seem to support WebGL or this option is not enabled.
<br>
If you have any questions, please contact us via email:
<a href="mailto:conteudosdigitais@im.uff.br">conteudosdigitais@im.uff.br</a>.
</span>
</div>
</body>
</html>