ホームページに3DCGコンテンツを埋め込んでブラウザでグリグリ動かす1

3D

3DCGコンテンツの埋め込み方法としては、

1、sketchfabという3DCGデータ投稿・共有サービスを利用してサクッと埋め込む方法

2、WebGLという 3DCGをレンダリングするためのJavaScript APIとWebGLを簡単に扱うためのJavaScriptライブラリを使って自分で実装する

3、その他の方法で実装する

が考えられますが、
今回は難度順に考えて明らかにお手軽な1の方法で埋め込んでみたいと思います。

↓こういうふうに表示されます。ドラッグして動かせます。
※後になってスマートフォンで確認したところ、なぜか3Dコンテンツ埋め込み部分がうまく表示されてません。
androidのchromeでは粗いモザイク状になってしまいました。
どうもレンダリングがうまくいってないような感じですね。
うーん、なぜなのか。モバイル端末のブラウザはレンダリングエンジンとかに大きな違いがあるんでしょうか・・・。

今回は表示確認も兼ねているので、簡単なコンテンツですが当サイトのマスコットであるUFOをテクスチャなしで埋め込んでみました。

ちなみに1の方法のメリットとデメリットとしては、

・メリット
ウェブ制作に関する知識(html、css、js、php、など)がほぼ不要。
手間がかからない。

・デメリット
外部サービス(sketchfab)を使用するので、sketchfabのロゴなどが表示される。今後のサービス継続の保証がない。
sketchfabのアカウント作成が必要。
3DCGコンテンツを公開しなければならない(有料会員は限定公開にすることもできるようです。)

といったところでしょうか。
自分のサイトやブログに埋め込む場合にはたいしたデメリットではないですが、WEB製作者が仕事として受ける場合にはsketchfabのロゴが表示されることや3DCGコンテンツを公開しなければならないことは、使い方によっては嫌がられるかもしれません。

ではやってみましょう。

1、3DCGコンテンツファイルの準備
※3DCGコンテンツを埋め込むわけですから当然必要です。
※sketchfabは多くの3DCGファイル形式に対応しているので有名どころのファイルであればだいたい大丈夫だとおもいます。
※今回は汎用的なwave front obj(.obj)形式を用意しました。
※テクスチャファイルがある場合には一緒に準備しておきましょう。

2、sketchfabのアカウント作成
sketchfabにアクセスし、右上の「sign up」ボタンをクリック

「ユーザーネーム」、「メールアドレス」、「パスワード」を入力

「create acount」ボタンをクリック

登録メールアドレスにメールが届くので、メール内のリンクをクリックして確認する

右上の「upload」ボタンをクリック

3DCGファイルの選択ダイアログが出るので、アップロードしたいファイルを選択する

「continue」ボタンをクリック

これでアップロードは完了です。

3、公開する内容を入力する
アップロード後、3DCGコンテンツのタイトルや説明、カテゴリー、公開の可否(無料アカウントでは選択できない)、ダウンロードの可否などを設定します。

4、3DCGコンテンツの表示に関する設定を編集する
アップロードしたコンテンツのページや埋込時にどのように表示するかを編集することができます。
編集できる項目はけっこう多いので面倒であればデフォルトでもいいとは思いますが、背景や光源、カメラ位置などは変更しておいたほうが見栄えが良くなります。(いずれにしても後で変更可能です。)

5、埋め込みコードを取得して貼り付ける。
埋め込みたい3DCGコンテンツの専用ページのビューの下部、タイトルとユーザーアカウントの下の「embed」をクリックすると埋め込みコードが表示されるので、当該コードをコピーしてホームページの表示したい場所に貼り付ければ完了です。

DNSサーバーを切り替える前に切り替えた後の表示を確認する方法

理由は様々ですが、既存のホームページをまるごと他のサーバーに移転したいとのご依頼を承ることがあります。 通常の静的なサイトの移転でドメインが変わらない場合には基本的にサーバーに置いてあるフォルダ・ファイル群を古いサーバー…続きを読む

OSやブラウザで表示に違いが出てしまう絵文字を絵文字フォントで代替する

ブログの記事などで絵文字を使いたいなという場面がありますが、絵文字はOSやブラウザなどの環境によって表現に違いがあったりなどはまだいい方で、最悪表示されないことも想定しなければならないのが困るところです。&#x1F617…続きを読む

CSSだけで実装できる! スクロールした時に画像以外のコンテンツを挟んで背景画像を切り替える方法

タイトルを読んだだけではイマイチ分かりにくいので、下記デモページをご覧ください。 デモページを見る ご確認いただけましたか?そうです、よく見かけるやつです。 ※ただこの方法、ものすごく簡単なんですがスマートフォン(多分タ…続きを読む

プラグインに頼らないでワードプレスを移転する。ドメイン変更対応

最近はサイト内にワードプレスが設置されている、またはサイト自体がワードプレスでできている、ということが多くなってきました。 それに伴って、当然のことながらサイトを設置しているサーバーの移転にはワードプレスの移転も含まれる…続きを読む

よく使うワードプレスのphp関数スニペット。随時追加

しょっちゅう使うわけではないけれど、ワードプレスを使うサイトが多くなってきたことに伴い使う頻度は増えてきたワードプレスの関数をその都度調べて記述するのもめんどくさくなってきたのでまとめてみました。 ● まずは、htmlフ…続きを読む

Google fontsで日本語Webフォントの正式版がリリースされたらしいので試してみた

typography

いままでもGoogle fontsは「Google Fonts + 日本語早期アクセス」として日本語WEBフォントを無料で提供していましたが、今回正式に8種類の日本語WEBフォントがリリースされたようです。 Google…続きを読む