今見てくれてる人の数

ホンキートンク・スーダラブルース

ゆるコラム、oF、邦ロックや歌謡曲、小説の感想。ドラクエ、JavaScript、ドラゴンボール超など。湘南あたりを転がってる石コロのゆるゆる生きてく超雑多な軌跡です。

【WebVR日記1】コード0行。スマホで撮影した写真をブラウザで3Dモデル化して見る方法!

f:id:sudara_bluse:20171029074427p:plain

 

こんな感じになります。

制作方法はこちら

 

f:id:sudara_bluse:20171029134513p:plain

 

プロローグ。WebVRに興味を持った。

先日、ヨドバシカメラでVRゴーグルを購入しました。

(税込1170円にしては、そこそこの装着感でGOODでした。)

 

f:id:sudara_bluse:20171029070746j:plain

購入の理由は、WebVRを作ってみたいと思い立ったからです。

 

実は以前、VRシューティングゲームが作りたくて

Unityでこっそり研究開発おこなっていました。。

qiita.com

 

熱が冷めてしばらくしていた昨今、

「WebVR」という言葉をよく耳にするようになり、

ブラウザでJSで作れたら、

アプリのインストールいらないし手軽だなと魅力に思いました。

サンプルも見てみたら、さくさく動いています。

webVRサンプル|CardboardClub

f:id:sudara_bluse:20171029132737p:plain

 

 

 

 

しかし、Three.jsをゴリッゴリに書くのかな。。。と思っていたら、

なんとHTMLタグでシーンを作成できるA-Frameとやらが出ていたので、

こちらを後日学んで行きたいと思った次第です。

qiita.com

 

しかしまずはコード書かないで、

VRゴーグルでゆる〜く遊びたい!!

なんかないかな。。思いついた!

 

 

今回はまず、スマホで撮影した普通の写真をVRゴーグルでブラウザで見ます!(簡易版)

 

友人やペットの写真なんかを3D化してVRゴーグルで見たら面白そうだなと思い挑戦しました!

 

ブラウザ上でOK。Smoothie-3Dで、写真を簡易3Dモデル化する。

Smoothie-3D

こちらの記事を参考に、写真を3dモデル化してみてください。簡単です!

plus.appgiga.jp

 

(ログイン→new project → image → add から写真を追加。→パーツごとになぞる→左上の四角のエリアでドラッグしてカメラの視点を変えて確認。)
ブラウザ上でサクッとできます。

 

コツはパーツごとになぞることです。

f:id:sudara_bluse:20171029075119p:plain


フリー素材の人でやってみたのですがイマイチ。。
もうちょっと薄くしたい。けどわからない。

f:id:sudara_bluse:20171029075204p:plain

結局、フリー素材のワンコにしました。

 

完成したらエクスポート→obj形式で書き出します。

すると

.mtl

.obj

texture_xxxxxxx.jpg

の3ファイルが生成されるので、これを1フォルダにしまい、

dog.zipなどに圧縮して1ファイルにします。

 

下手なので、荒いですが、適当になぞっただけで、

こんな感じでモデリングされます。

f:id:sudara_bluse:20171029080037p:plain

 

 

VRゴーグルで見るために、3DモデルのSNS。sketchfabで公開。

mikaninc.com


VRで見るために、sketchfabというサービスに登録します。

(他SNSアカウントで登録できます。)

Log in to your Sketchfab account - Sketchfab

 

ログインしたら、先ほどのzipファイルをアップロードします。

(ちゃんと3ファイル入ってないと変な状態になります。)

 

お好みで、背景の選択などをします。(草原や公園など)

よくわかりませんがレンダリングの設定などもできるみたい。

f:id:sudara_bluse:20171029080347p:plain

「これでよし!」と思ったら、PUBLISHボタンで公開します!

するとURLが発行されます!

 

あとはスマホでそのURLにアクセスし、

このVRモードボタンをクリック!

f:id:sudara_bluse:20171029080635p:plain

 

こんな画面になりますので、お手持ちのゴーグルにセットして360度でお楽しみくだささい!

 

f:id:sudara_bluse:20171029134513p:plain

 

以上です!

クオリティはモデリング次第ですが、

友人の誕生日やちょっとしたサプライズにも使えるのでは?

 

次回はコード書いてA-Frame入門するぞ!

 

完。