【Three.js】アニメーションのあるcanvasをテクスチャにして読み込む

前にcanvasの表示ができたので、次にアニメーションの表示をしたい。

[参照] ポイントに合わせてcanvas表示

まずはcanvasアニメーションの表示

順序は
【1】canvasで作ったテクスチャをステージ置く
【1-2】テクスチャ作成
【2】canvasアニメーションを作る
【3】読み込んでアニメーション

くらいになるのではないかと思う。

【1】canvasで作ったテクスチャをステージ置く

まずいきなりココで詰まった。
addしてる気持ちでもステージになにも出てこない。。。
結論はplaneMesh.material.map.needsUpdate = true;がなかったのですが。この子大事ですね。

とりあえず順を追って。

【1-2】テクスチャ作り

今回は最終的にアニメーションでテキストでぐるぐる系作りたいのと、テキストをどう入れるのかお勉強も兼ねてこんなかんじ。
これで

の中にcanvasタグが生成されます。

//キャンバステクスチャ作り
function set_texture() {

  canvas = document.createElement('canvas');
  canvas.width = 64;
  canvas.height = 32;
  textContext = canvas.getContext('2d');
  textContext.font = "20px 'MS Pゴシック'";

  textContext.fillStyle = "rgb(200, 30, 100)";
  textContext.fillText("ぶははは", 0, 20);

  $(".hoge")[0].appendChild(canvas);
}

returnされたテクスチャとplaneGeometoryでMeshを作成する。

  /*  メッシュ作り */
  var geometry = new THREE.PlaneGeometry(6.4, 3.2, 10, 10);
  var material = new THREE.MeshBasicMaterial({
    map: set_texture()//ここに作ってreturnされたtexutureが入る
  });
  planeMesh = new THREE.Mesh(geometry, material);
  planeMesh.material.map.needsUpdate = true;
  scene.add(planeMesh);

なんかでた。

codepen

See the Pen canvas をテクスチャにする_1 by ziyudom (@ziyudom) on CodePen.

【2】canvasアニメーションを作る

次は今回は文字を右から左に流れてく感じのをサンプル作る。
render関数を作る。

var textX = 0;//アニメーション用テキスト位置

function render(){
  window.requestAnimationFrame(render);//グルグルまわる
  textX--;//位置を更新
  if (textX < -100) {
    textX = 100;//適当に行きすぎたらもどってきてーってやつ
  }
  //緑にする
  textContext.fillStyle = "rgb(40, 233, 100)";
  //その緑を塗る
  textContext.fillRect(0, 0, 100, 100);
  //黒にする
  textContext.fillStyle = "rgb(0, 0, 0)";
  //その黒で書く
  textContext.fillText("ぶはははは", textX, 20);

  renderer.render(scene, camera);//レンダリング更新
};

アニメーション部分
canvasは一回ベタで塗り直して、改めて文字を描画する感じなので、こんな感じでやってみた。
 

function looprender() {
  window.requestAnimationFrame(looprender);

  textX--;
  if (textX < -100) {
    textX = 100;
  }
  
  textContext.fillStyle = "rgb(40, 233, 100)";
  textContext.fillRect(0, 0, 100, 100);
  textContext.fillStyle = "rgb(0, 0, 0)";
  textContext.fillText("ぶはははは", textX, 20);

  renderer.render(scene, camera);
}

恐らく上の方に「テクスチャ」とか書いてあってアニメーションしてるはず。

See the Pen canvas をテクスチャにする_1 by ziyudom (@ziyudom) on CodePen.

【3】読み込んでアニメーション

次に板を作ってそこに貼り付ける。
テクスチャを作ると言っても、さっきのset_texture関数にnew THREE.Texture(canvas)で作ったやつをリターンするようにセットしたらあとはほとんどいつも通り。

//キャンバステクスチャ作り
function set_texture() {

  //テクスチャ
  canvas = document.createElement('canvas');
  canvas.width = 64;
  canvas.height = 32;
  textContext = canvas.getContext('2d');
  textContext.font = "20px 'MS Pゴシック'";

  textContext.fillStyle = "rgb(200, 30, 100)";
  textContext.fillText("札幌", 0, 20);

  $(".hoge")[0].appendChild(canvas);

//↓ここ追加した
  texture = new THREE.Texture(canvas);
  return texture;
}

メッシュ作成部分


var geometry = new THREE.PlaneGeometry(6.4, 3.2, 10, 10);
var material = new THREE.MeshBasicMaterial({
  map: set_texture(),//ここでさっき作った関数からのリターンされたテクスチャが入る。
  transparent: true,
});
planeMesh = new THREE.Mesh(geometry, material);

//ここら辺ただの調整
planeMesh.position.z = -1;
planeMesh.rotation.y = 20;
planeMesh.doubleSided = true;

scene.add(planeMesh);

こんな感じ

てかメインのステージのやつ動いてなくね?
ってなったんですが、それがplaneMesh.material.map.needsUpdateアップデート。
これをmaterialのmapで毎回trueにするっぽい。
なんでtureなんだろ。そしてなんで毎回なんだろう。
そんな疑問も素人からするとあるけど。
とりあえずここれそのMeshのmaterialをアップデートできます。

function render(){
  window.requestAnimationFrame(render);
  textX--;
  if (textX < -100) {
    textX = 100;
  }
  textContext.fillStyle = "rgb(40, 233, 100)";
  textContext.fillRect(0, 0, 100, 100);
  textContext.fillStyle = "rgb(0, 0, 0)";
  textContext.fillText("ぶはははは", textX, 20);
  /*ここね!*/
  planeMesh.material.map.needsUpdate = true;
  
  renderer.render(scene, camera);
}

はははははーやったー

でけた

See the Pen canvas をテクスチャにする_2 by ziyudom (@ziyudom) on CodePen.

canvasがテクスチャになるならなんでも出来る気がする

そんな気がするんだけど。
まぁそもそもそんな技術がないという事実もあるので。
焦らずゆっくりでもお勉強が必要です。

  • このエントリーをはてなブックマークに追加