ourworld_web/www_projectmycelium_com
23
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 4 Pull Requests Releases Activity

refactor: improve type safety and component stability in HalfGlobe

Browse Source 
- Replaced custom RotatableGroup type with Three.js Group type for better type safety
- Added key prop to root div element to help React's reconciliation process
- Removed unnecessary custom type definition by using built-in Three.js types
This commit is contained in:
sasha-astiadi
2025-10-30 13:04:51 +01:00
parent c0cbe7e6bf
commit 9f81561a86
1 changed files with 3 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/ui/HalfGlobe.tsx
View File

@@ -3,13 +3,10 @@
import { Canvas, useFrame } from "@react-three/fiber"; import { Canvas, useFrame } from "@react-three/fiber";
import { Line, OrbitControls, useTexture } from "@react-three/drei"; import { Line, OrbitControls, useTexture } from "@react-three/drei";
import { useMemo, useRef } from "react"; import { useMemo, useRef } from "react";
import type { Group } from "three";
type RotatableGroup = {
rotation: { y: number };
};
function Globe() { function Globe() {
const groupRef = useRef<RotatableGroup | null>(null); const groupRef = useRef<Group>(null);
const cloudTexture = useTexture("/images/cloud1.png"); const cloudTexture = useTexture("/images/cloud1.png");
// Rotate the globe slowly // Rotate the globe slowly
@@ -78,7 +75,7 @@ function Globe() {
export function HalfGlobe() { export function HalfGlobe() {
return ( return (
<div className="w-full h-[500px] bg-white flex items-center justify-center"> <div key="half-globe" className="w-full h-[500px] bg-white flex items-center justify-center">
<Canvas camera={{ position: [0, 1.5, 4], fov: 45 }}> <Canvas camera={{ position: [0, 1.5, 4], fov: 45 }}>
<ambientLight intensity={0.8} /> <ambientLight intensity={0.8} />
<Globe /> <Globe />