Zim canvas to Three texture

Questions
1

I want to make THREE.Sprite() with a ZIM canvas texture
but it have problem.

    var circle = new Circle("#ff0", 250);
    var texture = new THREE.CanvasTexture(circle.cacheCanvas);
    const spriteMaterial = new THREE.SpriteMaterial({ map: texture });
    const sprite = new THREE.Sprite(spriteMaterial);
    scene.add(sprite);
2

I think you will need to cache() the circle before you can get a cacheCanvas. Also make sure your camera is pulled back so you can see something, etc. I have not used a sprite before in three.js - it should work...

3

Ooo - just read up on it - a Sprite would be handy. I would make those with a plane and rotate based on camera...

4

Got it working. Did a Sprite with a png to start then in the second example with a CanvasTexture.

https://zimjs.com/three/sprite.html

image

https://zimjs.com/three/sprite2.html

image

1 Like