【WordPress】3Dモデルを表示する方法

WordPress

【やりたいこと】WordPressで自作の3Dモデルを表示させたい!

3Dモデルの作成は、だれでもできる世の中になってきましたね。

BlenderやFusion360など、3Dモデル作成ソフトが無料で使用できるため、パソコンさえあれば、簡単に作成できるようになってきました。

では、自作3Dモデルを作れるようになった、次にやることはなんでしょうか。

決まってるでしょう!

みんなに見てもらいましょう!(^^)!

ということで、

今回は、3Dモデルを自分のWordPressのサイト(ブログ)に表示させる方法です(^^)/

※今回の記事では、3Dモデルの色を反映させることはできませんでした。

【10分でできる!】自作3Dモデルの表示

※ダウンロード時間は10分の中に含まれていません。

0.概要

「canvasio3D Light」というプラグインを使用し、fusion360で作成した3Dモデル(obj)を表示します。

1.使用したもの

・ロリポップレンタルサーバー スタンダードプラン

ロリポップ!レンタルサーバー
ホームページ運営なら、ずっと使えるレンタルサーバー「ロリポップ!」簡単、多機能、充実サポート、高速性能で、初心者から商用サイトまで安心してご利用いただけます。WordPress、EC-CUBEもたったの60秒で設置可能。まずは無料お試し10日間。

・WordPress 4.9.8

※WordPressはロリポップユーザー専用ページからインストールしました。

・テーマ Hueman

Hueman – WordPress テーマ | WordPress.org
Free WordPress Themes

・canvasio3D Light

canvasio3D Light
3D Plugin for WordPress - Shows easily your 3D-Models with WebGL in the format: .stl .obj .dae

2.手順

①プラグインcanvasio3D Lightのインストール

プラグインの新規追加をクリックします。

canvasio3D Lightを検索し、インストールします。

インストール後、有効化にします。

②3Dモデルの追加

メディアの新規追加をクリックします。

3Dモデル(obj)を追加します。

3Dモデルのデータ形式は、OBJかSTLにする。

③3Dモデルの表示

固定ページをクリックし、ビジュアルエディターを表示させます。

3Dアイコンをクリックします。すると、上記の画像のように、記述されます。

ビジュアルエディターとは、本文を記入するところ

「objPath=”゙…”」の「」の部分を選択した状態にし、メディアを追加をクリックします。

②でダウンロードした3Dモデルのデータを選択し、固定ページに挿入をクリックします。

上記の画像のように、表示されていれば成功です。

では、プレビューをクリックし、実際に3Dモデルが表示されているか確認してみましょう。

3Dモデルは、表示されているものの、3Dモデルの色と背景が同じ色になっていて、見づらくなっています。

3Dモデルの色を変更してみましょう。

④3Dモデルの色を変更

「objColor=”…”」の「…」の部分を上記の画像のように、変更します。

では、もう一度プレビューをクリックし、実際に3Dモデルの色が変更されているか確認しましょう。

「…」の部分には、カラーコードを入れてね(^^♪
上記の画像のように表示されていれば成功です。

3.追記

3Dモデルのマテリアルも反映されていれば、文句なしなのだが。

【最後に】Showroomとマッハ新書の紹介

ShowroomでUnity配信をしています。リアルタイムの勉強の様子を見てみたい方におすすめです!(^^)!

SHOWROOM(ショールーム)
SHOWROOMはアーティストやアイドル、タレント等の配信が無料で視聴でき、さらに誰でもすぐに生配信が可能な、双方向コミュニケーションの仮想ライブ空間です。

以下は、私のUnity学習体験記となっております。

「他人の勉強方法が知りたい」という方におすすめのマッハ新書です!(^^)!

※無料版あり Unity学習100日記念本(0~30日編) - hide21のお店 - BOOTH
Unityの学習をはじめて、 100日が経過しましたので、 これまでのUnity学習の経験をまとめてみました! これからUnityをはじめる人、Unityの勉強が続かなかった人に向けて、書きました。 無料版もありますので、気軽にどうぞ!(^^)!
※無料版あり Unity学習100日記念本(30~60日編) - hide21のお店 - BOOTH
Unityの学習をはじめて、 100日が経過しましたので、 これまでのUnity学習の経験をまとめてみました! 今回は、Unity学習30~60日編です! Unityのスクリプトを読んでみたい人に向けて、書きました。 無料版もありますので、気軽にどうぞ!(^^)!
※無料版あり Unity学習100日記念本(60~100編) - hide21のお店 - BOOTH
Unityの学習をはじめて、 100日が経過しましたので、 これまでのUnity学習の経験をまとめてみました! 今回は、Unity学習60~100日編です! 主に、Unityでのアウトプット法について書きました 無料版もありますので、気軽にどうぞ!(^^)!
※無料版あり Unity学習100日記念本(Progate編) - hide21のお店 - BOOTH
Unityの学習をはじめて、 100日が経過しましたので、 これまでのUnity学習の経験をまとめてみました! 今回は、Unity学習Progate編です! これから、Progateをはじめる人に向けて、書きました。 無料版もありますので、気軽にどうぞ!(^^)!

コメント

タイトルとURLをコピーしました