three.jsでコンテンツを作る上でさけては通れないテクスチャーのロード処理。実はPreloadJSを併用することで劇的に効率良くテクスチャーが扱えるようになることをご存知でしょうか?今回はそんなマル秘テクニックを解説します。TextureLoaderは一個のロードしかできないthree.jsに元々TextureLoaderというローダーが備わっています。次のコードはhoge.jpgを読み込むためのコードです。texture});TextureLoaderのload()メソッドを使用して一つの画像を読み込んでいます。このままでは複数の画像を読み込みたい場合、。一個一個の画像に対してload()メソッドを呼ぶ必要があります。ほとんどのプロジェクトの場合、テクスチャーは複数読み込む必要があるためTextureLoaderでは非常に面倒です。PreloadJSを併用することでこの問題が解決します。PreloadJSとはPreloadJSとはCreateJSが提供している画像や音楽ファイルを読み込むためのモジュールです。PreloadJSを使用することで複数のアセットの読み込みが可能になり、ローディング表示などの実装にも役立ちます。PreloadJSはCreateJSを使用せずとも単体で使用することができます。three.jsとPrelaodJSを併用した簡単なデモを作成しました。GitHubにソースコードも置いていますので参考ください。DemoGitHubここからPreloadJSを使用したテクスチャーロードの実装方法を解説しますがドキュメントを併せて見ておくと分かりやすいです。DocumentationPreloadJSでのテクスチャーロード実装PreloadJSを使ったテクスチャーロード方法を解説します。PreloadJSをHTMLで読み込みます。src="https://code.createjs.com/preloadjs-0.6.2.min.js"></script>PreloadJSを使用する準備が出来たのでJavaScriptを書いていきます。次のコードは画像を読み込んでthree.jsで使えるテクスチャーに変換するまでのコードです。テクスチャーのロードを開始loadQueue.loadManifest(manifest);コードを順に解説していきます。読み込みたい画像の一覧データを配列で用意します。'./texture/huga.png'}];idに設定した文字列は読み込み結果から画像を取得する際に使用します。分かりやすいidを設定しましょう。srcには読み込みたい画像のパスを設定します。PreloadJSではこのような読み込みリストデータをManifestマニフェストと呼びます。LoadQueueを生成LoadQueueはローダーと思ってもらって差し支えありません。LoadQueueを生成し、これを利用して画像のロードを行っていきます。ロード完了イベントのリスナーを登録ロード完了後の処理を追加します。全てのアセットのロードが完了するとcompleteイベントが発火されるのでon()メソッドでイベントリスナーを登録して監視します。true;});ロード完了後はgetResult()メソッドにマニフェストで設定したIDを引数として渡すことで読み込んだ画像データを取得できます。/>のようなタグ情報になっているのでこのままではテクスチャテクスチャーとして使用できません。この画像データをTHREE.Textureのインスタンス生成時に引数として渡すことで初めてthree.jsで扱えるテクスチャーオブジェクトに変換されます。THREE.Texture(image);needsUpdateをtrueに設定することを必ず忘れないようにしてください!!この設定を忘れるとテキスチャーが反映されず黒いMeshが表示されてしまいます。最後にloadManifest()メソッドを使ってマニフェストで指定した画像の読み込みを開始します。読み込んだテクスチャーはそのままマテリアルの生成時にプロパティーとして渡すことで使用できます。texture});尚、上記ではTHREE.Textureで説明しましたがTHREE.CubeTextureでも同じように読み込んだ画像から生成できます。SkyBoxでも同じ様に使えるので便利です。true;まとめ今回紹介した方法を用いれば、テクスチャが読み込み終わっていないのにモデルが表示されてしまうなどの問題も解決できます。PreloadJSはテクスチャーだけでなく音楽ファイルも読み込めるのでthree.jsのローダーは使用せずにアセットのロードはPreloadJSで一元管理したほうがプロジェクト内の見通しが良くなると思います。アセットの読み込み周りでお困りであれば一度試してみてはいかがでしょうか。upLoginユーザーは見つかりませんでした。