Javascript Three.js：两种颜色竞争同一屏幕像素
在这个Three.js应用程序（）中，黑色的线框与黄色的实体竞争，因此屏幕像素闪烁。有没有办法避免这种情况？注意：缩小时闪烁效果更强 下面是显示问题的动画GIF： 当然，我可以使线框模型更厚，但是有没有一个解决方案是使用薄线框 谢谢，亨伯托 代码如下：Javascript Three.js：两种颜色竞争同一屏幕像素,javascript,three.js,Javascript,Three.js,在这个Three.js应用程序（）中，黑色的线框与黄色的实体竞争，因此屏幕像素闪烁。有没有办法避免这种情况？注意：缩小时闪烁效果更强 下面是显示问题的动画GIF： 当然，我可以使线框模型更厚，但是有没有一个解决方案是使用薄线框 谢谢，亨伯托 代码如下： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; char
<!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="mailto:conteudosdigitais@im.uff.br">conteudosdigitais@im.uff.br</a>.
</span>
</div>
</body>
</html>
二十面体
正文{文本对齐：居中；}
//检查功能，如果足够，则启动
var haswebgl=（函数（）{try{return！！window.WebGLRenderingContext&&
！！document.createElement（'canvas'）.getContext（'experimental-webgl'）；}
catch（e）{return false；}}}（）；
var hascanvas=！！window.canvasrendingcontext2d；//将值转换为布尔值
var context0=null；
var clock=新的三个时钟（）；
如果（画布）
{
document.addEventListener（“DOMContentLoaded”，init，false）；
}//if（）的结尾
函数init（）
{
document.getElementById（“msgwebglcontext0”）.innerHTML=“”；
/*生成对象、场景、摄影机、渲染器等*/
context0={color:0xccff33，名称：“0”}；
//布景
如果（haswebgl）
{
context0.renderer=new THREE.WebGLRenderer（{alpha:true，antialas:true}）；
}
其他的
{
context0.renderer=new THREE.CanvasRenderer（{alpha:true，antialas:true}）；
}
context0.renderer.setSize（600400）；
//将渲染器添加到文档中。
//这应该在三个.TrackballControls（）之前调用。
context0.viewport=document.getElementById（“webglcontext0”）；
context0.viewport.appendChild（context0.renderer.doElement）；
context0.scene=new THREE.scene（）；
context0.camera=新的3.PerspectiveCamera（20600/400.0,0.11000）；
context0.camera.position.z=4000；
context0.scene.add（context0.camera）；
context0.controls=新的三个.FlyControls（context0.camera）；
context0.controls.movementSpeed=1000；
context0.controls.doElement=context0.viewport；
context0.controls.rollSpeed=Math.PI/24；
context0.controls.autoForward=false；
context0.controls.dragToLook=false；
//创建二十面体
context0.scene.add（新三面网格）（新三面网格）二十面体几何（503），
新的3.MeshBasicMaterial（{color:0x000000，线框：true}））；
/*
context0.scene.add（新三点网格）（新三点二十面体几何）（497），
新的3.MeshBasicMaterial（{color:0x000000，线框：true}））；
*/
context0.scene.add（新三点网格）（新三点二十面体几何（500），
新的THREE.MeshBasicMaterial（{color:context0.color，不透明度：0.9，透明：true，side:THREE.DoubleSide}））；
//跑
render（）；
制作动画（）；
}//init（）的结尾
函数animate（）
{
/*一个动画滴答声*/
请求动画帧（动画）；
render（）；
}//动画结束（）
函数render（）
{
/*渲染我们的小场景*/
var delta=clock.getDelta（）；
context0.controls.update（增量）；
渲染器渲染（context0.scene，context0.camera）；
}//渲染结束（）
WASD移动器，R | F向上|向下，Q | E滚转，向上|向下俯仰，左|右偏航
纳维加多尔·帕雷塞（Seu navegador parece nÃo suportar WebGL ou esta opço nÃo estÃhabilitada）。
电子邮件：
.
0.10.1