Three.js sprite can convert mesh?

Questions
,
1

Hello I am a beginner of three.
I’m looking for a way to export a sprite to gltf. Is there a way to convert a sprite to a mesh?

this is my export function

   function startsubmit() {

    var gltfExporter = new THREE.GLTFExporter();
    var options = {};
   const canvas = document.getElementById("number");
      gltfExporter.parse( [scene], function( result ) {
      if ( result instanceof ArrayBuffer ) {
        saveArrayBuffer( result, 'scene.glb' );
      } else {      
      var output = JSON.stringify( result, null, 2 );
        saveString( output, '199.gltf' );
      }
    }, options );

   }

make Text Sprite code is this

  function makeTextSprite(witch, clicknum)
{        

  
 const canvas = document.getElementById("number");
  const ctx = canvas.getContext("2d");
  const x = 32;
  const y = 32;
  const radius = 30;
  const startAngle = 0;
  const endAngle = Math.PI * 2;

  ctx.fillStyle = "rgb(0, 0, 0)";
  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 = "32px sans-serif";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText("1", x, y);

  const numberTexture = new THREE.CanvasTexture(canvas); 
  numberTexture.minFilter = THREE.LinearFilter;
  numberTexture.magFilter = THREE.LinearFilter;
  numberTexture.needsUpdate = true;

  const spriteMaterial = new THREE.SpriteMaterial({
    map: numberTexture,
    alphaTest: 0.5,
    transparent: true,
    depthTest: false,
    depthWrite: true,
    color : new THREE.Color( 0xff0000 )
  });
 
  sprite = new THREE.Sprite(spriteMaterial);
  sprite.position.copy( witch );
  sprite.name = clicknum;
  sprite.userData.id = clicknum;
  sprite.scale.x = sprite.scale.y = 8;
  var group = new THREE.Object3D();
  group.add(sprite);
  scene.add(group);
 

}

Ultimately, the goal I want is that when I add the object I want, I want the object to always look at the front when rotating with the controller. I do not know what is the best way to do it like a sprite.

2

Have you tried to create a Mesh with a PlaneBufferGeometry and a MeshBasicMaterial?

3

I used circle gemoetry. But I want that always faces towards the camera.
But circle geometry does not work like a sprite, so I’m looking for a way

4

Maybe you can use one of the approaches mentioned in: Plane always look into camera

1 Like
5

@yoyohyu, Have you found a way to convert sprite material to store in glTF? I am looking for similar, to save sprite using glTFExporter and then load using glTFloader to load object and sprites.