【Web表現チェンジャー】PlayCanvasに追加された3Diframeサンプルが控えめに言ってヤバい

2021年1月13日(水) 15時21分41秒 | 89 view |

最近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というタグでパブリック公開中。ぜひダウンロードして使ってみてね。



これで好きなYouTube動画に囲まれるWebサービスとか作ったらおもしろそう。
YouTubeで検索ワード入れたら候補の動画が10個くらい帰ってくるようなAPIないかな
試してみたい。