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

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问题，可以通过极化偏移量.polygonOffset解决。
造成此问题的原因是线条和表面的坐标和深度相同。

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

例如

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>