在一个简单的立方体场面的粒状纹理

Question

我刚刚开始学习three.js并且一直试图在等轴测视图中设置一个简单的纹理立方体框。当我将边线添加到我的立方体时，它在几个边缘上变得非常颗粒状。

我试过移动相机和纵横比有点但无济于事。

var aspect = 100/100
var scene = new THREE.Scene();
var d = 100;
camera = new THREE.OrthographicCamera( - d * aspect, d * aspect, d, - d, 1, 500 );
camera.position.set( 80, 80, 80 ); // all components equal
camera.lookAt( scene.position ); // or the origin

var renderer = new THREE.WebGLRenderer( {alpha: true });
renderer.setSize( 100, 80 );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry( 65, 65, 65 );
var edges = new THREE.EdgesGeometry( geometry )
var line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( {color: 0x000000} ) );
var material = new THREE.MeshBasicMaterial( { color: 0xf0f0f5 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
scene.add( line );


var animate = function () {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
};

animate();

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>

上面给了我一个漂亮的灰色立方体，黑色边缘，但边缘在我的浏览器中显得有颗粒感。

图片如下：

Answer 1

这是一个qazxsw poi问题，可以通过多边形偏移qazxsw poi来解决。 问题是由于线条和曲面具有相同的坐标和深度而引起的。

设置Z-fighting的.polygonOffset属性，该属性设置为实体几何。 这会导致表面稍微向后推并且线条覆盖表面：

EG

.polygonOffset, .polygonOffsetFactor and .polygonOffsetUnits

THREE.Material

var material = new THREE.MeshBasicMaterial({ 
    color: 0xf0f0f5,
    polygonOffset: true,
    polygonOffsetFactor: 1.0,
    polygonOffsetUnits: -4.0 
} );