在使用Three.js時缺少Windows線寬的解決方法

我正在嘗試使用Three.js繪製旋轉3D座標系。我希望軸具有一定的厚度，到目前爲止，我已經使用LineBasicMaterial的線寬參數完成了這一步。在使用Three.js時缺少Windows線寬的解決方法

下面的代碼對我的作品，因爲我不是在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();

遺憾的是，在Windows上線寬的限制，由於角度圖書館，看到了這個問題：Thickness of lines using THREE.LineBasicMaterial

什麼我可以用作解決方法，以便在Windows上正確顯示嗎？

來源

2014-01-11 nham

您可以創建具有特定長度的CylinderGeometry並定位圓柱體。對於更平滑的東西，您可以嘗試設置樣條線並沿着樣條線拉伸，如下例所示： http://threejs.org/examples/#webgl_geometry_extrude_splines 此外，您還可以使用自己的方法計算東西，並創建自己的幾何體，這取決於你的需求，但我認爲爲你的座標系設置幾個氣缸應該沒問題？另外，你可以告訴Firefox例如使用本機OpenGL驅動程序，然後在Windows下有線寬，但在大多數情況下速度較慢...... – GuyGood

要使用原生gl運行WebGL，必須在Windows機器上安裝OpenGL。

你有以下這些選項：

谷歌瀏覽器的「解決方案」：「與--use-gl=desktop命令行參數運行Chrome可以在http://nuclear.mutantstargoat.com/webgl/
火狐看到‘解決方案’：」只需鍵入在導航欄about:config中搜索優先webgl.prefer-native-gl並設置爲true。正如你在「http://forums.mozillazine.org/viewtopic.php?f=23&t=2090351&start=15

來源

2014-01-12 15:01:37 Filipe

看到通過使用角度渲染實際上是由DirectX的處理。切換到本機GL甚至會導致性能提升（具體取決於您的顯卡的OpenGL性能）。

您可以查看當前的「引擎蓋下的」瀏覽器using this website here的WebGL的設置。它也表明你，如果你的瀏覽器當前使用的角度對WebGL的。

您還可以檢查this website對於如何切換到本機的詳細說明gl。

來源

2014-03-17 10:19:44 Wilt

我得到了行寬的解決方法。我創建了一個新方法，並傳遞了繪製線的座標。然後在你的方法中，圍繞座標繪製多條線。這裏是代碼：

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

讓我知道這是行不通的。

來源

2014-07-31 07:04:43

在使用Three.js時缺少Windows線寬的解決方法

回答

相關問題