I am working on a 3D Scene using Three.js with an Earth shape that currently looks like this: https://i.sstatic.net/zXWki.png
My goal is to modify it to resemble something like this:
https://i.sstatic.net/w4ypV.jpg
The coloring, stars, and texture are not crucial, what I really want is for the Earth shape to appear as a half sphere from the bottom. However, adjusting the Earth's y position affects its appearance due to the Perspective Camera
Here is the code snippet for this project, which is a component in Next.js but should be similar in other setups:
'use client'
import { useEffect, useRef } from 'react'
import * as Three from 'three'
const Earth3D = () => {
const canvas = useRef<HTMLCanvasElement>(null)
useEffect(() => {
// All the three.js setup and logic here
}, [])
return (
<div>
<canvas ref={canvas} className="relative w-screen h-screen outline-0" />
</div>
)
}
export default Earth3D
See this code sandbox for a live example.