【Web表現チェンジャー】PlayCanvasに追加された3Diframeサンプルが控えめに言ってヤバい
2021年1月13日(水) 15時21分41秒
最近PlayCanvasで3Diframeのデモが@yausterによって追加されました
https://developer.playcanvas.com/ja/tutorials/youtube-in-3d-scenes/
これがなかなかに面白い機能でPlayCanvasの3D空間内に好きなだけiframeでWebページを埋め込めてしまうのです。
バーチャルゲームセンターも実装できた
これをもう少し工夫すればバーチャル美術館とか、展示場とか、何でもできそう。
ポートフォリオもこれで構築すればすごい差別化できそう。
しかも実装はスクリプトを板ポリにアタッチしてattributeでURLを指定するだけ。すごい。
実装自体はCSS3Dでやっていて、PlayCanvasの3D座標系とCSS3Dの3D座標系を完璧に正しくマッピングしきっている。美しい。。
また3D空間でCSS3Dの前にEntityが映り込んだ際は正しくCSS3Dがエンティティ背景に回り込むようになっていて、より没入感を高めている。これはすごすぎる。。。
なおこちらの3Dモデルは全部VOXELCANVASでちゃっちゃっと作成。リソース作成からアプリ開発、デプロイまで全部Webでできてしまった。。。
VOXELCANVASでは
virtual-deskkit
というタグでパブリック公開中。ぜひダウンロードして使ってみてね。
https://voxelcanvas.me/id/ryotaro/?tag=virtual-deskkit これで好きなYouTube動画に囲まれるWebサービスとか作ったらおもしろそう。
YouTubeで検索ワード入れたら候補の動画が10個くらい帰ってくるようなAPIないかな
試してみたい。