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

WordPress

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

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

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

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

決まってるでしょう!

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

ということで、

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

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

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

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

0.概要

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

1.使用したもの

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

ロリポップ!レンタルサーバー
【WordPressの表示速度No.1】のレンタルサーバー「ロリポップ!」月額550円から高速WordPressが使える!初期費用・ドメインも無料!今すぐ10日間の無料お試し

・WordPress 4.9.8

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

・テーマ Hueman

Hueman
The Hueman theme loads fast and is 100% mobile-friendly according to Google. One of the best rated theme for blogs and magazines on WordPress.org. Powering 70K+...

・canvasio3D Light

canvasio3D Light
Canvasio3D Light shows your own 3D Models with 360° support in your WordPress website for 3D-Printing & Architects & Engineers & 3D Arts o …

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配信をしています。リアルタイムの勉強の様子を見てみたい方におすすめです!(^^)!

水中ドローンとUnityのお部屋|SHOWROOM(ショールーム)
水中ドローンとUnityの配信をメインにします(*^^*)たまにおやつ配信やおしゃべり配信します(*^^*)

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

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

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

コメント

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