三个JS锥体在globe.gl中未显示为标记

我正试图在静态坐标处为我的3D地球仪添加自定义标记。鼠标滚轮上有一个平滑的动画,可以从一个点移动到下一个点。

'use client';

import React, { useRef, useEffect, useState } from 'react';
import { easeCubic } from 'd3-ease';
import * as THREE from 'three';

const points = [
    { lat: 45, lng: 5, size: 0.3, color: 'red', name: 'City A' },
    { lat: -30, lng: 130, size: 0.3, color: 'blue', name: 'City B' },
    { lat: 20, lng: -60, size: 0.3, color: 'green', name: 'City C' },
    { lat: 35, lng: 140, size: 0.3, color: 'yellow', name: 'City D' },
  ];

const GlobeComponent = () => {
  const globeRef = useRef(null);
  const [Globe, setGlobe] = useState(null);
  const [currentIndex, setCurrentIndex] = useState(0);
  const [isTransitioning, setIsTransitioning] = useState(false);
  const [cityName, setCityName] = useState('');

  useEffect(() => {
    import('globe.gl').then((Globe) => {
      setGlobe(() => Globe.default);
    });
  }, []);

  useEffect(() => {
    if (Globe && globeRef.current) {
      const globe = Globe()(globeRef.current)
        .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
        .pointOfView(points[currentIndex], 0)
        .pointsData(points)
        .pointAltitude('size')
        .pointColor('color')
        .pointRadius(0);

        setCityName(points[currentIndex].name);

      const controls = globe.controls();
      controls.enableRotate = false;
      controls.enableZoom = false;
      controls.enablePan = false;

      points.forEach((point) => {
        const { lat, lng, color } = point;

        const coneGeometry = new THREE.ConeGeometry(5, 5, 32);
        const coneMaterial = new THREE.MeshBasicMaterial({ color });
        const cone = new THREE.Mesh(coneGeometry, coneMaterial);

        cone.position.setFromSphericalCoords(
          2, 
          THREE.MathUtils.degToRad(90 - lat),
          THREE.MathUtils.degToRad(lng)
        );

        cone.lookAt(new THREE.Vector3(0, 0, 0));

        globe.scene().add(cone);
      });

      const handleWheel = (event) => {
        if (!isTransitioning) {
          if (event.deltaY > 0 && currentIndex < points.length - 1) {
            moveToNextPoint(globe);
          } else if (event.deltaY < 0 && currentIndex > 0) {
            moveToPreviousPoint(globe);
          }
        }
      };

      globeRef.current.addEventListener('wheel', handleWheel);

      return () => {
        globeRef.current.removeEventListener('wheel', handleWheel);
      };
    }
  }, [Globe, currentIndex, isTransitioning]);

  const moveToNextPoint = (globe) => {
    setIsTransitioning(true);
    const nextIndex = (currentIndex + 1) % points.length;
    const nextPoint = points[nextIndex];
  
    globe.pointOfView(nextPoint, 1000, easeCubic);

    setCityName(nextPoint.name);

    setCurrentIndex(nextIndex);
    setIsTransitioning(false);
  };

  const moveToPreviousPoint = (globe) => {
    setIsTransitioning(true);
    const previousIndex = (currentIndex - 1 + points.length) % points.length;
    const previousPoint = points[previousIndex];
  
    globe.pointOfView(previousPoint, 1000, easeCubic);
  
    setCityName(previousPoint.name);
    
  
    setCurrentIndex(previousIndex);
    setIsTransitioning(false);
  
  };

  return (
    <div style={{ position: 'relative', width: '100%', height: '400px' }}>
      <div ref={globeRef} style={{ width: '100%', height: '100%' }} />
      {cityName && (
        <div style={{
          position: 'absolute',
          bottom: '10px',
          left: '50%',
          transform: 'translateX(-50%)',
          background: 'rgba(0, 0, 0, 0.6)',
          color: 'white',
          padding: '5px 10px',
          borderRadius: '5px',
          fontSize: '14px',
        }}>
          {cityName}
        </div>
      )}
    </div>
  );
};

export default GlobeComponent;

我尝试过放大圆锥体/调整它们的大小,但它们只在页面加载时短暂出现,并在加载后立即消失。任何建议都将不胜感激!