three.jsでブラウザに3Dモデルを表示 

サイト改装以来、ずっと準備中だった
リアルタイムVR系サンプルの制作に着手しました、、、
いや、制作と言うより、
導入に向けた事前トライアルって感じです。

実のところリアルタイムVR系は、
Unreal Engine 4でやりたくて勉強していたんですが、
3Dコンテンツをブラウザ向けに出力するのは、
まだ時期尚早のような感じがしまして、、、

一番の条件であるブラウザで見れることを前提に、
とりあえず内観はパノラマVRでいくとして、
立体物の表示に使える技術はないかとネットで検索、、、

そんな状況で目に留まったのが「three.js」
似たようなサービスは幾つか存在しますが、
自前のサーバーで運用できるのは、
今のところコレしか無さそうですよね、、、
(コレを上回る良いのが有りましたら教えてください)

そんな理由で久しぶりにコードと格闘、、、
アプリになっていればサッと終わる設定に何時間も費やし、
自問自答を繰り返す、、、費用対効果どうなの?

サンプルコードを幾つも試す中、
やっとできたのが、自作モデルの読み込みと表示、、、

http://www.subgrid.jp/threejstest/threetest-170307.html

上記のリンクで什器の3D表示がご覧になれます。
テクスチャー無しのスッピンで、前半分しか見れませんが、
コード記述だと、本当に時間が掛かります。

モバイル系ブラウザへの表示が肝なんですが、
手持ちのiPhone5、初代iPad Airでは、
表示はしますが、カメラが動きませんでした。
何かコードが抜けているんですかね?

次回はこの問題解決をレポートしたいと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です