简单立方体场景中的颗粒纹理

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

这是一个Z-fighting 问题，可以通过 polgon 偏移量.polygonOffset 解决。
这个问题是因为线条和表面必须具有相同的坐标和深度。

设置THREE.Material 的.polygonOffset, .polygonOffsetFactor and .polygonOffsetUnits 属性，该属性设置为实体几何。
这会导致曲面稍微向后推，线条覆盖曲面：

例如

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

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,
    polygonOffset: true,
    polygonOffsetFactor: 1.0,
    polygonOffsetUnits: -4.0 
} );
var cube = new THREE.Mesh( geometry, material );
scene.add( line );
scene.add( cube );

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>