Three.jsでYouTube動画のオブジェクトを作成する

Three.js（r74）でYouTube動画をマテリアルとして使えないかと調べたが方法が見つからない。代わりに、平面オブジェクトとして作成する方法はわかったので、その内容をまとめる。簡単に言うと、divエレメントを作成し、それにYouTubeのHTML用埋め込みコード（iframeエレメント）を追加。divエレメントからTHREE.CSS3DObjectでオブジェクトを作成する。レンダラーはTHREE.WebGLRendererではなくTHREE.CSS3DRendererで作成する。以下はその手順。

１．CSS3DRenderer.jsのコピー
CSS3DRenderer.jsはThree.jsのサイトからダウンロードしたファイルに含まれている。ファイルを解凍して以下の場所にあるCSS3DRenderer.jsを適当な場所にコピーする。ここではjsというフォルダにコピー。
\three.js-master\examples\js\renderers

２．CSS3DRenderer.jsの読み込み
HTMLでCSS3DRenderer.jsを読み込む。

３．YouTubeのHTML用埋め込みコードの取得
YouTubeで使いたい動画を開き、動画の下にある［共有］＞［埋め込みコード］をクリッすると、HTML用の埋め込みコードが表示される。「src="..."」のダブルクォーテーションで囲まれた箇所をコピーする。

４．レンダラーの作成
THREE.CSS3DRendererでレンダラーを作成する。

// THREE.CSS3DRendererでレンダラーを作成
var renderer = new THREE.CSS3DRenderer();
// レンダラーが描画するキャンバスサイズの設定
renderer.setSize( window.innerWidth, window.innerHeight );
// キャンバスをDOMツリーに追加
document.body.appendChild( renderer.domElement );

５．エレメントの作成
divエレメントとiframeエレメントを作成し、iframe.srcにコピーしておいたYouTube動画へのリンク設定する。そしてdivエレメントの子エレメントとしてiframeエレメントを追加する。

// divエレメント作成
var div = document.createElement( 'div' );
div.style.width = '480px';
div.style.height = '180px';
div.style.backgroundColor = '#000';

// iframeエレメント作成
var iframe = document.createElement( 'iframe' );
iframe.style.width = '240px';
iframe.style.height = '180px';
iframe.style.border = '0px';

// iframeエレメントのsrcにYouTube動画を指定
iframe.src = 'https://www.youtube.com/embed/rD5yoLWPR5w?rel=0&controls=0&showinfo=0';
// divエレメントの子エレメントとしてiframeエレメントを追加
div.appendChild( iframe );

var iframe2 = document.createElement( 'iframe' );
iframe2.style.width = '240px';
iframe2.style.height = '180px';
iframe2.style.border = '0px';
iframe2.src = 'https://www.youtube.com/embed/GZcLdvm_6lA?rel=0&controls=0&showinfo=0';
div.appendChild( iframe2 );

６．オブジェクトの作成
THREE.CSS3DObjectでオブジェクトを作成する。

// THREE.CSS3DObjectインスタンス作成
var object = new THREE.CSS3DObject( div );
// オブジェクトをシーンに追加
scene.add( object );

Three.jsを使うのに必要な他のコードを追加すると、以下のようなオブジェクトが作成される。

・サンプルの表示