I am currently working on showcasing geometric figures in 3D using three.js.
When manually drawing hidden lines as dashed lines, the 'dashes' appear to be consistent for all of them. Whether it's a line parallel to the camera plane or one that's nearly perpendicular to the camera plane, they should have the same length and gap.
However, I've encountered an issue with LineDashedMaterial where this consistency doesn't seem to hold true.
https://i.sstatic.net/58GmV.jpg
For the example provided, I'm using this basic code snippet:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 2, 2, 2 );
var LINES_DASHED = new THREE.LineSegments(
new THREE.EdgesGeometry(geometry),
new THREE.LineDashedMaterial({
linewidth: 2,
color: 0x000000,
dashSize: 0.2,
gapSize: 0.1,
depthTest: false,
polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 1
})
);
LINES_DASHED.computeLineDistances();
scene.add( LINES_DASHED );
scene.background = new THREE.Color( 0xffffff);
camera.position.z = 5;
var animate = function () {
requestAnimationFrame( animate );
LINES_DASHED.rotation.x += 0.01;
LINES_DASHED.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();body { margin: 0; }
canvas { width: 100%; height: 100% }<script src="https://threejs.org/build/three.min.js"></script>Example in action:
I thought that by using:
line.computeLineDistance();
it would resolve the issue. However, it appears to calculate the line length in 3D space, which makes sense logically.
Is there something crucial that I might be overlooking?
Thank you for your assistance!