VRコンテンツを埋め込んでみました

  1. エンジニアブログ

こんにちは、開発本部の0009です。
今回はVRコンテンツを埋め込んでみました。

↓ こちらの右下にあるVRグラスのようなボタンを押してみてください
↓ スマートフォン, iOSあたりでは,ステレオグラムになると思います

こちら,WebVR のフレームワーク「A-Frame」を用いたコンテンツです。
前回の記事で埋め込んだ XVL ファイルから生成しました。

VRとしての工夫は,端末の回転でモデルを回転できるようにしたことです。
一般的なVRでは仮想現実空間を見渡しますので,A-Frame の機能を上書きしています。
さらに,タブレットPC で Chrome で開きますと,
タブレットの回転でもモデルを回転できるようにしています。

端末ごとに機能も違うので,実に工夫しがいがあります。
特に焦ったのが,A-Frameの癖でした。A-Frameを別のページに埋め込んだ場合,
iOS環境でVRモードがうまくフルスクリーンにならないようです。
このコンテンツでは,VRモードへの切り替えのイベントを捕捉し,
より強力にフルスクリーンになるように設定を変更させています。
なお,表示の領域がおかしい場合は,画面の向きの縦横を切り替えると改善されます。


<参考にした記事>
A-Frame 全般の参考 : 新しいWebVRフレームワークA-Frame入門
gltfファイルの読み込み :https://threejs.org/docs/#examples/loaders/GLTFLoader
バウンディングボックスの取得 : JavaScript – Three.js compute bounding box of Object3D with BufferGeometry
ブラウザの判定 : 使用してるブラウザを判定したい
マウス移動イベント : マウス移動イベントを利用した画像のドラック移動
Surface の画面タッチ : タッチスクリーン操作について
iOSでのフルスクリーン化改善 : Display helpful message (to rotate orientation twice) when loading a scene in iOS/Safari in Landscape Mode
A-FrameでのVRモードへの切り替えの捕捉 : Javascript – How to detect when user enters in VR mode
Viewport単位 : 知らないと損!CSSのvh/vwの使いこなしでレスポンシブなサイト制作が捗る

ラティス・テクノロジー株式会社のエンジニアです。2016年度新卒入社。
主にTP製品 (Excel帳票出力など) の開発担当をしています。
音のディジタル信号処理で博士(工学)を取得しました。
博士課程にて大量かつ正確にデータ処理する面白さに目覚め、
音信号の1次元の世界から3次元の世界に飛び込んできました。
近年は、子育てとのワークライフバランスのSDGsに邁進しています。

記事一覧

関連記事

XVLとはどんな技術か?②

前回に引き続き、技術者目線でXVLについてご紹介します。今回のテーマは「XVLはなぜ軽くできるのか?」です。形状データの軽量化いきなりディープな内容になるのも…

CADとBOMとPLM

今回は「CAD」「BOM」「PLM」についての話しです。ラティスの製品、ソリューション、事業戦略について話すとき、もはやこれらの言葉を抜きにしては語れません。互いに…