【CG】FBX形式の3Dデータを簡単にビューイング出来るWORDPRESSプラグインを作ろう【Three.js】
まあ既存でこういうプラグインなんてなんぼでもあるのでしょうけど、気晴らしに自作してみました。
結論を先にいうと記事中に[view3d path=”hoge.fbx”]って書くだけで3D表示ができちゃうプラグインを作ったというお話です。
ソースコード一式は公開していますのでお好きに持っていってください。
きっかけは、Cities: Skylines向けにMODを作っていて、3D図形データを公開しているのはご存知いただいていると思いますがダウンロードページなどに3Dビューを埋め込みたいな。って思ったのが始まりです。
候補として有名サイトのSketchFabに目をつけたのですが、無料プランだと30日に1作品の公開が上限なので正直実用的ではない。
そこで「もう自分で作るわ!」と思って、簡単に行けそうな&興味が結構あって少しだけ所用でプログラムしたことがあるThree.jsを使うことを検討しました。
割と簡単に実装できて、しかも拡張も好き勝手にできるので実用性もあるなと判断しました。
もう少しUI改善は入れる予定です。例えば以下のような項目です
・オプションの追加。幅、高さ、カメラ設定(移動速度、FOV)とか。
・[設定]画面でファイルアップロードや削除が出来るようなメンテナンス。
・WORDPRESSプラグインへの公開。
使い方
説明はFBXファイル名が「samplebuilding.fbx」を使うていで話を進めていきます。
対象
・プラグインを開発したことはないけど、wp-content\Pluginsフォルダの中身やファイル構成をチラッとでも見たことがある方。
・FTPで自分でアップロードとか出来る方。(→WORDPRESSプラグイン公式への公開は今後検討します。)
準備
・プラグインのソースコードをダウンロード
まずGitHubでソースコードを持ってきます。
https://github.com/christinayan01/Yanai-3D-Viewing
自分のサーバーにアップロード
自分のレンタルサーバーなどにアクセスし、WORDPRESSウェブサイトのフォルダに移動します。
プラグインはwp-content\pluginsというフォルダにあります。今までインストールしてきたプラグインがいっぱい入っていると思います。
このフォルダにview3dフォルダをアップロードします。方法はFTPとかWEBDAVとか。
WORDPRESSに戻って、wp-adminでログインします
[プラグイン]→[インストール済プラグイン]を開くと、Yanai 3D Viewingというのがが増えています。有効化しましょう。
FBXファイルを配置
wp-content\plugins\view3d フォルダの中に data フォルダがあります。この中にファイルを放り込んでください。
テクスチャのファイル名に気をつけてください。ルールがあります。
FBXファイルと同じ名前に接尾語をつけます。ベースカラーマップは/b>_d、ノーマルマップは_n、・・・みたいな感じです。5種類のマップが使えます。
(例)3D図形ファイル名が「samplebuilding.fbx」だったら、
ベースカラー | samplebuilding_d.png |
ノーマル | samplebuilding_n.png |
ラフネス | samplebuilding_r.png |
メタリック | samplebuilding_m.png |
アルファ | samplebuilding_a.png |
備考:Cities: Skylinesと同じルールにしています。(尚このあたりの手順が易しくなくてゴメンナサイ!)
これで準備OK。
記述方法
記事中の表示したい位置に [view3d path=”samplebuilding.fbx”] と書きます。(「[」と「]」は半角です。)
作り方
ここからは興味がある方だけになります。
・Three.jsライブラリをダウンロードします。
・サンプルがめちゃめちゃ豊富なので経験者はまず困らないと思います。
今回はPBR/MaterialのHTMLソースをベースに作成しています。
・WORDPRESS
すみませんSSL化したら問題なく使えました
大変失礼しました