three.jsでマテリアルに各属性を記述したオブジェクトを渡す

Question

以下のコードを実行したい。

const material = new THREE.MeshBasicMaterial({
  map: texture, // テクスチャーを指定
  color: 0x007eff, // 色
  transparent: true, // 透明の表示許可
  blending: THREE.AdditiveBlending, // ブレンドモード
  side: THREE.DoubleSide, // 表裏の表示設定
  depthWrite: false // デプスバッファへの書き込み可否
});

ジオメトリに光っているような処理を施すコードです。
以下のコードで、ハート型のシェイプにこれを渡してみると、エラーになる。
color以下を削除すると、真っ黒なハートは出るのですが・・・・。

ハート型に光っている処理を施したい

問題の箇所は７９行目以下です。

※追記

const texture = new THREE.TextureLoader().load('abc.jpg');

において、僕のコードだと、このjpgファイルが読み込まれてなかったみたいです。
で、上のmap: textureをとりあえずコメントアウトしてみると、一応表示はされましたが、光っているエフェクトからは遠い状態です。

Answer 1

three.js の公式サンプルに希望する表現のものが無いか調べてみるのは如何でしょうか？

＜参考＞
https://threejs.org/examples/?q=post#webgl_postprocessing_unreal_bloom_selective
https://threejs.org/examples/?q=post#webgl_postprocessing_unreal_bloom

Comments

[justmeet0924]

上のサンプルがいい感じです。
しかし、何から何までわからないことだらけで申し訳ないんですが、ソースの見方がわからないのです。
開発→ページのソースを表示、で出てくるのって、このサンプルのソースじゃないですよね？
exampleのメニュー全体のソース？かな？

[cx20]

ページ右下の（< >）がサンプルのソースへのリンクです。
https://github.com/mrdoob/three.js/blob/master/examples/webgl_postprocessing_unreal_bloom_selective.html
https://github.com/mrdoob/three.js/blob/master/examples/webgl_postprocessing_unreal_bloom.html

[justmeet0924]

ありがとうございます。何とかやってみようと思います。少しずつthree.jsに慣れてきたので・・・。