3D WordPress

Canvasio3D LightプラグインでWordPressブログに3Dデータを表示する

WordPressに3Dデータを表示する

WordPressで3Dプリンタの記事とかを書いていると、記事中に3Dデータを挿入したくなります。画像ではなく読者が自由に回転させられる状態で表示したい。

 

ドラッグで回転、マウスホイールで前後に移動できます

WordPressの3Dデータ表示プラグインはいくつかあるようですが、プラグインページの情報によると、最も多く使われているのが「Canvasio3D Light」です。無料。

"Light"というからにはProバージョンもあります。とりあえず普通に表示させるだけならLightで十分だと思います。

公式ドキュメントによるとデータフォーマットはSTL,OBJ&MTL、glTFおよびGLBに対応しているそうです。私はSTLで使用。

Canvasio3D document

Canvasio3D Lightを紹介したブログもいくつかありますが、どうも今のバージョンとは使い方がちょっと違うようなので、自分のメモ代わりに残します。

といってもほぼ公式ドキュメントのまんまです。

 

プラグインのインストール

 

step
1
WordPressの管理画面で[プラグイン]>[新規追加]を選択

 

step
2
「Canvasio3D Light」を検索

 

step
3
インストールと有効化を行う

 

 

 

3Dデータを投稿する

 

step
1
あらかじめアップロードしたい3Dデータをzip圧縮しておく

データがひとつの場合はそのままzip圧縮可。複数データをまとめて表示したいときにはフォルダに入れて圧縮しておく

 

step
2
WordPressの管理画面で[投稿]>[新規追加を選択]、あるいは既存の記事の編集画面に入る

 

step
3
編集画面の下の方に「Canvasio3D Options」という機能が追加されている

 

表示されていない場合には,インストールか有効化に失敗していることが考えられます

 

 

step
4
「New Scene」をクリック

 

Canvasio3Dでは、表示するデータと表示設定の組み合わせを"Scene"として登録。このSceneをショートコードで記事中に貼り込みます

 

 

step
5
[Model Settings]のアイコンをクリック

 

step
6
3D Object Upload(zip)ボタンをクリック

 

あらかじめzip圧縮したデータをアップロードする

step
1
表示のサイズ、位置を調整する

 

・Size欄かスライダーで表示の大きさを設定する

  Size欄に数値を入れた場合はTabキーを押すと反映されます

・Down | Upで位置を調整

・Auto Rotationボタンで自動回転表示の有無を設定

 

step
1
"Scene Manager"ボタンをクリック

 

step
1
"Save Scene"ボタンをクリックして、シーンを保存

 

step
1
ショートコードが表示されるのでテキストを選択してコピー

 

step
1
3Dデータを挿入したい場所にショートコードを貼り付ける

これで3Dデータが表示できました

保存したシーンは、Scene Selectから選ぶことで他の記事で使い回すこともできます。

-3D, WordPress