I am new to the world of three.js and recently attempted to create a simple textured cube box in an isometric view. However, when I added edge lines to my cube, I noticed that some edges appeared grainy.
Despite experimenting with adjustments to the camera and aspect ratio, the issue still persists.
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>Although the code provided above creates a visually appealing grey cube with black edges, the edges exhibit a grainy appearance in the browser.
Please see the image below: