質問: loader.load( 'images/example.png' ); // メッシュ作成 new THREE.MeshBasicMaterial({ map: texture, transparent: true, side:THREE.DoubleSide, }); ### 補足情報 ・基本的にすべてのオブジェクトをMeshBasicMaterialで作成していますので、ライトは使用しておりません。 ・blendに関する処理もデフォルトのままです。 ・canvasの背景色は透明になっています(背景にはDOMオブジェクトを表示したい為) 足りない情報などありましたら追加させていただきますので、 お力を貸していただけると助かります。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/0a572952fc68093521b7e327b7b12b6b.png)
回答: 全てのコードとテクスチャの元画像があると原因を探りやすいのですが、 こちらで症状を再現できませんでしたので、推測でいくつか回答します。 レンダラの設定時にアンチエイリアスの設定は入っていますか? 下記「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, } ); ```