Help with sketchfab like annotations

Questions
, ,
1

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.

Image
Image1922×931 305 KB

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.

2

Your live example does not seem to work. I get a runtime error:

OrbitControls is not defined

3

@Mugen87 I modified the code to use another model and have shared the code here https://codepen.io/codepen_novide_coder/pen/YzwdxBe. I can see only 1 annotation in code pen but still continue seeing 2 separate annotations like the initial picture attached when i render this on the browser.Any particular reason this might be happening ?

4

/cc

5

Fixed this issue by changing the line
link rel=“stylesheet” href="/examples/3d-obj-loader/Surface_style.scss" type=“text/scss”

in the HTML file to link rel=“stylesheet” href="/examples/3d-obj-loader/Surface_style.scss" type=“text/css”