three.jsを少し触ってみたのでテクスチャを利用する際のメモ
次世代Canvasとも言える、WebGLを簡単に扱うことができる、three.jsを少しだけ触ってみたのでメモです。
インストールから初期設定、簡単なサンプルの実行までは、既に詳細に分かりやすく説明されている記事がありますので、そちらをご覧頂ければと思います。
※「THREE.CubeGeometry」は「THREE.BoxGeometry」に名称変更されている様なので注意。
画像をテクスチャとして貼る
画像をテクスチャとして貼る場合は、「THREE.ImageUtils.loadTexture」で読み込んで、Materialに貼り付けます。
// 立方体を用意
var geometry = new THREE.BoxGeometry( 30, 30, 30 );
// 画像を読み込む
var texture = THREE.ImageUtils.loadTexture( 'path/to/image.jpg' );
// マテリアルに画像を貼る
var material = new THREE.MeshPhongMaterial( { map: texture } );
// オブジェクトを生成
var mesh = new THREE.mesh( geometry, material );
動画をテクスチャとして貼る
テクスチャに動画も簡単に利用することが可能です。
ただし、動画の再生にはHTML5のvideoタグを利用するので、スマホでは再生されないので注意です。
// 立方体を用意
var geometry = new THREE.BoxGeometry( 30, 30, 30 );
// videoタグの用意
var video = document.createElement( 'video' );
video.src = 'path/to/video.mp4';
video.load();
video.play();
// three.js用のテクスチャに変換
var texture = new THREE.VideoTexture( video );
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;
// マテリアルに動画を貼る
var material = new THREE.MeshPhongMaterial( { map: texture } );
// オブジェクトを生成
var mesh = new THREE.mesh( geometry, material );
雑感
今までずっとFlashやCanvas等で2Dを触ってきたので3Dには少し抵抗感がありましたが、思っていたよりも簡単に触ることが出来ました。
また、WebGLのパフォーマンスもかなり高く、スマホでも思った以上にヌルヌル動くので、今後もっと3Dのコンテンツが出てくるのでは無いかと思いました。
また、まだ基本のマテリアルを使ったテストしかしていないので、モデルを使ったコンテンツも作ってみたいなぁと思います。