javascript - 三个 JS 地球上的标记总是出现在地球内部或地球之外

Question

我是编程和反应三个光纤的新手，我无法弄清楚为什么我使用地理位置数据放置在地球上的标记不会“粘”在地球上。我玩过从经纬到经纬=>笛卡尔坐标的转换，但没有任何效果。sphereGeometry 设置为 1，所以我在方程中省略了半径。我可能是简单的错误。如果有人能为我指出这一点，那就太棒了。否则，我被困在这个问题上。我这里有一些示例代码。

function Sphere() {

  const globeRad = 1;
  const xpos = 30;
  const ypos =30;

  function convertLatLongToCartesian(p){
    let lat =  p.lat * ( Math.PI/180);
    let lng = p.lng * ( Math.PI/180)
  
    let x= Math.cos(lat) * Math.sin(lng)
    let y=   Math.sin(lat)* Math.sin(lng) 
    let z=  Math.cos(lat) 

    return{x,y,z}
  }

  let point1 = {
    lat: 38.9513216,
    lng: -104.7986176
  }

  let point2 = {
    lat: -23.6345,
    lng: 102.5528
  }

 let pos = convertLatLongToCartesian(point2)
 console.log(pos)

 const [colorMap, normalMap,specularMap, cloudsMap] = useLoader(TextureLoader, [greyEarth,normMap, specMap, clouds]);

 const earthRef = useRef();
 const cloudsRef = useRef();
 const coordRef = useRef();

 useFrame(({clock}) => {

  const elaspsedTime = clock.getElapsedTime();
   earthRef.current.rotation.y= elaspsedTime /20;
   cloudsRef.current.rotation.y= elaspsedTime /15;
   coordRef.current.rotation.y= elaspsedTime /20;
 })
 
 return (
      <>
              <pointLight color="#f6f3ea" position={[2,0,5]} intensity={1.2}/>
        <Stars radius={300} depth={60} count={20000} factor={7} saturation={0} fade={true}/>
        <mesh ref={cloudsRef} >
        <sphereGeometry args={[1.005,30,30]}/>
        <meshPhongMaterial 
        map={cloudsMap} 
        opacity={0.4} 
        depthWrite={true} 
        transparent={true} 
        side={THREE.DoubleSide}/>
      </mesh>
        <mesh ref={earthRef}>
          <sphereGeometry args={[1,30,30]}/>
          <meshPhongMaterial specularMap={specularMap}/>
          <meshStandardMaterial map={colorMap} normalMap={normalMap} metalness={0.4} roughness={0.7}/>
          <mesh ref={coordRef} position={pos.x,pos.z,pos.y}>
          <sphereBufferGeometry args={[0.1,20,20]}/>
          <meshBasicMaterial color="red"/>
        </mesh>
        </mesh>
        </>
    )
}

export default Sphere```

Please let me know what I am doing wrong. Thanks!

标签： javascriptthree.jsgeolocationreact-three-fiber

Answer 1

尝试

let x = Math.sin(lat)* Math.sin(lng)
let y = Math.cos(lat) 
let z = Math.cos(lat) * Math.sin(lng)

因为，threjs 中的轴：

• X 理论 -> Z 三.js
• Y 理论 -> X 三.js
• Z 理论 -> Y 三.js