search

vasturiano / globe.gl

UI component for Globe Data Visualization using ThreeJS/WebGL
https://vasturiano.github.io/globe.gl/example/world-population/
MIT License
2.13k stars 312 forks source link

Random raycast error #184

Open dcalano opened 12 months ago

dcalano commented 12 months ago

Describe the bug I am trying to implement globe.gl in a web component and it works but I am getting a random error which locks up the app. It doesn't matter which country polygon or zoom level. Something is getting stuck during a state change perhaps and hitting at just the right time to trigger this error? Everything works fine and sometimes it can take a minute or two of me deliberately trying to get this to trigger to make it happen, other times it happens really quickly. Don't have code posted but can email if you wish.

To Reproduce

  1. Load globe, polygons, and textures.
  2. Click countries, globe, scroll to zoom in/out.
  3. Keep playing around until error randomly occurs.

Expected behavior No issues when clicking globe or polygons

Desktop (please complete the following information):

Additional context Screenshot from 2023-11-17 12-11-00 Screenshot from 2023-11-17 12-05-32

Error Trace:

three.module.js:32769` Uncaught TypeError: Cannot read properties of undefined (reading 'count')
    at LineSegments.raycast (three.module.js:32769:44)
    at intersectObject (three.module.js:49708:10)
    at intersectObject (three.module.js:49718:4)
    at intersectObject (three.module.js:49718:4)
    at intersectObject (three.module.js:49718:4)
    at intersectObject (three.module.js:49718:4)
    at Raycaster.intersectObjects (three.module.js:49686:4)
    at Function.intersectingObjects (three-render-objects.mjs:404:24)
    at comp.<computed> [as intersectingObjects] (kapsule.mjs:189:65)
    at Function.tick (three-render-objects.mjs:247:35)
raycast @ three.module.js:32769
intersectObject @ three.module.js:49708
intersectObject @ three.module.js:49718
intersectObject @ three.module.js:49718
intersectObject @ three.module.js:49718
intersectObject @ three.module.js:49718
intersectObjects @ three.module.js:49686
intersectingObjects @ three-render-objects.mjs:404
comp.<computed> @ kapsule.mjs:189
tick @ three-render-objects.mjs:247
comp.<computed> @ kapsule.mjs:189
_animationCycle2 @ globe.gl.mjs:386
comp.<computed> @ kapsule.mjs:189
requestAnimationFrame (async)
_animationCycle2 @ globe.gl.mjs:387
comp.<computed> @ kapsule.mjs:189

animation call (last 3 lines) repeats until end of call

requestAnimationFrame (async)
_animationCycle2 @ globe.gl.mjs:387
comp.<computed> @ kapsule.mjs:189
douwepausma commented 9 months ago

Seem to be a duplicate of react-globe.gl #59, they have a temporary fix by catching an 'undefined'. You'd have to edit node_modules which is a no go for me as I use Vercel to deploy my code.

ramibarnat commented 7 months ago

Any chance I could get a link to the map image that you used to wrap the globe? I've been looking for one that wouldn't take too long to load but was high enough resolution to zoom in.