threejsスプライト

スプライトはスプライトと呼ばれます。コンピュータグラフィックスでは、スプライトはシーンに含まれる2次元の画像またはアニメーションを指します。スプライトモデルの前面は常にキャンバスと平行であるため、主にラベルに使用されます。

1スプライトを使用して2D形状を作成します

スプライトはスプライトと呼ばれます。コンピュータグラフィックスでは、スプライトはシーンに含まれる2次元の画像またはアニメーションを指します。threejsでは、Spriteを使用して画像テクスチャをロードできます。もちろん、canvasで作成されたテクスチャも含まれるため、canvasで作成できる画像の種類と、Spriteで作成できる形状を指定できます。次の例では、スプライトを使用して円を作成します。

function createSpriteShape(){
       /*1、创建一个画布，记得设置画布的宽高，否则将使用默认宽高，有可能会导致图像显示变形*/
        var canvas = document.createElement("canvas");
        canvas.width = 120;
        canvas.height = 120;
        /*2、创建图形，这部分可以去看w3c canvas教程*/
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "#ff0000";
        ctx.arc(50,50,50,0,2*Math.PI);
        ctx.fill();
        /*3、将canvas作为纹理，创建Sprite*/
        var texture = new THREE.Texture(canvas);
        texture.needsUpdate = true; //注意这句不能少
        var material = new THREE.SpriteMaterial({map:texture});
        var mesh = new THREE.Sprite(material);
        /*4、放大图片，每个精灵有自己的大小，默认情况下都是很小的，如果你不放大，基本是看不到的*/
        mesh.scale.set(100,100,1);
        return mesh;
}

2スプライトを使用してテキストを作成します

//先用画布将文字画出
            var canvas = document.createElement("canvas");
            var  ctx = canvas.getContext("2d");
            ctx.fillStyle = "#0000ff";
            ctx.font = "20px Arial";
            ctx.lineWidth = 1;
            ctx.fillText("ABCDRE",4,20);
            var texture = new THREE.Texture(canvas);
            texture.needsUpdate = true;

            //使用Sprite显示文字
            var material = new THREE.SpriteMaterial({map:texture});
            var textObj = new THREE.Sprite(material);
            textObj.scale.set(1,1,1);
            textObj.position.set(4,-4,1);
            scene.add(textObj);

3テクスチャ画像をロードします

//精灵对象Sprite
            var texture = new THREE.TextureLoader().load("test.png");
            // 创建精灵材质对象SpriteMaterial
            var spriteMaterial = new THREE.SpriteMaterial({
                    color:0xffffff,//设置精灵矩形区域颜色
                    //rotation:Math.PI/4,//旋转精灵对象45度，弧度值
                    map: texture,//设置精灵纹理贴图
                    transparent:true,
                });
            // 创建精灵模型对象，不需要几何体geometry参数
            var sprite = new THREE.Sprite(spriteMaterial);
            scene.add(sprite);
            // 控制精灵大小，比如可视化中精灵大小表征数据大小
            sprite.scale.set(0.5, 0.5, 1);  只需要设置x、y两个分量就可以
            sprite.position.set(0, -5, 1);

おすすめ