[V0_FILE]typescriptreact:file="realistic-earth.tsx" isEdit="true" isQuickEdit="true" "use client" import { useRef, useMemo, useEffect, useState } from "react" import { Canvas, useFrame, useLoader, extend, useThree, type Object3DNode } from "@react-three/fiber" import { OrbitControls, shaderMaterial } from "@react-three/drei" import * as THREE from "three" import { Azeret_Mono as Geist_Mono } from "next/font/google" const geistMono = Geist_Mono({ subsets: ["latin"] }) declare global { namespace JSX { interface IntrinsicElements { earthMaterial: Object3DNode atmosphereMaterial: Object3DNode } } } const EarthMaterial = shaderMaterial( { dayTexture: null, nightTexture: null, normalMap: null, cloudsTexture: null, specularMap: null, sunDirection: new THREE.Vector3(1, 0.2, 0).normalize(), }, // Vertex Shader ` varying vec3 vNormal; varying vec3 vWorldNormal; varying vec2 vUv; varying vec3 vViewDir; void main() { vNormal = normalize(normalMatrix * normal); vWorldNormal = normalize(mat3(modelMatrix) * normal); vUv = uv; vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); vViewDir = -mvPosition.xyz; gl_Position = projectionMatrix * mvPosition; } `, // Fragment Shader ` uniform sampler2D dayTexture; uniform sampler2D nightTexture; uniform sampler2D normalMap; uniform sampler2D cloudsTexture; uniform sampler2D specularMap; uniform vec3 sunDirection; varying vec3 vNormal; varying vec3 vWorldNormal; varying vec2 vUv; varying vec3 vViewDir; void main() { vec3 normalColor = texture2D(normalMap, vUv).rgb; vec3 perturbedNormal = normalize(vNormal + (normalColor * 2.0 - 1.0) * 0.15); vec3 viewDir = normalize(vViewDir); vec3 sunDir = normalize(sunDirection); float sunDot = dot(vWorldNormal, sunDir); float dayMix = smoothstep(-0.15, 0.05, sunDot); vec3 dayCol = texture2D(dayTexture, vUv).rgb; vec3 nightCol = texture2D(nightTexture, vUv).rgb * 0.05; vec3 baseColor = mix(nightCol, dayCol, dayMix); float specIntensity = texture2D(specularMap, vUv).r; vec3 halfDir = normalize(sunDir + viewDir); float spec = pow(max(dot(perturbedNormal, halfDir), 0.0), 40.0) * dayMix * specIntensity; baseColor += vec3(spec * 0.3); float clouds = smoothstep(0.3, 0.6, texture2D(cloudsTexture, vUv).r); baseColor = mix(baseColor, vec3(1.0), clouds * dayMix * 0.3); gl_FragColor = vec4(baseColor, 1.0); } `, ) const AtmosphereMaterial = shaderMaterial( { sunDirection: new THREE.Vector3(1, 0.2, 0).normalize(), atmosphereDay: new THREE.Color(0x4db2ff), atmosphereTwilight: new THREE.Color(0xbc490b), }, // Vertex Shader ` varying vec3 vNormal; varying vec3 vWorldNormal; varying vec3 vPosition; void main() { vNormal = normalize(normalMatrix * normal); vWorldNormal = normalize(mat3(modelMatrix) * normal); vPosition = position; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, // Fragment Shader ` uniform vec3 sunDirection; uniform vec3 atmosphereDay; uniform vec3 atmosphereTwilight; varying vec3 vNormal; varying vec3 vWorldNormal; varying vec3 vPosition; void main() { vec3 normal = normalize(vNormal); vec3 worldNormal = normalize(vWorldNormal); vec3 viewDir = normalize(-vPosition); vec3 sunDir = normalize(sunDirection); float fresnel = pow(1.0 - dot(normal, viewDir), 2.0); float sunFactor = smoothstep(-0.5, 1.0, dot(worldNormal, sunDir)); vec3 color = mix(atmosphereTwilight, atmosphereDay, sunFactor); color *= mix(1.0, 1.3, sunFactor); gl_FragColor = vec4(color, fresnel * sunFactor * 0.6); } `, ) extend({ EarthMaterial, AtmosphereMaterial }) interface MarkerInfo { position: THREE.Vector3 lat: number lon: number timezone: string time: string } function Earth({ onMarkerSet }: { onMarkerSet: (info: MarkerInfo | null) => void }) { const earthRef = useRef(null!) const atmosRef = useRef(null!) const [markerInfo, setMarkerInfo] = useState(null) const dayTexture = useLoader(THREE.TextureLoader, "https://i.ibb.co/sdGYTDst/2k-earth-daymap.jpg") const nightTexture = useLoader(THREE.TextureLoader, "https://i.ibb.co/v4kvR3Ty/2k-earth-nightmap.jpg") const normalMap = useLoader(THREE.TextureLoader, "https://i.ibb.co/MksTdgBz/8k-earth-normal-map.png") const cloudsTexture = useLoader(THREE.TextureLoader, "https://i.ibb.co/gLRTgLC0/8k-earth-clouds.png") const specularMap = useLoader(THREE.TextureLoader, "https://i.ibb.co/7NSLzWz5/8k-earth-specular-map.png") dayTexture.encoding = THREE.sRGBEncoding nightTexture.encoding = THREE.sRGBEncoding cloudsTexture.encoding = THREE.sRGBEncoding useEffect(() => { new THREE.TextureLoader().load("https://i.ibb.co/WWKKspmQ/8k-earth-daymap.jpg", (tex) => { tex.encoding = THREE.sRGBEncoding if (earthRef.current && (earthRef.current.material as any).uniforms) { ;(earthRef.current.material as any).uniforms.dayTexture.value = tex } }) }, []) useFrame(() => { const now = new Date() const seconds = now.getUTCHours() * 3600 + now.getUTCMinutes() * 60 + now.getUTCSeconds() const angle = (seconds / 86400) * Math.PI * 2 if (earthRef.current) { earthRef.current.rotation.y = angle } if (atmosRef.current) { atmosRef.current.rotation.y = angle } }) const { raycaster, camera, scene } = useThree() const handleClick = (event: any) => { if (earthRef.current) { const intersects = raycaster.intersectObject(earthRef.current) if (intersects.length > 0) { const point = intersects[0].point.clone() const lat = Math.asin(point.y) * (180 / Math.PI) const lon = Math.atan2(point.z, point.x) * (180 / Math.PI) // Get timezone and time const timezone = getTimezone(lat, lon) const time = getCurrentTime(timezone) const newMarkerInfo = { position: point, lat, lon, timezone, time } setMarkerInfo(newMarkerInfo) onMarkerSet(newMarkerInfo) } } } return ( {markerInfo && ( )} ) } function Stars() { const count = 5000 const positions = useMemo(() => { const pos = new Float32Array(count * 3) for (let i = 0; i < count; i++) { const theta = Math.random() * 2 * Math.PI const phi = Math.acos(2 * Math.random() - 1) const r = 1000 pos[i * 3] = r * Math.sin(phi) * Math.cos(theta) pos[i * 3 + 1] = r * Math.sin(phi) * Math.sin(theta) pos[i * 3 + 2] = r * Math.cos(phi) } return pos }, []) return ( ) } function InfoPanel({ marker }: { marker: MarkerInfo | null }) { if (!marker) return null return (

lat: {marker.lat.toFixed(2)}, lon: {marker.lon.toFixed(2)}

timezone: {marker.timezone}

time: {marker.time}

) } export default function RealisticEarth() { const [markerInfo, setMarkerInfo] = useState(null) return (

) } function getTimezone(lat: number, lon: number): string { // This is a simplified version. In a real application, you'd use a timezone database. const timezoneOffset = Math.round(lon / 15) return `UTC${timezoneOffset >= 0 ? "+" : ""}${timezoneOffset}` } function getCurrentTime(timezone: string): string { const now = new Date() const offset = Number.parseInt(timezone.replace("UTC", "")) now.setHours(now.getUTCHours() + offset) return now.toLocaleTimeString() }

About

Tags

Share

About

Tags

Share

More from iverfinne

More Templates Like This

About

Tags

Share

About

Tags

Share

More from iverfinne

More Templates Like This