WordPressに3Dデータを表示する
WordPressで3Dプリンタの記事とかを書いていると、記事中に3Dデータを挿入したくなります。画像ではなく読者が自由に回転させられる状態で表示したい。
ドラッグで回転、マウスホイールで前後に移動できます
WordPressの3Dデータ表示プラグインはいくつかあるようですが、プラグインページの情報によると、最も多く使われているのが「Canvasio3D Light」です。無料。
"Light"というからにはProバージョンもあります。とりあえず普通に表示させるだけならLightで十分だと思います。
公式ドキュメントによるとデータフォーマットはSTL,OBJ＆MTL、glTFおよびGLBに対応しているそうです。私はSTLで使用。
Canvasio3D Lightを紹介したブログもいくつかありますが、どうも今のバージョンとは使い方がちょっと違うようなので、自分のメモ代わりに残します。
といってもほぼ公式ドキュメントのまんまです。
プラグインのインストール
step
1WordPressの管理画面で[プラグイン]＞[新規追加]を選択
step
2「Canvasio3D Light」を検索
step
3インストールと有効化を行う
3Dデータを投稿する
step
1あらかじめアップロードしたい3Dデータをzip圧縮しておく
データがひとつの場合はそのままzip圧縮可。複数データをまとめて表示したいときにはフォルダに入れて圧縮しておく
step
2WordPressの管理画面で[投稿]＞[新規追加を選択]、あるいは既存の記事の編集画面に入る
step
3編集画面の下の方に「Canvasio3D Options」という機能が追加されている
表示されていない場合には，インストールか有効化に失敗していることが考えられます
step
4「New Scene」をクリック
Canvasio3Dでは、表示するデータと表示設定の組み合わせを"Scene"として登録。このSceneをショートコードで記事中に貼り込みます
step
5[Model Settings]のアイコンをクリック
step
63D Object Upload(zip)ボタンをクリック
あらかじめzip圧縮したデータをアップロードする
step
1表示のサイズ、位置を調整する
・Size欄かスライダーで表示の大きさを設定する
Size欄に数値を入れた場合はTabキーを押すと反映されます
・Down | Upで位置を調整
・Auto Rotationボタンで自動回転表示の有無を設定
step
1"Scene Manager"ボタンをクリック
step
1"Save Scene"ボタンをクリックして、シーンを保存
step
1ショートコードが表示されるのでテキストを選択してコピー
step
13Dデータを挿入したい場所にショートコードを貼り付ける
これで3Dデータが表示できました
保存したシーンは、Scene Selectから選ぶことで他の記事で使い回すこともできます。