I am trying to recreate sketchfab like annotation similar to this https://sketchfab.com/3d-models/interactive-test-778258c754a74d37a72d3274b80c6ce1 . I have been using https://manu.ninja/webgl-three-js-annotations/ as a reference but have run into a roadblock.I can see 2 annotations show up when i render the model. My guess is that the mapping between 2D and 3D co-ordinates is broken.
It would be great to understand the following:
1)Why am i seeing 2 annotations ? What is broken ?
2)I noticed the example i am using as a reference has some text which is static, how do i make this text appear only when the annotation is clicked?
3)I get an error in my function updateAnnotationOpacity (code attached) where position is not recognized as a parameter for my model? What is the right way to calculate this distance ?
Attaching code here https://codepen.io/codepen_novide_coder/pen/YzwdxBe
Any help in understanding this is highly appreciated.