Dynamic annotations on Obj loaded model

Questions
, ,
1

Hi all.

I’m having trouble with adding annotations to a loaded OBJ model.
What I want to do is to allow the user to add annotations to the surface a rendered object on click. I managed to achieve this with a boxGeometry by calculating the position vs the click event point. However this approach is not working with the loaded model as the annotation. I tried calculating the obj center but it also didn’t work.
Can anyone help me with this?
Thanks in advance.

image
image777×588 29.1 KB

Here is my code:
https://codesandbox.io/p/sandbox/r3f-obj-annotations-x7lnnp?file=%2Fsrc%2FApp.tsx%3A13%2C1

2

@LFdeSouza maybe see this post and ask that user if he could provide any suggestion.

It might not really matter of what model format you use for this if the annotations are created as a separate entity.

1 Like
3

Usually you should have annotation declared inside of your Mesh tag to get it centered first. Then you can add an offset based on where you click on the model.
Try starting simple here

4 
const [position, click] = useState()
return (
  <>
    <mesh onClick={e => click(e.point)} ... />
    {position && <Html position={position} ... >😵‍💫</Html>}

e.point is a global coordinate. if you add the html into the mesh then you need to first transform it to a local coordinate:

parent.current.worldToLocal(e.point.clone())

ps,

<mesh ref={ref} onClick={handleClick} scale={0.03} rotation={[4.8, 0, 0]}>
  <primitive object={obj} />
</mesh>

you’re sticking a pre-existing object into a mesh. that wouldn’t make sense. the outer mesh has no purpose, it will act as a group. do this:

<primitive object={obj} onClick={handleClick} scale={0.03} rotation={[4.8, 0, 0]} />

you also don’t need the ref any longer, because obj is the threejs object.

5

I imagined that the issue was something like this, but couldn’t find the solution.

Thank you very much for the help!