Three.jsでWebGL(2) - CSS3DRendererを使ってみる -

three.jsのCSS 3D Transformのサンプルを参考に１５パズルを作成してみました。

参考ソース：
http://threejs.org/examples/#css3d_periodictable
http://minimal.be/lab/Sprite3D/examples/slideExampleFixed.html

CSS3DRenderの読み込み

three.jsのソースにあるexamples/js/renderers/CSS3DRenderer.jsをhtmlに追加
`

`

CSS3DRendererの作成

THREE.WebGLRendererの代わりにTHREE.CSS3DRendererを使う
renderer = new THREE.CSS3DRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); // 描画領域 renderer.domElement.style.position = 'absolute'; // スタイル設定 {position:absolute} document.getElementById('container').appendChild(renderer.domElement); // 描画領域を#containerにappend

オブジェクトの追加

WebGLの場合はPlaneGeometryやMeshを使いましたが、CSS3DRendererの場合はDOMとTHREE.CSS3DObjectを使うようです
たとえばスタイルファイルに
.box { background: url("img/enikki.png"); width: 126px; height: 126px; }
としてから
// DOM作成 var dom = document.createElement('div'); dom.className = "box"; // object作成 var object = new THREE.CSS3DObject(dom);
とすると、縦126px,横128pxの画像ファイルのオブジェクトが作成できます。

分割画像を作る場合

上記DOMを読み込むときにbackgroundPosition属性で
dom.style.backgroundPosition = "-" + px + "px -" + py + "px";
と設定すると画像の左上から(px,py)から縦126px,横128pxをオブジェクトにすることができます

パズル作成

15パズルあたりで検索するとソースはいっぱい出てくるので、詳しい内容は省略

• 画像を15分割してそれぞれをオブジェクト化
• オブジェクトをクリック時イベントを登録、three.jsは↓こんな感じで楽チン
  dom.addEventListener("click", onPieceTouched, false); dom.addEventListener("touchstart", onPieceTouched, false);
• クリック時にブロックの位置を入れ替え
• 画像が元に戻ったら終了

サンプル
http://odorumaharaja.github.io/test/webgl_02.html

こんな感じでできました。

題名がWebGLなのにWebGLを使ってないという矛盾...