ホームページに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」をクリックすると埋め込みコードが表示されるので、当該コードをコピーしてホームページの表示したい場所に貼り付ければ完了です。

Open Street MapはGoogle Mapの代替案となりえるのか

2018年7月16日よりgooglemapの仕様変更に伴ってgooglemapAPIを使って呼び出している地図(カスタマイズを施しているものを含む)を表示するにはAPIキーとお支払い情報の設定が必須となりました。 このこ…続きを読む

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

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

WEB制作お役立ちツール1 (人型アイコン、アバター画像作成)

WEBサイト制作では、暫定的に使う、いわゆる「アテ」画像がほしいときがあります。 一言でアテといっても、写真ぽいアテ、無地画像のアテなど案件によって様々です。 このような画像は「ダミー画像」などで検索するとたくさん出てく…続きを読む

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

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

画像をグループでソート、クリックでライトボックス表示し、かつjquery3.xに対応させる

サイト内で複数の画像をまとめて表示するときに項目でソートできるjqueryのプラグイン「Shuffle.js」。 まずはデモページをご覧ください Shuffle.jsCategorize, sort, and filte…続きを読む

もっともっとモックアップを活用しよう 1

candle-mock-up

Mockup(モックアップ ※模型の意)とはデザインなどの現場で使われる手法の一つで、作成過程で完成イメージをビジュアル的に確認するために使われるもので、プレゼンテーションやブランディングイメージ作成シーンに欠かせないも…続きを読む