web-dev-qa-db-ja.com

THREE.LineBasicMaterialを使用した線の太さ

以下のコードを使用して、three.jsシーンで数百行を作成しています

edgeGeometry[i] = new THREE.Geometry();
edgeGeometry[i].vertices[0] = v(x1,y1,z1);
edgeGeometry[i].vertices[1] = v(x2,y2,z2);
edgesMat[i] = new THREE.LineBasicMaterial({
    color: 0x6699FF, linewidth: 1, fog:true});
Edge[i] = new THREE.Line(edgeGeometry[i], edgesMat[i]);
Edge[i].type = THREE.Lines;
scene2.add(Edge[i]);

それはうまく動作しますが、「線幅」の値をより大きなORより小さな値に変更すると、シーンに違いは見られません。
線の太さを変更するにはどうすればよいですか？何か案は？
ありがとう、ディミトリス

javascriptwebglthree.js
30
Dimitris

Windowsを使用していますか？
[〜＃〜] angle [〜＃〜] で実装されていなかったため、これはWindowsで動作しなかったことを覚えています。

18
mrdoob

1）ネイティブOpenGLを使用する

ブラウザでANGLEの代わりにネイティブOpenGLを使用するように設定することにより、回避策で線の太さのレンダリングを実現できます。 Chromeでこれを行う方法についてはこちらをご覧ください 。ネイティブOpenGLに切り替えると、パフォーマンスの違いが発生することに注意してください。

編集：

マスターMrDoob自身 ChromeとFirefox）の両方でこれを行う方法をここに投稿しました 。

注：最新のOpenGLバージョンも線の太さをサポートしなくなったため、この最初のオプションは有効なソリューションではなくなりました。 @ gman彼の答え を確認してください。これは、線の太さを使用したい場合、2番目のオプションが方法であることを意味します。

2）THREE.MeshLineクラスを使用する

別の解決策もあります。 githubのこのTHREE.MeshLineクラス は素晴らしい回避策です。特別なTHREE.MeshLineMaterialが付属しています。ドキュメントによると、次のように簡単です。

  • ジオメトリを作成して入力する
  • THREE.MeshLineを作成し、ジオメトリを割り当てます
  • THREE.MeshLineMaterialを作成します
  • THREE.MeshLineとTHREE.MeshLineMaterialを使用してTHREE.Meshを作成します
22
Wilt

これは、Windows ChromeおよびFirefoxで、どちらもANGLE（WebGL to DirectXラッパー）を使用している場合に発生します。

この問題はまだANGLEプロジェクトによって解決されていません。ここで問題にスターを付けて、より高い優先度を取得し、実装される場合は通知を受け取ることができます。

https://code.google.com/p/angleproject/issues/detail?id=119

12
user2090712

これはもはやANGLEだけの問題ではなく、すべてのプラットフォームの問題です。 WebGL2およびOpenGL 4+コアプロファイルをサポートするためにOpenGL 4+コアプロファイルに切り替える必要があるブラウザーは、1を超える線幅をサポートしていません。OpenGL4.0+仕様のセクションE.2.1から

E.2.1廃止されたがまだサポートされている機能

次の機能は廃止されましたが、コアプロファイルに引き続き存在します。これらはOpenGLの将来のバージョンから削除される可能性があり、コアプロファイルを実装する前方互換性のあるコンテキストで削除されます。

  • 幅の広い線-1.0より大きいLineWidth値は、INVALID_VALUEエラーを生成します。

より太い線を描くには、ジオメトリを生成する必要があります。 three.jsにはこのライブラリがあります（Wiltからも指摘されています）

https://github.com/spite/THREE.MeshLine

4
gman

Webglrendererの代わりにCanvasRendererを使用できます。公式ドキュメントをご覧ください here ここで、各図形の線幅= 10の境界線があります。

1
raulsi

extrude-polyline を使用して、太い（ポリ）線と three-simplicial-complex に対して simplicial complex を生成すると、同じ効果を得ることができます。 =これをthree.jsメッシュに変換するには：

const THREE = require('three');
const extrudePolyline = require('extrude-polyline');
const Complex = require('three-simplicial-complex')(THREE);

function thickPolyline(points, lineWidth) {
  const simplicialComplex = extrudePolyline({
    // Adjust to taste!
    thickness: lineWidth,
    cap: 'square',  // or 'butt'
    join: 'bevel',  // or 'miter',
    miterLimit: 10,
  }).build(points);

  // Add a z-coordinate.
  for (const position of simplicialComplex.positions) {
    position[2] = 0;
  }

  return Complex(simplicialComplex);
}

const vertices = [[0, 0], [10, 0], [10, 10], [20, 10], [30, 00]];
const geometry = thickPolyline(vertices, 10);

const material = new THREE.MeshBasicMaterial({
  color: 0x009900,
  side: THREE.DoubleSide
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

ソース とともに 完全な例 を示します。 （現在、 requirebinの問題 があり、ソースの例をレンダリングできません）。

ポリラインのテクスチャマップを作成する場合は、少し複雑になります。

1
danvk

TubeGeometryを使用して、2つのポイントの間に太い線を作成します：

Helixの緑の線を見る

enter image description here

// line material
var lineMaterial = new THREE.LineBasicMaterial({ color: 0x00ff00 });


let startVector = new THREE.Vector3(
    RADI * Math.cos(t),
    RADI * Math.sin(t),
    3 * t
  );
  let endVector = new THREE.Vector3(
    RADI * Math.cos(t + 10),
    RADI * Math.sin(t + 10),
    3 * t
  );

  let linePoints = [];
  linePoints.Push(startVector, endVector);

  // Create Tube Geometry
  var tubeGeometry = new THREE.TubeGeometry(
    new THREE.CatmullRomCurve3(linePoints),
    512,// path segments
    0.5,// THICKNESS
    8, //Roundness of Tube
    false //closed
  );

  //add buffer geometry
  let tubeBufferGeomtry = new THREE.BufferGeometry().fromGeometry(
    tubeGeometry
  );

  let line = new THREE.Line(tubeGeometry, lineMaterial);
  scene.add(line);
1
Hitesh Sahu