使用 Three.js 时在 Windows 上缺少线宽的解决方法 [英] Workaround for lack of line width on Windows when using Three.js

问题描述

我正在尝试使用 Three.js 绘制旋转 3D 坐标系.我希望轴具有一定的厚度，到目前为止我已经使用 LineBasicMaterial 的线宽参数实现了这一点.

I'm trying to draw a rotating 3D coordinate system using Three.js. I want the axes to have some thickness, which so far I have accomplished using LineBasicMaterial's linewidth parameter.

以下代码对我有用，因为我不在 Windows 上:

The following code works for me since I am not on Windows:

    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 triad = new THREE.Geometry();
    triad.vertices.push( new THREE.Vector3(  0,  0,  0 ) ); 
    triad.vertices.push( new THREE.Vector3( 10,  0,  0 ) );
    triad.vertices.push( new THREE.Vector3(  0,  0,  0 ) );
    triad.vertices.push( new THREE.Vector3(  0, 10,  0 ) );
    triad.vertices.push( new THREE.Vector3(  0,  0,  0 ) );
    triad.vertices.push( new THREE.Vector3(  0,  0, 10 ) );

    var line_mat = new THREE.LineBasicMaterial({'linewidth': 3});

    var frame = new THREE.Line(triad, line_mat, THREE.LinePieces);
    scene.add( frame );                       
    camera.position.z = 40;                        

    function render() {                    
        requestAnimationFrame(render);             
        frame.rotation.x += 0.1;            
        frame.rotation.y += 0.02;             
        renderer.render(scene, camera);                            
    }                                                                           
    render();

不幸的是，由于 ANGLE 库，Windows 上的线宽有限制，请参阅此问题:使用THREE.LineBasicMaterial的线条粗细

Unfortunately, there is a limitation on linewidth on Windows due to the ANGLE library, see this question: Thickness of lines using THREE.LineBasicMaterial

我可以使用什么作为解决方法，以便在 Windows 上正确显示?

What can I use as a workaround so that this displays correctly on Windows?

推荐答案

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

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.

这篇关于使用 Three.js 时在 Windows 上缺少线宽的解决方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！