ThreeJS Line Width, Dash ( DXF )

이번에 또 다시 삽질을 되풀이 해서 정리해 둡니다.

WebGL 환경에서 많이 사용하는 오픈소스 라이브러리에 ThreeJS를 많이 사용하십니다.

https://threejs.org/

Three.js – JavaScript 3D Library

저도 처음 접 할때만 해도 꽤나 흥미로운 경험이였습니다. :)

그런데 자주 쓰는 파트가 아니여서 그런지 당연히 될것 이고 되었었던 기능에 대한 추가 건인데 다시 하려니 또 다시 헤매게 되었네요 

단순히 라인에 두께를 적용하고 스타일, 타입에 Dash를 먹이는 일입니다. 이 내용은 ThreeJS sample과 Doc에 잘 설명되어 있습니다.

threejs LineBasicMaterial DOC

Line Width & Dashed Example

three.js examples

이 기능을 이용해서 해본 내용은 DXF를 Line 분류의 도형들을 좀 더 디테일 하게 표현 할 수 있습니다.

DXF 파일은 dxf-parser를 통해 오브젝트화 합니다.

https://www.npmjs.com/package/dxf-parser

dxf-parser

 

전반적인 부분은 다음 소스를 참고 하였습니다.

https://github.com/gdsestimating/three-dxf

gdsestimating/three-dxf

 

DrawLine 내부에서 Line Type에 따라 처리 합니다.

		//Dashed Line
           // [0.25 -0.125]
            // lineType.patternLength 0.75
            const gapSize = lineType.patternLength / lineType.pattern[0];
            const dashSize = Math.abs(lineType.patternLength / lineType.pattern[1]);
            const lineWidth = (entity.width) ?  entity.width : 1;

            // material = new THREE.LineDashedMaterial({ color: color, gapSize: 5 , dashSize: 10, linewidth : lineWidth });
            // line = new THREE.Line(geometry, material);
            
            material = new THREE.LineMaterial( {
                color: color,                
                // vertexColors: true,
                gapSize: gapSize , 
                dashSize: dashSize,
                linewidth: lineWidth,
                resolution: //Need Envent Update
                dashed: true,
                alphaToCoverage: true,    
            } );

/* ------------------------------------------------------- */
            material.defines.USE_DASH = "";
            material.needsUpdate = true;
/* ------------------------------------------------------- */



        //Solid Line
            // material = new THREE.LineBasicMaterial({ linewidth: 1, color: color });
            
            // const gapSize = lineType.patternLength / lineType.pattern[0];
            // const dashSize = Math.abs(lineType.patternLength / lineType.pattern[1]);
            const lineWidth = (entity.width) ?  entity.width : 1;

            material = new THREE.LineMaterial( {
                color: color,                
                // vertexColors: true,
                linewidth: lineWidth,
                resolution: //Need Envent Update
                dashed: false,
                alphaToCoverage: true,    
            } );
            
            
 /* ---------------------------------------------------- */           
 line = new THREE.Line2( geometry2, material );
 line.computeLineDistances();
 /* ---------------------------------------------------- */
      

다시 한번 느끼지만 공식 문서를 잘 확인해야 삽질을 줄일 수 있을것 같습니다. :)