canvasで処理した画像をThree.jsのテクスチャとして描画する．

やりたいこと

canvasで画像をclip処理してから，Three.jsで3D空間上に描画したい．

やり方

clip処理はcanvasのclipメソッドで要素を切り取る．

Three.jsのテクスチャでは，img要素，canvas要素，video要素など幅広い要素をマッピングさせることができるの，それを利用する．

書いてみたコード

// canvasを定義する
var imagecanvas = document.createElement('canvas'),
    imagecontext = imagecanvas.getContext('2d');

imagecanvas.width = 350;
imagecanvas.height = 350;

// クリップする円の位置と半径を指定する
imagecontext.beginPath();
imagecontext.arc(175, 175, 175, 0, Math.PI*2, false);
imagecontext.clip();

// 画像を用意する
var img4 = new Image();
img4.src = "image/***.jpg";
img4.onload = function(){
  imagecontext.drawImage(img4, 160, 0, 350, 350, 0, 0, 350, 350);

  // Textureとして指定する．以下Three.jsでよくあるオブジェクト描画と同じ
  var imagetexture = new THREE.Texture(imagecanvas);
  imagetexture.needsUpdate = true; 
  var imagematerial = new THREE.SpriteMaterial( { map: imagetexture, color: 0xffffff } );
  var imagesprite = new THREE.Sprite( imagematerial );
  imagesprite.scale.set(200, 200, 200);
  imagesprite.position.set(0, 0, 0);

  scene.add( imagesprite );
}

画像は読み込んでからでないと描画できないので，onloadで描画しています．

こうすると，onloadメソッドは非同期なのでfor文でループしている時は処理がうまくいかず大変ですが，そんな時は，
image onloadをfor文で回す際の注意-Qiita
これのコメント欄を参考にするといいと思います．

参考ページ

• canvasに画像を描画しよう（トリミングやクリッピングも）-ほんっとにはじめての HTML5
• image onloadをfor文で回す際の注意-Qiita