As a beginner in programming and React three fiber, I am struggling to understand why the marker I place on the globe using geolocation data won't stay attached. Despite my attempts to convert latitude and longitude to Cartesian coordinates, the marker still won't stick to the globe. The sphereGeometry is set to 1 in my equations since the radius has been omitted. Could it be a simple mistake that I am overlooking? Any help in identifying this issue would be greatly appreciated as I am currently stuck on this problem. Below is some sample code for reference.
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 elapsedTime = clock.getElapsedTime();
earthRef.current.rotation.y = elapsedTime / 20;
cloudsRef.current.rotation.y = elapsedTime / 15;
coordRef.current.rotation.y = elapsedTime / 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