如何使用三个和 React 将针点添加到 3d Globe 的表面

Question

https://codesandbox.io/p/sandbox/globe-p78xjr 我试图找到如何将诸如精确点之类的东西放在地球上，但在互联网上没有找到任何有用的东西，这是我的基本地球仪代码，需要精确点来定位位置

import React from 'react'
import { useLoader } from '@react-three/fiber';
import { TextureLoader } from 'three';
import EarthDayMap from "../../assets/textures/8k_earth_daymap.jpg";
import EarthNormalMap from "../../assets/textures/8k_earth_normal_map.jpg";
import EarthSpecularMap from "../../assets/textures/8k_earth_specular_map.jpg";
import { OrbitControls } from '@react-three/drei';
export function Earth(props) {
   
    const [ colorMap, normalMap, specularMap ] = useLoader(TextureLoader, [EarthDayMap, EarthNormalMap , EarthSpecularMap]);
   
    return (



        <>
        <ambientLight intensity={3} />
        <mesh>
            <sphereGeometry args={[1, 32 , 32]}/>
            <meshPhongMaterial specularMap={specularMap} />
            <meshStandardMaterial map={colorMap} normalMap={normalMap} />
            <OrbitControls enableZoom={true} enablePan={true} enableRotate={true} zoomSpeed={0.6} panSpeed={0.5} rotateSpeed={0.4}/>
        </mesh>
        </>
    );
}

目前不知道该做什么或尝试，我是一个反应新手

Answer 1

检查这个基本示例：

import React, { useRef, useEffect } from "react";
import { useFrame } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import * as THREE from "three";

function StackOverflowTemplate() {
  const globeRef = useRef();
  const pinPoints = useRef([]);

  useEffect(() => {
    const positions = [
      { color: "blue", position: [0, 0, 1] },
      { color: "red", position: [1, 0, 0] },
      { color: "green", lat: Math.PI / 4, lon: Math.PI / 4, radius: 1 },
    ];

    positions.forEach(({ color, position, lat, lon, radius }) => {
      const point = new THREE.Mesh(
        new THREE.SphereGeometry(0.03, 32, 32),
        new THREE.MeshBasicMaterial({ color })
      );

      if (position) {
        point.position.set(...position);
      } else {
        const phi = lat;
        const theta = lon;
        const x = radius * Math.sin(phi) * Math.cos(theta);
        const y = radius * Math.sin(phi) * Math.sin(theta);
        const z = radius * Math.cos(phi);
        point.position.set(x, y, z);
      }

      pinPoints.current.push(point);
      globeRef.current.add(point);
    });

    return () => {
      pinPoints.current.forEach((point) => globeRef.current.remove(point));
      pinPoints.current = [];
    };
  }, []);

  useFrame(() => {
    globeRef.current.rotation.y += 0.01;
  });

  return (
    <group ref={globeRef}>
      <mesh>
        <sphereGeometry args={[1, 32, 32]} />
        <meshBasicMaterial color={0x808080} />
        <OrbitControls
          makeDefault
          minPolarAngle={0}
          maxPolarAngle={Math.PI / 1.75}
        />
      </mesh>
    </group>
  );
}
export default StackOverflowTemplate;

但是在官方 R3F 站点中，您会找到视觉上更好的示例，例如这个：

https://codesandbox.io/p/sandbox/html-markers-6oei7?file=%2Fsrc%2FApp.js%3A4%2C47-4%2C94