Web開発できなくても大丈夫。Rhino/Grasshopperで作ったモデルをWebで超簡単に公開する ― PlayCanvasを使ってみる

RhinoやGrasshopperで作った3Dモデル、せっかくならWebで誰かに共有したくなること、ありませんか？
でも「Web表示＝コードを書く」みたいなイメージがあって、手が止まってしまう人も多いと思います。特に、Three.jsやBabylon.jsなどのWebGL系は勉強するのも大変そう、そう思ってしまい最初の一歩が重たいくなるのではないでしょうか。

実際、私は普段コードでThree.jsやReactを使って開発していますが、複雑なUIやインタラクションを作るならともかく、「とりあえず3Dモデルを表示したい、単純なWeb Viewer」なら、そこまでやらなくて大丈夫です。

Three.jsを使った表示も私の個人のブログで紹介もしてますが、ビューアーだけならこんなことする必要はありません。

今回は、「Web開発の知識がなくてもGrasshopperのモデルを簡単にWebで共有できる方法」を紹介します。

使うのはPlayCanvas。
これは、Webベースの3Dゲームエンジンですが、GUIでモデルをアップロード・配置・公開までできる便利なサービスです。
アカウント登録さえすれば、コードを書かずにあらゆる形式のファイルをブラウザで見せるビューアーが作れ、プロジェクト数などの制限はありますが無料枠もあります。

「Webってよくわかんないけど、モデルを共有したい」
そんな人にこそ使ってみてほしい、“もっとも簡単な、Rhino/Grasshopper→Web表示の手段”の1つだと思います。

✅モデルの準備

モデルの準備をしましょう。
何でもいいのですが、今回はGrasshopperで作成した以下の画像のようなオブジェクトになります。

まずはWebで表示できる形式でExportしていきましょう。
「ファイル > 選択オブジェクトをエクスポート > .fbx形式でExportしてください」
FBXエクスポートオプションを聞かれますが、そのままの設定でOKします。

✅読むのめんどくさい人

ここから先はPlaycanvas運営事務局のYouTube動画とほとんど内容が同じなので、動画が良い方はこちらに運営事務局の動画張っときます。

✅Playcanvasの準備

こちらのPlayCanvasのリンクからアカウントを作成してください。
アカウントを作成したらしたらプロジェクトを作成します。

その後、右上のNewを押します。

Model Viewerを選んでCREATEします。

Editorを押して編集画面を開きます。

このように初期状態で、カメラ・ライト・Cubeオブジェクトが配置されています。
このCubeを自身のモデルに入れ替えます。
下の画像の赤枠部分に先ほどExportした.fbxファイルをドロップします。

こんな感じで追加されました。
以下の画像の赤矢印で示した菱形マークのものを
オレンジのキューブがある空間にドロップします。
オレンジのキューブは選択してDELETEボタンで削除してください。

Lightの位置を調整します。
以下の画像の赤枠内で示している箇所で、Lightを選択し、移動や回転を行うことができます。

逆側が暗いので逆方向からもLightを追加します。
左上＋ボタン、Add EntityからLight > Directional Lightを追加して、先ほど同様位置を調整します。

準備ができたら公開する前に確認してみましょう。右上のLaunchボタンを押すとViewerが起動します。起動したらマウスでカメラを動かしてみましょう。

問題なければ公開してみましょう。
Editorの左下のほうにPublish / Downloadというボタンがあります。

PUBLISH TO PLAYCANVASを選択します。

一番下までスクロールしてPUBLISH NOWを選んで公開します。

Exitsing buildsから先ほど公開したものを選んで閲覧できます。

あとはこのリンクをお友達に送るなりなんなりしてください。

以上

▼関連リンク