Three.jsで透過png画像の縁に灰色の線が入る

Question

###発生している問題・エラーメッセージ
Three.jsでMeshBasicMaterialで作成したオブジェクトに
丸い透過png画像をテクスチャとして貼って表示したのですが
透過した丸い部分に沿って灰色の線が入ってしまいます。
画像を滑らかにする半透明の部分が灰色に塗られている？ようなイメージです。
※イメージ画像を添付させていただきます。

###該当のソースコード
// ポリゴン作成
new THREE.PlaneGeometry(2.2, 2.6);

// テクスチャ読み込み
var texture = loader.load( 'images/example.png' );

// メッシュ作成
new THREE.MeshBasicMaterial({
map: texture,
transparent: true,
side:THREE.DoubleSide,
});

###補足情報
・基本的にすべてのオブジェクトをMeshBasicMaterialで作成していますので、ライトは使用しておりません。
・blendに関する処理もデフォルトのままです。
・canvasの背景色は透明になっています(背景にはDOMオブジェクトを表示したい為)

足りない情報などありましたら追加させていただきますので、
お力を貸していただけると助かります。

Answer 1

全てのコードとテクスチャの元画像があると原因を探りやすいのですが、
こちらで症状を再現できませんでしたので、推測でいくつか回答します。

レンダラの設定時にアンチエイリアスの設定は入っていますか？
下記「antialias: true」の部分です（多分入っていると思いますが）

var renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );

これでだめなら、マテリアルのプロパティに「alphaTest:0.2」とかをいれてみてはどうでしょうか
「0.2」の部分は0~1の数値が入ります。

var material = new THREE.MeshBasicMaterial( {
    transparent:true,
    side: THREE.DoubleSide,
    map:texture,
    alphaTest:0.2,
  } );

Comments

[ryuryu]

ご回答ありがとうございます。
先日、自己解決しましたが更新をし忘れていました。申し訳ありません。

アンチエイリアスは設定済みでしたが
おっしゃる通りalphaTestが足りていないことが原因でした。
画像の書き出し方に原因があるかと思いましたが、プログラム側の指定が漏れていたようです。。。

Three.jsは触り途中ですが、今回の件もとても勉強になりました。
また何かありましたらmattari_pandaのお力を貸していただけると幸いです。

よろしくお願いします。