Question

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

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

当然，我可以让线框模型更粗，但是有一个细线框的解决方案吗？

谢谢，温贝托。

以下是代码：

   <!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>

Answer 1

如果你正在使用像这样的大值，你应该在视锥体附近增加相机以减少/防止z缓冲区的战斗。而不是0.1，请尝试使用10或20之类的值。

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

1 个答案: