Question about annotations in three.js

Questions
1

Good morning

I’m currently looking for a way to add comments to a dynamically created object, similar to metataport.
Can anyone help?
I want to write live code but there is no way to limit the model.
https://manu.ninja/webgl-three-js-annotations I have seen it, but I do not understand it.

Currently, the code to generate the annotation is dynamically generated when the object is created by tween.js. I would like to make a point point similar to metaport. My point in my project is that I added this point. Is there a way?

function cameramove(point, target) {
    camera.updateProjectionMatrix();
    var from = {
        x: camera.position.x,
        y: camera.position.y,
        z: camera.position.z
    };
      
    var to = {
        x: point.x,
        y: point.y,
        z: point.z + 80
    };
    var tween = new TWEEN.Tween(from)
        .to(to, 500)
        .easing(TWEEN.Easing.Linear.None)
        .onUpdate(function () {
        camera.position.set(this.x , this.y, this.z);
        controls.target.copy(point);
        
        //camera.lookAt(new THREE.Vector3(0, 0, 0));
    })
        .onComplete(function () {
    

                 const bubblediv = document.getElementById('info2');
                $('#info2').show();
                bubblediv.innerHTML = target.userData.name;
                let pos = new THREE.Vector3();
                pos = pos.setFromMatrixPosition(scene.getObjectByName(target.name).matrixWorld);
                pos.project(camera);

              
               var canvasWidth = window.innerWidth;       
                var canvasHeight = window.innerHeight; 
           
                var pos = scene.getObjectByName(target.name).position.clone();    // clone object position
                var dd = pos.project( camera );
               
                pos.x = (pos.x + 1 ) / 2 * canvasWidth;
                pos.y = - (pos.y - 1 ) / 2 * canvasHeight;;
              
             
                bubblediv.style.top = pos.y + 'px';
                bubblediv.style.left = pos.x + 'px';    
    
    })
        .start();
         
  };

If I create the current code, it will appear as a picture. I want my annotation and circle 1 to be in the middle of the circle I made dynamically. I’ve been looking for this for a few days, but I have not found a solution.
112

The shape I want is like below. I need help

41

2

What part of this article is problematic for you? Maybe an additional explanation helps you to understand the entire content of the website. Besides, I’m afraid your posted code is not sufficient to illustrate your issue. A fiddle which reproduces your problem in an isolated, reduced example is the best way to get help.

3

I created a comment like the one shown above with sprite but I have trouble printing it by exporting sprite with gltf export.
It prints an error. three.min.js: 501 THREE.Object3D.add: object not an instance of THREE.Object3D.
Do you know how to solve 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: false
  });

  sprite = new THREE.Sprite(spriteMaterial);
  sprite.position.copy( witch );
  sprite.name = clicknum;
  sprite.userData.id = clicknum;
  sprite.scale.x = sprite.scale.y = 8;
 sprite.copy(sprite, true);

  scene.add( sprite );


}
4

Sry, you have to put more effort into your posts. Without providing live examples illustrating your issues, it’s not really possible to help you further. Your code snippet is not useful when you have problems during a glTF export.

5

Crossposting:

https://stackoverflow.com/questions/52307134/three-js-sprite-export-and-show

6

ok sir i have a question
i want to export or load sprite but it seem to be not working
sprite can’t export use gltfexporter ?

7

AFAIK, THREE.GLTFExporter can’t process objects of type THREE.Sprite.

/cc @donmccurdy

8

That’s correct; the glTF format does not store sprites or text. If you can convert these to a THREE.Mesh (and perhaps use an unlit material like MeshBasicMaterial) they should export OK, but THREE.GLTFExporter does not do this automatically.

2 Likes