three.js - THREE.ぼかしのあるライン

Question

ぼかしやその他のフィルターを使用した線のオプションはありますか?

テクスチャ付きのラインの代替を使用しますTHREE.Planeが、位置ベクトルでの移動を模倣してlookAtおりvertices[0]、vertices[1].

Answer 1

WebGLRenderer を使用する Line オブジェクトには多くのオプションがありません。CanvasRenderer または SVG レンダラーを使用すると、さらに多くのことができると思います。たとえば、ほとんどの WebGL 実装 (Windows の Chrome) は最大線幅 1 しかサポートしていないため、幅を変更することさえできません。CanavsRenderer に切り替えると、'lineWidth' オプションで設定できます。ただ、このような単純なオプションで線をぼかすことができるかどうかはわかりません。

WebGLRenderer を使用したい場合は、GLSL に関する情報を調べて、カスタム シェーダーを作成することをお勧めします。次に、Line オブジェクトのカスタム シェーダーを作成する方法について、この例を確認してください。この例は、これを非常にうまく行っているようです。あなたが目指していることを行うために適応できると確信しています。