先日、スマートライトの事務所を広いところに引っ越したので、これを機に自分たちがやっていることを体感できるショールームにする計画を立てています。
Lutronの電動ロールカーテンやDALI照明、スマートロックなどを連携させるのと同時に、現実空間のショールームと連動した仮想空間のショールームも構築することを考えています。
で、使うソフトウェアとして、PLAYCANVASというブラウザ上で構築できるゲームエンジンで作ろうと、現在勉強中です。
いろいろTutorialをいじっているところですが、まだまだわからない点も多く、こちらのブログにて試したことを記録していきたいとおもいます。
ということで、まずはPlayCanvas上でYouTubeプレーヤーを構築するサンプルをいじってみます。
YouTube in 3D Scenes(PlayCanvas)
![UntitledImage.png UntitledImage](https://digital-light.jp/wp-content/uploads/2022/03/UntitledImage-2.png)
YouTube in 3D Scenes | Learn PlayCanvas
こちらにサンプルがあったので、まずはプロジェクトをForkして自分でいろいろ試してみました。
いじってみた
![UntitledImage.png UntitledImage](https://digital-light.jp/wp-content/uploads/2022/03/UntitledImage-3.png)
自分でいじってみたのはこちら。
やったことは、
- YouTubeを自分の動画のURLに変更
- スクリーンサイズを大きくした
- カメラをひいた状態にした
という感じ。
YouTubeを自分の動画のURLに変更する方法
![YouTubeTutorial | Editor 2022-03-20 00-00-16.jpg YouTubeTutorial | Editor 2022 03 20 00 00 16](https://digital-light.jp/wp-content/uploads/2022/03/YouTubeTutorial-Editor-2022-03-20-00-00-16.jpg)
このサンプルではYouTubeを表示させるのに、2種類の方法をつかっています。
![YouTubeTutorial | Editor 2022-03-20 00-04-56.jpg YouTubeTutorial | Editor 2022 03 20 00 04 56](https://digital-light.jp/wp-content/uploads/2022/03/YouTubeTutorial-Editor-2022-03-20-00-04-56.jpg)
iframe Planeの方。
![YouTubeTutorial | Editor 2022-03-20 00-05-58.jpg YouTubeTutorial | Editor 2022 03 20 00 05 58](https://digital-light.jp/wp-content/uploads/2022/03/YouTubeTutorial-Editor-2022-03-20-00-05-58.jpg)
ENTITYの中に、YouTubeの画面を表示させるRENDERと、そのSCRIPTが組み込まれ、ScriptにはYouTubeのURLを記載する”iframeUrl”があります。
また、EntityのScaleを編集することで、画面のサイズが設定できます。
もうひとつのYouTubeの方は、
![YouTubeTutorial | Editor 2022-03-20 00-17-03.jpg YouTubeTutorial | Editor 2022 03 20 00 17 03](https://digital-light.jp/wp-content/uploads/2022/03/YouTubeTutorial-Editor-2022-03-20-00-17-03.jpg)
youtubePlaneというオブジェクトに表示させるYouTubeのURLを、videoIdという変数にいれることで表示できます。
![UntitledImage.png UntitledImage](https://digital-light.jp/wp-content/uploads/2022/03/UntitledImage-4.png)
カメラ
HierarchyのCameraオブジェクトを選び、移動することで、YouTubeの画面をひいた状態でみることができます。
![YouTubeTutorial | Editor 2022-03-20 00-15-05.jpg YouTubeTutorial | Editor 2022 03 20 00 15 05](https://digital-light.jp/wp-content/uploads/2022/03/YouTubeTutorial-Editor-2022-03-20-00-15-05.jpg)
まとめ
いろいろわからないことだらけですが、今回いじったことで、ちょっとわかってきました。