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

Question

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

由于我不在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的线宽

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

Answer 1

要使用本机 gl 运行 WebGL，您必须在 Windows 计算机中安装 OpenGL。

您有以下这些选择：

1. Google Chrome“解决方案”：“使用命令行参数运行 chrome 。正如您在http://nuclear.mutantstargoat.com/webgl/--use-gl=desktop中看到的那样
2. Firefox“解决方案”：“只需在导航栏中输入about:config并搜索首选项webgl.prefer-native-gl并设置为。正如您在“ http://forums.mozillazine.org/viewtopic.php?f=23&t=2090351&start=15true中看到的那样