Three.js：两种颜色竞争相同的屏幕像素

在这个Three.js应用程序（http://www.professores.uff.br/hjbortol/disciplinas/2017.1/hwc00001/test/threejs/viewer-04/viewer-04-e.html）中，黑色线框与黄色实体竞争，因此屏幕像素闪烁。有没有办法避免这种情况？注意：缩小时闪烁效果更强。Three.js：两种颜色竞争相同的屏幕像素

下面是一个GIF动画显示的问题：http://www.im-uff.mat.br/tmp/pixel-flicker.gif

嘛，当然，我可以使线框模型较厚，但有一个薄线框的解决方案？

谢谢，Humberto。

下面是代码：

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title>Icosaedro</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; // Converts value to boolean 

      var context0 = null; 

      var clock = new THREE.Clock(); 


      if (hascanvas) 
      { 
       document.addEventListener("DOMContentLoaded", init, false); 
      } // End of if() 

      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); 

       // Add the renderer to the document. 
       // This should be called before THREE.TrackballControls(). 
       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(497), 
            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}))); 

       // Run 
       render(); 
       animate(); 
      } // End of init() 

      function animate() 
      { 
       /* one animation tick */ 
       requestAnimationFrame(animate); 
       render(); 
      } // End of animate() 

      function render() 
      { 
       /* renders our little scene */ 
       var delta = clock.getDelta(); 
       context0.controls.update(delta); 
       context0.renderer.render(context0.scene, context0.camera); 
      } // End of render() 

     </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;"> 
    Seu navegador parece nÃ£o suportar WebGL ou esta opÃ§Ã£o nÃ£o estÃ¡ habilitada. 
    <br> 
    Em caso de dÃºvidas, entre em contato conosco pelo e-mail: 
    <a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#99;&#111;&#110;&#116;&#101;&#117;&#100;&#111;&#115;&#100;&#105;&#103;&#105;&#116;&#97;&#105;&#115;&#64;&#105;&#109;&#46;&#117;&#102;&#102;&#46;&#98;&#114;">&#99;&#111;&#110;&#116;&#101;&#117;&#100;&#111;&#115;&#100;&#105;&#103;&#105;&#116;&#97;&#105;&#115;&#64;&#105;&#109;&#46;&#117;&#102;&#102;&#46;&#98;&#114;</a>. 
    </span> 
    </div> 
    </body> 
    </html>

来源

2017-04-05 Humberto José Bortolossi

如何使线框变粗？ – pailhead

http://stackoverflow.com/questions/31539130/display-wireframe-and-solid-color – WestLangley

如果你正在处理像这样的大数值，你应该增加相机近锥体来减少/防止z-缓冲战斗。而不是'0.1'，试试像10或20这样的值。 – Brakebein

如果你像这样大的价值的工作，你应该增加在摄像机附近视锥，以减少/防止z缓冲区战斗。而不是0.1，请尝试像10或20这样的值。

来源

2017-04-09 12:41:32 Brakebein

Three.js：两种颜色竞争相同的屏幕像素

回答

相关问题