GoTrip) 사용자 인터렉션 3D 지구본 모델

지구본 초기화

 useEffect(() => {
    if (!globeRef?.current) return;
    globeRef.current.controls().autoRotate = true;
    globeRef.current.pointOfView({
      lat: 20,
      lng: 138,
      altitude: 2,
    });
  }, []);

국가 클릭시 줌인 > 라벨 표시

  const handleLabelClick = (label: object) => {
    const countryLabel = label as CountryLabel;
    if (!globeRef?.current) return;
    globeRef.current.controls().autoRotate = false;
    globeRef.current.pointOfView(
      {
        lat: countryLabel.lat,
        lng: countryLabel.lng,
        altitude: 1,
      },
      1000,
    );
    setSelectedLabel(countryLabel.name);
    setDescription('');
    setTimeout(() => {
      setLabelToShow(countryLabel.name);
    }, 1000);
  };

  const handleBackClick = () => {
    if (!globeRef?.current) return;

    const selectedCountry =
      countriesData[selectedLabel?.toLowerCase() as keyof typeof countriesData];

    if (selectedCountry) {
      globeRef.current.controls().autoRotate = true;
      globeRef.current.pointOfView(
        {
          lat: selectedCountry.lat,
          lng: selectedCountry.lng,
          altitude: 2,
        },
        1000,
      );
      setLabelToShow(null);
      setSelectedLabel(null);
      setDescription('');
    }
  };

지구본 렌더링

        <Globe
          ref={globeRef}
          width={width}
          height={height}
          labelsData={countriesDataValues}
          labelText={(d: any) => d.name}
          labelSize={1.5}
          labelDotRadius={() => 1.8}
          labelAltitude={() => 0.01}
          labelColor={() => '#ffd000'}
          labelsTransitionDuration={500}
          hexPolygonsData={countriesHex.features}
          hexPolygonResolution={() => 3}
          hexPolygonMargin={() => 0.4}
          hexPolygonColor={() => '#2e7a7c'}
          backgroundColor={'#151825'}
          showGlobe={false}
          showAtmosphere={false}
          onLabelClick={handleLabelClick}
          onLabelHover={handleLabelHover}
        />