WebGLで3D空間内の絵をクリックしたらウインドウを表示する社内研修に参加しました。 2日目

WebGLで3D空間内の絵をクリックしたらウインドウを表示する社内研修に参加しました。 2日目

本日出社時の朝は曇りで、通勤するのが楽な日でした。
社内研修に引き続き参加させていただいております北山です。

先日は社内研修にて、美術館の3DCGのワールドのモデルの、絵(画像)が貼られている部分をクリックしたら判定が行われる処理の実装作業を行いました。

判定の取得には成功したので、本日はその判定を用いてクリックした絵を別のウィンドウで表示する機能の実装作業を行いました。

実装後の表示は以下となります。

※画面の中央に別ウィンドウが表示され、そのウィンドウの中にクリックした絵の画像が表示されました。

 

この処理はクリックした絵の情報と、スクリプト側で用意した画像の名前、画像の情報の配列を用いて表示しています。
先日の通り、引き続き、この情報を比較し合わせて真偽(if文)の判定が行われています。

今回、手間取った点があり、私の勘違いでデータの読み込みに一部失敗がありました。
今回のウィンドウを表示する処理はWebGLでのJavaScriptのイベント発生の処理もそうですが、HTML、
CSSファイルも用いています。
今回、WebGLの仕様に私自身の誤認があり、以前から行っていて問題なくできていたCSSの読み込みに失敗しました。
普段通りのやり方と違うやり方をしており、その時にCSSの読み込みに失敗しておりウィンドウの表示処理を担う一部の機能が動かず、イベントは発生しているのにウィンドウが表示されないというミスがありました。

その点についてはご指導いただき修正ができ、今回の結果に至る事ができました。

次回はこの3Dのワールド内で、一部の区画に移動した時、表示されている絵から、違う動画を表示して自動再生する機能を実装の予定です。

ここまでご一読いただき誠にありがとうございました。
次回もご一読いただけると幸いです。


何卒、宜しくお願い申し上げます。