Better way to create Sprites?

Questions
1

I have created a sprite. But sprite is bigger then it display. In image i draw it. It’s a problem cause I can’t handle click correct. What is the transparent element ? How to set correct size?
a1

function createSpriteAnnotation( message, fontSize, position ) {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        const x = 30;
        const y = 30;
        const radius = 27;
        const startAngle = 0;
        const endAngle = Math.PI * 2;

        ctx.fillStyle = 'rgb(161,20,26)';
        ctx.beginPath();
        ctx.arc(x, y, radius, startAngle, endAngle);
        ctx.fill();

        ctx.strokeStyle = 'rgb(255, 255, 255)';
        ctx.lineWidth = 3;
        ctx.beginPath();
        ctx.arc(x, y, radius, startAngle, endAngle);
        ctx.stroke();

        ctx.fillStyle = 'rgb(255,255,255)';
        ctx.font = `${fontSize}px sans-serif`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(message, x, y);

        const texture = new CanvasTexture(canvas)
        texture.needsUpdate = true;
        const spriteMaterial = new SpriteMaterial( { map: texture } );
        const sprite = new Sprite( spriteMaterial );
        sprite.center.set(0,0)

        sprite.scale.set(60,30,90);
        sprite.position.set(position.x, position.y, position.z);

        const THREEx = initializeDomEvents(THREE)
        const domEvents = new THREEx.DomEvents(camera, renderer.domElement)

        domEvents.addEventListener(sprite, 'mouseover', function(event){
            document.documentElement.style.cursor = 'pointer'
        }, false)

        domEvents.addEventListener(sprite, 'mouseout', function(event){
            document.documentElement.style.cursor = 'default'
        }, false)

        //Debug
        // const gui = new GUI()
        // const pak = gui.addFolder(message)
        // pak.add( sprite.position , 'z', -500, 500 ).step(.1)
        // pak.add( sprite.position , 'x', -500, 500 ).step(.1)
        // pak.add( sprite.position , 'y', -500, 500 ).step(.1)

        return sprite
    }
    function addAnnotationToScene () {
        const pos = [
            { x: -242, y: -25, z: 29 },
            { x: -200, y: -65, z: 59 },
            { x: -150, y: -80, z: 19 },
            { x: -187.7, y: -68.5, z: -14.3 }
        ]

        for (let i = 0; i < pos.length; i++) {
            const sprite = createSpriteAnnotation( i, 30, pos[i])
            objects.push(sprite)
            scene.add( sprite )
        }
    }

codepen

2

Hi!
When you create canvas, set its size:

        const canvas = document.createElement('canvas');
        canvas.width = canvas.height = 60;

And then, set sprite’s scale like this:
sprite.scale.set(30,30);

3

Thank you, man, you are my hero)

4

You’re welcome :beers: :slight_smile:

1 Like