Labels appear rotated on globe surface - also onUpdate error on animation

[bingomanatee]

Describe the bug Labels appear rotated on globe surface. Its like the labels' frame of reference is axially roteated with a pole somewhere near south Africa

To Reproduce

Set up the globe in react fiber:

      <Canvas>
        <ambientLight color="#cddbfe"/>
        <directionalLight color="#cddbfe"/>
        <pointLight position={[10, 10, 10]}/>
        {(
          <group>
            <CameraSetter />
            <Inspector>
              <primitive object={globe}/>
            </Inspector>
          </group>
        )}
      </Canvas>

Globe itself is fairly standard poly/country globe:

   return new ThreeGlobe({ animateIn: false })
      .hexPolygonResolution($resolution)
      .labelResolution($resolution)
      .hexPolygonMargin(0.1)
      .globeImageUrl('/img/earth-dark.jpg')
      .labelText((data) => {
        return data && data.properties ? data.properties.iso3 || '' : '';
      })
      .labelColor(() => 'white')
      .labelSize(2)
      .labelAltitude(0.01)
      .labelLat(d => {
        if (d && d.properties) {
          return d.properties.latitude;
        }
        return 0;
      })
      .labelLng(d => {
        if (d.properties) {
          return d.properties.longitude;
        }
        return 0;
      })
      .hexPolygonColor((country) => {
        return colorOf(country)
      });

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser: [e.g. Chrome, Safari]
• Version: [e.g. 22]

Smartphone (please complete the following information):

• Device: imac
• OS: [osx
• Browser: Chrome
• Version: "three-globe": "^2.24.6"

Additional context

com/684016/189007187-319139b2-4e94-4ec5-be00-ce8bf9594a68.png">

source repo: https://github.com/bingomanatee/covid-client-2022 (labels branch)

working demo without labels: https://covid-client-2022.vercel.app/

[bingomanatee]

Also - strange error during animation (i.e., when features data is updated)

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'color')

Call Stack
updateObj
node_modules/three-globe/dist/three-globe.module.js (1772:0)
eval
node_modules/data-joint/dist/data-joint.module.js (295:0)
Array.forEach
<anonymous>
updateObjs
node_modules/data-joint/dist/data-joint.module.js (290:0)
viewDigest
node_modules/data-joint/dist/data-joint.module.js (271:0)
threeDigest
node_modules/three-globe/dist/three-globe.module.js (654:18)

[vasturiano]

@bingomanatee thanks for reaching out.

Do you have a simple example that reproduces the issue? Something without React or any other wrappers, on codepen would be useful, so we can have a look.

[bingomanatee]

The repo can be checked out - it points to an absolute API/server for its data. I can't really divorce it from the react context easily.