canvasに描画したものをジオメトリ(Geometry)の頂点に表示させる

言っててもちろん意味わかってるのか不明だけど。
今回作った順序としては

• 【1】表示させたい子をcanvasで作成(Threejs使うから縦、横は2乗にする)
• 【1-2】作ったcanvasをテクスチャにする
• 【1-3】作ったテクスチャをマテリアル(Material)にする
• 【2】頂点用のジオメトリ作る(こんかいはSphere)
• 【3】THREE.Pointsで1、2で作った子を使って表示！

【1】表示させたい子をcanvasで作成
(Threejs使うから縦、横は2乗にする)

とりあえず元になるcanvasを作成する
ここでちゃんと表示されてないと、うまくPointに表示されても表示されない(日本語ぐだぐだ)な感じになるので注意。
試しに普通にappendしてみるのもありかも。

    //canvasに赤色塗った四角形を描画してappend
    var canvas = document.createElement('canvas');
    canvas.width = 16;//2の4乗
    canvas.height = 16;//2の4乗
    var context = canvas.getContext('2d');
    context.fillStyle = "rgb(200, 0, 0)";
    context.fillRect(0, 0, canvas.width, canvas.height);

赤い四角(16px_16px)を表示させただけ

See the Pen タダノ16pxの赤いシカク by ziyudom (@ziyudom) on CodePen.

【1-2】作ったcanvasをテクスチャにする

次は作った子をThreejs用にテクスチャにしてreturnする。

function get_canvasTexture(){
  
    var canvas = document.createElement('canvas');
    canvas.width = 16;
    canvas.height = 16;
    var context = canvas.getContext('2d');
    context.fillStyle = "rgb(200, 0, 0)";
    context.fillRect(0, 0, canvas.width, canvas.height);
  
	//ここでテクスチャにする
    var texture = new THREE.Texture(canvas);
    texture.needsUpdate = true;
    return texture;//テクスチャお返しする
}

【1-3】作ったテクスチャをマテリアル(Material)にする

お返しされたテクスチャでマテリアル作り。
tamaterialってのを作る。

   var tamaterial = new THREE.PointsMaterial({
        color: 0xffffee,
        size: 3,
        transparent: true,
        blending: THREE.AdditiveBlending,
        map: get_canvasTexture(),//ここでさっきのテクスチャ設置
        depthWrite: false
   });

【2】頂点用のジオメトリ作る(こんかいはSphere)

こんな感じでいつも通り準備する。

var geometry = new THREE.SphereGeometry(10,10,10);

なので、縦、横の分割数が多いほど頂点が多くなるから、沢山出したい人は
SphereGeometry(10,1000,1000);
とかしたらもうそれは点ですらなくなるよ。うじゃうじゃ。

–memo–
SphereGeometry(半径,縦の分割数,横の分割数);
——–

【3】THREE.Pointsで1、2で作った子を使って表示！

ジオメトリとマテリアルができましたのでソレを使ってTHREE.Pointsしてやろうと思います。

var pointObject = new THREE.Points(geometry, tamaterial);
pointObject.sortParticles = true;
scene.add(pointObject);

でけた

See the Pen canvasで書いたヤツを表示させる by ziyudom (@ziyudom) on CodePen.

なんか大きくてちゃんとなってるかよくわからないけど、一応球の頂点に赤色がでてますよ。

画像で出してみる

応用、というか画像に変えただけ、なんだけど。
THREE.TextureLoaderでtextureを読み込んで。
第二引数にonloadがあるので、そこからポイントマテリアル→ポイントって順序で作成すると普通に出来ました。

    var textureLoader = new THREE.TextureLoader();
    textureLoader.load(
        './img/sudachi_128.png',
        //onload
        function(_texture){

            //ポイントマテリアル作る
            var imgmaterial = new THREE.PointsMaterial({
                color: 0xffffff,
                size: 5,
                transparent: true,
                map: _texture,//キャンバス作ってテクスチャに突っ込んだ子が帰ってくる
                depthWrite: false
            });


            var pointObject = new THREE.Points(geometry, imgmaterial);
            scene.add(pointObject);

            //レンダーは最後に入れないと表示されなのだよ困ったもんだ。。。
            renderer.render(scene, camera);
        },
        function(e){
            console.log("進行中")
        },
        function(e){
            console.log("エラー")
        }
    );

ただcodepenに乗せようとしたらクロスドメインかなんかでエラーしたからローカルでやった。