45

以下のコードを使用して、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]);

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

4

9 に答える 9

21

Windows を使用していますか? これはANGLE
に実装されていなかったため、Windows では機能しなかったことを覚えています。

于 2012-07-25T00:05:21.563 に答える
1

Webglrenderer の代わりに CanvasRenderer を使用できます。ここで、各形状に線幅 = 10 の境界線がある公式ドキュメントを確認してください。

于 2015-12-17T06:18:37.537 に答える
1

太くなった (ポリ) ラインのシンプリシアルコンプレックスextrude-polylineを生成し、これを three.js Mesh に変換することで、同じ効果を得ることができます。three-simplicial-complex

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

ポリラインをテクスチャ マップしたい場合は、もう少し複雑になります。

于 2017-11-09T15:24:13.653 に答える