質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2500閲覧

Three.js:PreloadJSで読み込んだテクスチャを使って環境マッピングをしたいです。

essex

総合スコア21

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/06/09 08:40

いつも参考にさせていただいています。現在Three.jsについて勉強しておりますが、
PreloadJSの使い方について分からないことがあり質問させていただきます。

現在以下の様なコードで、ImageUtils.loadTextureCube()を使用して
6面のテクスチャを読み込み、その戻り値をマテリアルのenvMapパラメータ
に設定しています。

var urls = [];
for(var i = 1 ; i <= 6 ; i++) {
urls[i - 1] = 'tx/' + i + '.jpg';
}
var envMap = new THREE.ImageUtils.loadTextureCube(urls);

これを、こちらのページで紹介されているPreloadJSを使用し、
事前にテクスチャを読み込んだ後、textureCubeを生成できないか
調べています。

http://qiita.com/sawa-zen/items/cba55a23411753f1353e

しかし、調べ方が良くないのか、loadTextureCubeで生成する方法しか
見つけられません。

どの様にすれば良いかご存じの方がいらっしゃいましたら、
ご教授下さい。よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

THREE.ImageUtils は、既に古いメソッドですね。今は「ImageLoader」というクラスに変更されています。
バージョンが最新のr85であるならば、
CubeTextureLoader
と、
CubeTexture

が、必要な情報に近いでしょう。

さて、PreloadJSを使用した手法ですが、

1.テクスチャーリストを作成します。後のID指定で使うので、URLのみではなく、IDとURLの組み合わせのペアです。
2.ロードキューを作成
3.ロードキュー完了時に、ロードした画像を「1つずつ」抽出して、Textureの配列を作成する
4.実際のロード開始
という流れは変わりませんが、「3」の部分が重要になります。

js

1 2// 1.テクスチャーリストを作成 3var manifest = [ 4 { id: '0', src: './tx/1.png'}, 5 { id: '1', src: './tx/2.png'}, 6 { id: '2', src: './tx/3.png'}, 7 { id: '3', src: './tx/4.png'}, 8 { id: '4', src: './tx/5.png'}, 9 { id: '5', src: './tx/6.png'} 10]; 11 12// ロードキューを作成 13var loadQueue = new createjs.LoadQueue(); 14 15// textureの受け皿を用意 16var texture = new THREE.CubeTexture(); 17 18// ロード完了を監視 19loadQueue.on('complete', function() { 20 // loadQueueからロードした画像データを取得 21 // もうちょっと良い方法があるかもしれませんね 22 var urls = []; 23 for(var i = 0 ; i < 6 ; i++) { 24 urls.push(loadQueue.getResult(i)); 25 } 26 27 // three.jsで使えるテクスチャーに変換 28 texture.images = urls; 29 30 // 【重要】更新を許可 31 texture.needsUpdate = true; 32}); 33 34 35// 4.テクスチャーのロードを開始 36loadQueue.loadManifest(manifest); 37

なお、これらは最新のr85ならば動作すると思いますが、それ以前(ImageUtilsが存在していたころ)では少し違うと思います。それでも、createjs.LoadQueueのレスポンスから1つずつ画像を抽出して、1つの配列画像にするという部分は変わらないと思います。

ご参考になれば幸いです。

投稿2017/06/09 16:02

adrs2002

総合スコア203

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

essex

