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上的线宽存在限制，请参阅此问题：Thickness of lines using THREE.LineBasicMaterial

我可以将哪些方法用作解决方法，以便在Windows上正确显示？

Answer 1

我得到了线宽的解决方法。我创建了一个新方法并传递了要绘制直线的坐标。然后在您的方法中，在坐标周围绘制多条线。这是代码：

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);
    }
}

如果这不起作用，请告诉我。

Answer 2

要使用native gl运行WebGL，您必须在Windows机器中安装OpenGL。

您有以下选项：

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

Answer 3

通过使用Angle，渲染实际上由DirectX处理。切换到原生gl甚至可以提高性能（取决于显卡的OpenGL性能）。

您可以检查当前＆＃34;引擎盖＆＃34;浏览器的using this website here 的WebGL设置。它还会显示您的浏览器当前是否正在使用WebGL角度。

您还可以查看this website，了解有关如何切换到原生gl的详细说明。

Answer 4

有很多可能性-我用过气缸。此例程在xy平面中给出平线：

function doline(x1, y1, x2, y2, z, w, color) { // draw a "line"
  // scene.add(doline(x1, y1, x2, y2, z, w, 0xrrggbb)) call like this
  if (typeof color == "undefined") color = 0xffffff;
  color = new THREE.Color( color );
  var d = Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)); // length
  var geometry = new THREE.Geometry;
  var material = new THREE.MeshBasicMaterial({ color:color, side:THREE.DoubleSide });
  var u1=w*.35, u2=w*.5, v1=0, v2=w*.15, v3=w*.5, v4=w*.85, v5=w; // rounded ends
  fan(geometry, 0, -w/2, z, [[-u1, v2],[-u2, v3],[-u1, v4],[0, v5],[ d, v5]]); // left
  fan(geometry, d,  w/2, z, [[ u1,-v2],[ u2,-v3],[ u1,-v4],[0,-v5],[-d,-v5]]); // right
  geometry.rotateZ(Math.atan2(y2-y1,x2-x1)); // rotate first
  geometry.translate(x1,y1,0);               // then translate
  var mesh = new THREE.Mesh(geometry, material);
  return mesh;
  function fan(geom, x0, y0, z0, pts) { // add vertices and faces in xy plane based on x0, y0, z0
    // pts must be 2 or more points relative to x0,y0 [[x1,y1],[x2,y2],..]
    geom.vertices.push(new THREE.Vector3(x0, y0, z0)); // base point
    var i0 = geom.vertices.length-1; // add to vertices
    for (var i1=0; i1<pts.length; i1+=1) { // 
      geom.vertices.push(new THREE.Vector3(x0+pts[i1][0], y0+pts[i1][1], z0));
      if (i1 > 0) geom.faces.push(new THREE.Face3( i0, i0+i1, i0+i1+1) );
    }
  }
}

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

4 个答案: