Function useAnnotations

This hook allow you to add annotations to an exisiting AnnotationsLayer. A scope is a user defined string, which should uniquely tie the added anotations to your component. If your annotations belong to a specific wellbore, the wellbore name or id would work well as a scope.

A single function addAnnotations is returned, which you can call from within a useEffect hook to set annotations. Annotations must be an array of AnnotationProps. The addAnnotations function will return a dispose function when invoked, which you should call within the effect dispose function.

Example

const { addAnnotations } = useAnnotations('casings', scope)

Remarks

Note that annotation positions needs to be in world space. If your data is relative to for instance a wellbore, you could add an Object3D element with a ref in your component render function and update the position data in a useEffect hook:

Example

useEffect(() => {
  let dispose: (() => void) | null = null
  if (generator && id) {
    const v = new Vector3()
    generator(id).then(response => {
      if (response && positionRef.current) {
        response.forEach((d, i) => {
          v.set(...d.position)
          positionRef.current.localToWorld(v)
          d.position = v.toArray()
          d.id = i.toString()
        })
        dispose = addAnnotations(response || [])
      }
    })
  }

  return () => {
    if (dispose) dispose()
  }
}, [addAnnotations, id, generator, positionRef])

See

Settings