2017/06/12 05:35

 adrs2002様 アドバイスありがとうございます。 また、すぐにお礼を申し上げなければならないところ、 遅くなってしまい、申し訳ありません。 作成中のプログラムに組み込もうとしているのですが、 私の理解がついて行けず、試行錯誤しています。  元々、作成したいものは、こんな感じです。 http://kimuraya-bakery.la.coocan.jp/three_js/kabuto.html  これは以前作成したものですが、 textureのロードが完了する前に表示が走ってしまうのか、 全ての部品が表示されない事があり、 textureのロードを待って処理を走る様に変更しようとしたのが 今回の発端です。  現在、変更中のものがこちらです。 http://kimuraya-bakery.la.coocan.jp/kabuto/kabuto.html ご覧いただくと、環境マッピングが動作していないのが、 お分かりいただけると思います。  adrs2002様のコメントにあります様に、バージョンの違いからか var texture = new THREE.CubeTexture(); のところがうまくいかない様です。  そこでthree.min.jsを新しいものに差し替えたところ、 動かなくなってしまい、現在試行錯誤中です(^^; 私自身、どこが問題かまだ整理できていないので、 結果のご報告まで、今しばらくお待ちください。  ちなみに、adrs2002様のコメントにあったバージョン(r85)というのは、 three.min.jsを差し替えることによって変化するものですか? また、 THREE.CubeTexture()とTHREE.ImageUtils.loadTextureCube()の戻り値は、 同じ型という理解で良いですか?  何だか、混沌としていて申し訳ありません(iωi)
adrs2002

2017/06/12 07:39 編集

essexさん ソース拝見させていただきました。 chromeのDevツールで見たところ、キューブマップは全部読み込めているようでした (txの1~6) kabuto.js の100行目の場所を修正する必要があるようですね。 ``` var urls = []; for(var i = 1 ; i <= 6 ; i++) { urls[i - 1] = queue.getResult('tx' + i); } envMap = new THREE.ImageUtils.loadTextureCube(urls); ``` こんな感じでどうでしょうか。
essex

2017/06/13 14:43

 adrs2002様 修正案までお送りくださり、ありがとうございます。  アドバイスいただいた通り、100行目を修正してみましたが、 残念ながら環境マッピングは動作してくれませんでした。  100行目を変更したもの  http://kimuraya-bakery.la.coocan.jp/kabuto/kabuto.html  また、THREE.ImageUtilsが、既に古いメソッドということでしたので、 バージョンアップしようとして、ドツボにはまっています(T_T) メソッドやプロパティが全体的に微妙に変わっていて、 修正し始めたら最早何が問題なのか良く分からなくなってしまいました。  バージョンアップ中のもの  http://kimuraya-bakery.la.coocan.jp/kabuto2/  このバージョンアップ中のものには、adrs2002様から 最初に教えていただいたコードを使わせていただきましたが、 メソッドの呼び方が良くないらしく、実行が後回しになってしまいます。 (現在は23行目で呼んでいます)  createjs.LoadQueueが二つありるという良く分からない作りですが(^^; この順序を正しくできれば、正常に動作してくれそうな気もしています。  なかなか解決せずに、申し訳ありません。
adrs2002

2017/06/13 16:02

バージョンアップ前、のものを中心に見させていただきました。 元(キューブマップが動いているもの)とソースを見比べると、マテリアル宣言後のテクスチャの割り当ての行が違っていますね。 127行目、132行目、137行目などが、  map : envMap になっていますが、変更前は envMap : envMap だったはずです。 map : envMapだと、反射マップではなくメイン材質に適用しようとしてしまい、うまくいかない気がします。おそらく、envMap: envMap が正しいと思います。 まずは、この3行を見直してみたらいかがでしょう?
essex

2017/06/14 14:21

adrs2002様 できました!ご指摘の通りでした!! 元のバージョンは取りあえず色々排除して、環境マッピングだけを追求しました。 http://kimuraya-bakery.la.coocan.jp/kabuto/kabuto.html また、新しいバージョンも、adrs2002様のアドバイスを読み返しながら修正し、 こちらもできました! http://kimuraya-bakery.la.coocan.jp/kabuto2/ 何度も、アドバイス下さり、本当にありがとうございました!! 感謝です。
adrs2002

2017/06/14 14:26

いろいろ混乱させてしまったようですみません(´-ω-`) ともあれ、解決できてよかったです!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問