Suggestion - Method(s) to get ThreeJS object references

[nobu-sh]

It would be really helpful if there were getters on the constructed globe instance to get ThreeJS object references that were rendered by this lib.

It would enable higher customization; as you could get a certain set of objects rendered by this lib and pass it to something like three's raycaster to query intersecting objects.

Example Usage:

// Create Data Point
const gData = [
  {
      lat: 1100,
      lng: 10,
      color: 'red',
      size: 0.1,
  }
]
const colorInterpolator = (t: number) => `rgba(255,0,0,${1-t})`

// Setup camera
const camera = new THREE.PerspectiveCamera();

// Construct Globe & Pass Data Points
const Globe = new ThreeGlobe({
  animateIn: true,
})
  .globeImageUrl(ed)
  .pointsData(gData)
  .pointAltitude('size')
  .pointColor('color')

// Create Raycaster
const raycaster = new THREE.Raycaster()

// Check If Hovering Over A Data Point
function checkHover(vec2) {
  raycaster.setFromCamera(vec2, camera)

  // Globe.points() would be an accessor to all point mesh refs currently rendered
  return raycaster.intersectObjects(Globe.points(), true)
}

const intersections = checkHover(...)

[vasturiano]

@nobu-sh thanks for your suggestion.

There is a way to do this already. Attached to each of your data points is an attribute called __threeObj. This attribute is a reference pointing to the corresponding Three mesh itself that you can use in your raycaster selection.

In fact, this is precisely how the abstraction layer in globe.gl implements the interactive functionality of object hover/clicks.

[nobu-sh]

Ah alright, thanks! Is this purposely not included in the typings? I was looking around for it based off of globe.gl abstraction and got lost haha.