Unexpected behaviour of the Arcs

[Mustafa-raja]

What happens is sometimes when i run the app the arcs work as expected (move from one point to the other), but sometimes when I run the app the arcs do not even display, everything else come onto the screen as expected except the arcs, that is until i run the app multiple times after terminating it, the arcs then come onto the screen. I just ran my app and the arcs were working, when i refreshed my tab the arcs disappeared, following is the screenshot.

Following is the screenshot of the globe with the arcs as expected, for this to work i had to terminate and run app multiple times

Following is my code, in case i am not implementing it as i should:

function GlobeScene() {
  const globeEl = useRef();

  useEffect(() => {
    const directionalLight = new DirectionalLight('white', 5);
    const ambientLight = new AmbientLight('white', 1);
    globeEl.current.lights([ambientLight, directionalLight]);
  }, []);
  return (
    <Globe  
    pointsMerge={true} 
    pointAltitude={0.07} 
    pointRadius={0.05} 
    pointColor={() => "#ffffff"} 
    pointsData={map.maps} 
    labelAltitude={0.01} 
    labelResolution={6} 
    labelText={"city"} 
    labelSize={(e) => e.size} 
    labelDotRadius={0.3} 
    labelColor={() => "#ffcb21"} 
    labelsData={map.maps} 
    arcDashInitialGap={(e) => e.order} 
    arcsTransitionDuration={1000} 
    arcDashAnimateTime={1000} 
    arcDashGap={4} 
    arcDashLength={0.9} 
    arcStroke={0.5} 
    arcColor={() => "#900"} 
    arcAltitude={(e) => e.arcAlt} 
    arcsData={lines.pulls} 
    ref={globeEl}
    hexPolygonResolution={3} 
    hexPolygonColor={() => "#6a6ed2"}
    hexPolygonMargin={0.7} 
    hexPolygonsData={countries.features} 
    animateIn={true} 
    showGlobe={true} 
    atmosphereAltitude={0.25} 
    atmosphereColor={'MediumSlateBlue'} 
    globeMaterial={new MeshPhongMaterial({ color: '#3a228a', immisive: '#220038', immisiveIntensity: 0.1 })}  />

  );
}


function App() {
  return (
    <div className="Canvas">
      <ambientLight intensity={20} />
      <GlobeScene />
    </div>
  );
}

[vasturiano]

@Mustafa-raja could you please make a simple reproducing example at https://codesandbox.io/ ?

[Mustafa-raja]

@vasturiano Following is the link of reproducing example https://codesandbox.io/s/inspiring-snowflake-dz443h?file=/src/App.js . note that the arcs have unexpected behaviour, sometimes they are visible sometimes not

[Mustafa-raja]

@vasturiano so it turns out the issue is in hexPolygonsData if i remove the polygons everything works smooth, but when i add polygons the lines refuse to load

[Mustafa-raja]

@vasturiano
Found a feasible solution
so since hexPolygonsData and arcsData when rendered together would hinder in rendering of the arcs, to solve this issue i made sure that the hexPolygonsData would only be rendered when the arcs are rendered. And now everything works fine and as expected

following is the code solution:

function GlobeScene() {
  const globeEl = useRef();
  const [arcsProcessed, setArcsProcessed] = useState(false);
  const Lines = lines.pulls;

  useEffect(() => {
    const directionalLight = new DirectionalLight('white', 5);
    const ambientLight = new AmbientLight('white', 1);
    globeEl.current.lights([ambientLight, directionalLight]);
    console.log(Lines);
    setArcsProcessed(true);
  }, [arcsProcessed]);

  return (
    <div>
      <Globe
      ref = {globeEl}
        pointsMerge={true}
        pointAltitude={0.07}
        pointRadius={0.05}
        pointColor={() => "#ffffff"}
        pointsData={map.maps}
        labelAltitude={0.01}
        labelResolution={6}
        labelText={"city"}
        labelSize={(e) => e.size}
        labelDotRadius={0.3}
        labelColor={() => "#ffcb21"}
        labelsData={map.maps}
        arcDashInitialGap={(e) => e.order}
        arcsTransitionDuration={1000}
        arcDashAnimateTime={(d) => 1000}
        arcDashGap={4}
        arcDashLength={0.9}
        arcStroke={0.5}
        arcColor={() => "#900"}
        arcAltitude={(e) => e.arcAlt}
        arcsData={arcsProcessed ? Lines : []}
        hexPolygonResolution={3}
        hexPolygonColor={() => "#6a6ed2"}
        hexPolygonMargin={0.7}
        hexPolygonsData={arcsProcessed ? countries.features : []} 
        animateIn={true}
        showGlobe={true}
        atmosphereAltitude={0.25}
        atmosphereColor={'MediumSlateBlue'}
        globeMaterial={new MeshPhongMaterial({ color: '#3a228a' })}
      />
    </div>
  );
}