Annotations in TextureActives

Examples
,
1

An ortho and non-ortho version of annotations:

https://zimjs.com/015/annotation.html

image

https://zimjs.com/015/annotation2.html

image

Thanks @karelrosseel82 for discussing here: How to add labels/annotations to 3d ThreeJS model world

1 Like
2

nice done, a little video explination bubble? so it can be added to https://zimjs.com/updates.html#015 also as svreenshot at https://zimjs.vom/15 thanks.

  • can you make the circle also toggle the color of the active annotation.
    because now it is difficult which notation is from where.
    at my example it does not work: both stay purple

image
image670×700 26.4 KB

I found out this code make it possible or is there a shorter way?

 // ANNOTATIONS

const descriptions = [
    "corner 1",
    "corner 2\nwith an example of longer text\nwith optional new lines"
];

const markers = [];
const circles = []; // Store references to circles
let activeCircle = null; // Track which circle is currently active

loop(descriptions, (description, i)=>{
    const marker = new TextureActive(60, 60, clear);
    const circle = new Circle(30, red).center(marker).tap(()=>{
        // Reset previous active circle to red
        if (activeCircle && activeCircle !== circle) {
            activeCircle.color = red;
        }
        
        // Set current circle to purple and mark as active
        circle.color = purple;
        activeCircle = circle;
        
        infoContent.addTo(infoPanel);
        info.text = description;
        info.background.corner = 10;
        closeBut.loc(info.x+info.width/2, info.y-info.height/2);
    });
    
    new Label(i+1, 40, null, white).center(circle);
    markers.push(marker);
    circles.push(circle); // Store circle reference
});

const infoPanel = new TextureActive(1000, 200, clear);
const infoContent = new Container(infoPanel.width, infoPanel.height);
const info = new Label({text:"", valign:CENTER, align:CENTER, backgroundColor:white, paddingH:50, paddingV:20})
    .centerReg(infoContent);
const closeBut = new Button({width:50, height:50, label:"X", corner:25}).centerReg(infoContent).tap(()=>{
    // Reset active circle to red when closing
    if (activeCircle) {
        activeCircle.color = red;
        activeCircle = null;
    }
    infoContent.removeFrom();
});

example annotation.html

example annotation2.html

  • the annotation is not close to the number , and not becoming transparent as into the other basic example.. any idea how to make that possible ?

so as this codepen you can say 'less code' needed

thanks

3

work it out - we posted a basic example.

4

move with ml5 the annotations, seems not to be able to have a clear background to see the webcam, how to fix?
with annotations problem:

image
image822×461 52.9 KB

when clicking yes everything disapperas, no webcam in backing , but the gestures work
image
image822×461 5.22 KB

so test my zapp schould be this, but not yet working

image
image822×461 55.7 KB

thanks to have a look how to fix and see the webcam