pixel-planet

1"use client"
2 
3import { Canvas, useFrame } from "@react-three/fiber"
4import { Stars } from "@react-three/drei"
5import { useEffect, useMemo, useRef, useState } from "react"
6import { generatePlanetByType, type PlanetOptions } from "../lib/utils"
7import { Timer } from "three"
8 
9export interface PixelPlanetProps {
10  type:
11    | "ice"
12    | "gas_giant_1"
13    | "gas_giant_2"
14    | "asteroid"
15    | "star"
16    | "lava"
17    | "dry"
18    | "earth"
19    | "no_atmosphere"
20  seed: number
21 
22  cameraZ?: number
23  /**
24   * advanced customization options for the planet.
25   */
26  advanced?: PlanetOptions
27  className?: string
28  stars?: boolean
29  orbitControls?: boolean
30  orbitControlsSensitivity?: number
31}
32 
33const mapTypeToLabel: Record<PixelPlanetProps["type"], string> = {
34  ice: "Ice Planet",
35  gas_giant_1: "Gas giant 1",
36  gas_giant_2: "Gas giant 2",
37  asteroid: "Asteroid",
38  star: "Star",
39  lava: "Lava Planet",
40  dry: "Dry Planet",
41  earth: "Earth Planet",
42  no_atmosphere: "No atmosphere",
43}
44 
45function CameraUpdater({ cameraZ }: { cameraZ: number }) {
46  useFrame(({ camera }) => {
47    if (camera.position.z !== cameraZ) {
48      camera.position.set(0, 0, cameraZ)
49      camera.lookAt(0, 0, 0)
50    }
51  })
52  return null
53}
54 
55function PlanetContent({
56  type,
57  seed,
58  advanced: options,
59  rotationOffset = 0,
60}: PixelPlanetProps & { rotationOffset?: number }) {
61  const planetLabel = mapTypeToLabel[type]
62 
63  // Generate planet group when type changes
64  const planet = useMemo(() => {
65    return generatePlanetByType(planetLabel, options)
66  }, [planetLabel, options])
67 
68  // Update seed when it changes
69  useEffect(() => {
70    if (!planet) return
71    // eslint-disable-next-line @typescript-eslint/no-explicit-any
72    planet.children.forEach((layer: any) => {
73      if (layer.material && layer.material.uniforms) {
74        if (layer.material.uniforms["seed"]) {
75          layer.material.uniforms["seed"].value = seed
76        }
77      }
78    })
79  }, [planet, seed])
80 
81  const timer = useMemo(() => new Timer(), [])
82 
83  // Animation loop - update time and manual offset for texture scrolling
84  useFrame(() => {
85    if (!planet) return
86 
87    timer.update()
88 
89    // eslint-disable-next-line @typescript-eslint/no-explicit-any
90    planet.children.forEach((layer: any) => {
91      if (layer.material && layer.material.uniforms) {
92        if (layer.material.uniforms["time"]) {
93          layer.material.uniforms["time"].value =
94            timer.getElapsed() + rotationOffset
95        }
96      }
97    })
98  })
99 
100// … truncated