WordPressプラグインのCanvasio3D Light (3Dviewer)を使ってみる。

3Dデータを自分のブログで余すところなく見てもらいたい!と考えている人は少なからず?いると思います。

色々調査してみると、WordpressのプラグインCanvasio3D Lightを見つけました。Canvasio3D Lightは3Dモデルのビュアーとして使えます。しかも無料です

では、どんな感じで表示できるかというと以下の通り。

パソコンはもちろんのこと、スマホでもグリグリできて面白いです。新たなブログコンテンツとして、ときめきを感じるのは私だけではないはず。

導入から使用まで
さて、今回は私の忘備録を兼ねて、Canvasio3D Lightの導入から使用までと設定まで公式HPを参照しつつ、インストールから実際に使用するまでをまとめてみました。

① WordPressのプラグイン⇒新規追加⇒Canvasio3D Lightを検索し、インストール&有効化

② メディア⇒新規追加⇒3Dファイル(形式:stl/ Three- .js / .obj & .mtl / .dae)をアップロード

③ アップロードした3DファイルのURLをコピーしておく

④ 3Dビュアーを追加したい記事を作成or編集⇒ツールバーに追加された[3D]マークをクリック

⑤ プレビューを表示して、3Dビュアーの確認

これで、導入は完了したかと思います。デフォルトでは上のように表示されます。

このままでは、「Canvasio3D」とロゴが表示されていると思います。

objPath=”…”に先ほどコピーした3DモデルのURLをペーストすると、モデルが表示されると思います。

ただ、表示がイマイチではないでしょうか?なんか小さいし、色が真っ黒で形状がわかりません。ここから見やすくするために、設定について説明します。

各Shortcodeの解説

Canvasio3D Lightでは、shortcodeによって表示の仕方をいろいろ変更します。公式HPには英語ではありますが、各Shortcodeが説明してあります。忘備録がてらそれぞれを検証してみたので、下記にまとめてみます。

width=" " :ウインドウの横幅 最大940px?
height=" " :ウインドウの縦幅 最大940px?)
text=" " :テキスト表示。※うまく使えませんでした
textCol=" " :テキストカラー指定。※うまく使えませんでした
border=" " :フレーム枠の太さ
borderCol=" " :フレームの色
backCol=" " :背景色
dropShadow=" " :フレームの影の大きさ
loadingText=" " :ロード中のテキストの指定
Help=" " :エラーメッセージの表示(on/off)

objPath=" " :3DファイルのURL(フォーマット .stl / Three- .js / .obj & .mtl / .dae )  box, ball, panel, octa, torusでも簡単なモデル表示可能
mousewheel=" " :マウスのホイール使用の有無(on/off)
vector=" " :モデルのワイヤーフレームの表示(on/off)
objScale=" " :モデルサイズのスケール (1が標準)
objCol=" " :モデルの色設定
texturPath=" " :テクスチャ―の指定?STLでは使用不可?
shine=" " :光沢の色 (白推奨?※うまく使えませんでした)
ambient=" "  :輝度の色(白推奨?※うまく使えませんでした)
lightSet=" " :明るさ設定(1~8)
mouse=" " :マウス操作の許可(on/off)
rollMode=" " :モデル回転の設定?※うまく使えませんでした
rollSpeedH=" ":水平方向の回転速度(1~20)※うまく使えませんでした
rollSpeedV=" " :垂直方向の回転速度(1~20)※うまく使えませんでした
zoom=" " :モデルの初期ズーム
floor=" " :床の表示(on/off)
floorHeight=" " :床の高さ (デフォルト:42)
reflection=" " :反射に映り込む絵の設定(選択可能: fire, marvel, points, ruge, silver, spot, stars, water, shine1, shine2, shine3 )
refVal=" " :反射の強さ(1-10)
objShadow=" " :物体の影(Onか空白)
lightRotate=" " :ライトの回転(Onか空白)

このように非常に多くの設定ができます。一部、使い方がわからなかった設定項目もありましたが、たぶん記述方法がおかしいだけだと思いますので、今後正しく使えるようになったら追記していきます。

私の表示設定

念のため、私の設定を晒しておきます。何かの参考になれば幸いです。

objPathに適当なモデルを設定すると、以下のように見えます。

今後も、面白ツールのCanvasio3D liteを活用していこうと思います!

スポンサーリンク

スポンサーリンク