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