且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

使用 Three.js 时在 Windows 上缺少线宽的解决方法

更新时间:2022-12-19 21:13:49

我找到了解决线条宽度的方法.我创建了一个新方法并传递了要绘制线条的坐标.然后在您的方法中,围绕坐标绘制多条线.这是代码:

I got workaround for the width of the line. I created a new method and passed the coordinates where line is to be drawn. Then in your method , draw multiple lines around the coordinates. Here is the code :

function drawLine(lineMaterial, x1, y1 , z1, x2, y2, z2, thickness){
    for (i = 0; i < thickness * 2; i++) {  // multiplied it by 2 to be more granule pixels
        var routerLine1Geometry = new THREE.Geometry();
        routerLine1Geometry.vertices.push( new THREE.Vector3(x1, y1+i/4, z1));//divided it by 4 to be more granule pixels 

        routerLine1Geometry.vertices.push( new THREE.Vector3(x2, y2+i/4, z2)  );
        var routerLine1 = new THREE.Line( routerLine1Geometry, lineMaterial );
        scene.add(routerLine1);
    }
    for (i = 0; i < thickness * 2; i++) { 
        var routerLine1Geometry = new THREE.Geometry();
        routerLine1Geometry.vertices.push( new THREE.Vector3(x1, y1-i/4, z1)  );  // 
        routerLine1Geometry.vertices.push( new THREE.Vector3(x2, y2-i/4, z2)  );
        var routerLine1 = new THREE.Line( routerLine1Geometry, lineMaterial );
        scene.add(routerLine1);
    }
}

如果这不起作用,请告诉我.

Let me know if this doesnt work.