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

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

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

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

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

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

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

facerigや3teneで動かせるようにLive2Dでモーションをつける

デモのため真夜中WEBのマスコットキャラクターを制作してみました。 制作の流れは以下のようになります。 ① ペイント系ソフトでキャラクターのイラストを制作して画像エクスポートする。 ② 画像編集ソフトで画像をインポートし…続きを読む

ユーザビリティ向上のためにサイトの表示スピードを改善する

highway

真夜中WEBがコンセプトとして掲げる3つの要素に「軽さ」があります。 軽さとは、サイトを構成するhtmlやcss、javascript、php、画像などのファイル群自体の容量の小ささを言いますが、このことだけにとどまらず…続きを読む

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

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