Codrops 원본
Creating an Immersive 3D Weather Visualization with React Three Fiber
섹션 · MIT
갤러리 안에서는 화면을 벗어나거나 움직임을 멈추면 예제도 닫힙니다. 다시 재생할 때는 처음부터 시작해요.
SOURCE FILES
원본 코드 읽기
수집한 원본 소스와 실행 안내를 함께 제공합니다.
api/weather.js
// Simple in-memory cache that works locally and on Vercel
const cache = new Map();
const rateLimitMap = new Map();
// Cache duration: 10 minutes
const CACHE_DURATION = 10 * 60 * 1000; // 10 minutes in milliseconds
const RATE_LIMIT_WINDOW = 60 * 60 * 1000; // 1 hour in milliseconds
// For testing: temporarily set to 2 requests to test rate limiting quickly
// Change back to 20 for production
const MAX_REQUESTS_PER_HOUR = 15;
// Helper function to get client IP
function getClientIP(req) {
return req.headers['x-forwarded-for'] ||
req.headers['x-real-ip'] ||
req.connection?.remoteAddress ||
req.socket?.remoteAddress ||
'127.0.0.1';
}
// Rate limiting function
function isRateLimited(ip) {
const now = Date.now();
const userRequests = rateLimitMap.get(ip) || [];
// Remove old requests outside the window
const validRequests = userRequests.filter(timestamp => now - timestamp < RATE_LIMIT_WINDOW);
if (validRequests.length >= MAX_REQUESTS_PER_HOUR) {
return true;
}
// Add current request
validRequests.push(now);
rateLimitMap.set(ip, validRequests);
return false;
}
export default async function handler(req, res) {
// Enable CORS
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
if (req.method === 'OPTIONS') {
res.status(200).end();
return;
}
if (req.method !== 'GET') {
return res.status(405).json({ error: 'Method not allowed' });
}
const { location } = req.query;
if (!location) {
return res.status(400).json({ error: 'Location parameter is required' });
}
// Rate limiting with fallback data
const clientIP = getClientIP(req);
if (isRateLimited(clientIP)) {
console.log(`Rate limit exceeded for IP: ${clientIP}, serving demo data`);
// Return realistic dummy weather data
const demoWeatherData = {
location: {
name: "Demo City",
region: "Demo State",
country: "Demo Country",
lat: 40.7128,
lon: -74.0060,
tz_id: "America/New_York",
localtime_epoch: Math.floor(Date.now() / 1000),
localtime: new Date().toISOString().slice(0, -5) // Remove Z and milliseconds
},
current: {
last_updated_epoch: Math.floor(Date.now() / 1000),
last_updated: new Date().toISOString().slice(0, -5),
temp_c: 22,
temp_f: 72,
is_day: new Date().getHours() >= 6 && new Date().getHours() <= 18 ? 1 : 0,
condition: {
text: "Partly cloudy",
icon: "//cdn.weatherapi.com/weather/64x64/day/116.png",
code: 1003
},
wind_mph: 8.5,
wind_kph: 13.7,
wind_degree: 230,
wind_dir: "SW",
pressure_mb: 1013.0,
pressure_in: 29.91,
precip_mm: 0.0,
precip_in: 0.0,
humidity: 65,
cloud: 40,
feelslike_c: 24,
feelslike_f: 75,
vis_km: 16.0,
vis_miles: 10.0,
uv: 5.0,
gust_mph: 12.1,
gust_kph: 19.4
},
forecast: {
forecastday: [
{
date: new Date().toISOString().split('T')[0],
date_epoch: Math.floor(Date.now() / 1000),
day: {
maxtemp_c: 26,
maxtemp_f: 79,
mintemp_c: 18,
mintemp_f: 64,
avgtemp_c: 22,
avgtemp_f: 72,
maxwind_mph: 12.1,
maxwind_kph: 19.4,
totalprecip_mm: 0.0,
totalprecip_in: 0.0,
totalsnow_cm: 0.0,
avgvis_km: 16.0,
avgvis_miles: 10.0,
avghumidity: 65,
daily_will_it_rain: 0,
daily_chance_of_rain: 10,
daily_will_it_snow: 0,
daily_chance_of_snow: 0,
condition: {
text: "Partly cloudy",
icon: "//cdn.weatherapi.com/weather/64x64/day/116.png",
code: 1003
},
uv: 5.0
}
},
// Tomorrow
{
date: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString().split('T')[0],
date_epoch: Math.floor(Date.now() / 1000) + 86400,
day: {
maxtemp_c: 24,
maxtemp_f: 75,
mintemp_c: 16,
mintemp_f: 61,
avgtemp_c: 20,
avgtemp_f: 68,
maxwind_mph: 10.5,
maxwind_kph: 16.9,
totalprecip_mm: 2.1,
totalprecip_in: 0.08,
totalsnow_cm: 0.0,
avgvis_km: 12.0,
avgvis_miles: 7.0,
avghumidity: 72,
daily_will_it_rain: 1,
daily_chance_of_rain: 80,
daily_will_it_snow: 0,
daily_chance_of_snow: 0,
condition: {
text: "Light rain",
icon: "//cdn.weatherapi.com/weather/64x64/day/296.png",
code: 1183
},
uv: 3.0
}
},
// Day after tomorrow
{
date: new Date(Date.now() + 48 * 60 * 60 * 1000).toISOString().split('T')[0],
date_epoch: Math.floor(Date.now() / 1000) + 172800,
day: {
maxtemp_c: 28,
maxtemp_f: 82,
mintemp_c: 20,
mintemp_f: 68,
avgtemp_c: 24,
avgtemp_f: 75,
maxwind_mph: 15.2,
maxwind_kph: 24.4,
totalprecip_mm: 0.0,
totalprecip_in: 0.0,
totalsnow_cm: 0.0,
avgvis_km: 16.0,
avgvis_miles: 10.0,
avghumidity: 58,
daily_will_it_rain: 0,
daily_chance_of_rain: 5,
daily_will_it_snow: 0,
daily_chance_of_snow: 0,
condition: {
text: "Sunny",
icon: "//cdn.weatherapi.com/weather/64x64/day/113.png",
code: 1000
},
uv: 7.0
}
}
]
},
rateLimited: true, // Flag to indicate this is demo data
cached: false
};
return res.json(demoWeatherData);
}
// Check cache first
const cacheKey = `weather:${location.toLowerCase()}`;
const cachedData = cache.get(cacheKey);
if (cachedData && Date.now() - cachedData.timestamp < CACHE_DURATION) {
console.log(`Cache hit for location: ${location}`);
return res.json({
...cachedData.data,
cached: true,
cacheAge: Math.round((Date.now() - cachedData.timestamp) / 1000)
});
}
// Make API call to WeatherAPI
const API_KEY = process.env.REACT_APP_WEATHER_API_KEY || process.env.WEATHER_API_KEY;
if (!API_KEY) {
console.error('Weather API key not found');
return res.status(500).json({ error: 'Server configuration error' });
}
try {
const weatherResponse = await fetch(
`https://api.weatherapi.com/v1/forecast.json?key=${API_KEY}&q=${encodeURIComponent(location)}&days=3&aqi=no&alerts=no&tz=${Intl.DateTimeFormat().resolvedOptions().timeZone}`
);
if (!weatherResponse.ok) {
const errorData = await weatherResponse.json().catch(() => ({}));
return res.status(weatherResponse.status).json({
error: errorData.error?.message || 'Weather API error',
code: errorData.error?.code
});
}
const weatherData = await weatherResponse.json();
// Cache the response
cache.set(cacheKey, {
data: weatherData,
timestamp: Date.now()
});
console.log(`API call made for location: ${location}, cached for ${CACHE_DURATION / 1000 / 60} minutes`);
// Clean up old cache entries (simple cleanup)
if (cache.size > 100) {
const oldestKey = cache.keys().next().value;
cache.delete(oldestKey);
}
res.json({
...weatherData,
cached: false
});
} catch (error) {
console.error('Weather API error:', error);
res.status(500).json({ error: 'Failed to fetch weather data' });
}
}함께 쓰는 파일 32개 보기
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>3D Weather</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
src/App.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
padding: 0;
min-height: 100vh;
min-height: 100dvh; /* Dynamic viewport height for mobile */
overflow: hidden;
}
/* Mobile viewport fixes */
html {
height: 100%;
height: 100dvh; /* Dynamic viewport height for mobile */
}
#root {
height: 100%;
height: 100dvh; /* Dynamic viewport height for mobile */
}
/* Custom animations and utilities for weather app */
@layer utilities {
.animate-fade-in {
animation: fadeIn 0.5s ease-in-out;
}
.animate-slide-up {
animation: slideUp 0.3s ease-out;
}
.animate-bounce-gentle {
animation: bounceGentle 2s infinite;
}
}
/* Smooth scrolling for any scrollable content */
* {
scroll-behavior: smooth;
}
/* Custom scrollbar styling */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.5);
}
src/App.js
import React, { useState, useEffect } from 'react';
import './App.css';
import Scene3D from './components/Scene3D';
import LocationSelector from './components/LocationSelector';
import { weatherService } from './services/weatherService';
function App() {
const [weatherData, setWeatherData] = useState(null);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
const [currentLocationName, setCurrentLocationName] = useState('');
const [isPortalMode, setIsPortalMode] = useState(false);
const [exitPortalFunction, setExitPortalFunction] = useState(null);
const [portalWeatherData, setPortalWeatherData] = useState(null);
const [errorSearchQuery, setErrorSearchQuery] = useState('');
useEffect(() => {
loadCurrentLocationWeather();
}, []);
const loadCurrentLocationWeather = async () => {
setIsLoading(true);
setError(null);
try {
const location = await weatherService.getCurrentLocation();
const data = await weatherService.getCurrentWeather(location);
setWeatherData(data);
setCurrentLocationName(`${data.location.name}, ${data.location.region}`);
} catch (error) {
console.error('Error loading weather:', error);
setError('Unable to load weather data. Please try entering a city manually.');
} finally {
setIsLoading(false);
}
};
const handleLocationChange = async (location) => {
setIsLoading(true);
setError(null);
try {
const data = await weatherService.getCurrentWeather(location);
setWeatherData(data);
setCurrentLocationName(`${data.location.name}, ${data.location.region}`);
} catch (error) {
console.error('Error loading weather for location:', error);
setError('Unable to load weather data for this location. Please try a different city.');
} finally {
setIsLoading(false);
}
};
const isNightTime = () => {
if (!weatherData?.location?.localtime) return false;
const localTime = weatherData.location.localtime;
const currentHour = new Date(localTime).getHours();
return currentHour >= 19 || currentHour <= 6;
};
const handlePortalWeatherDataChange = (data) => {
setPortalWeatherData(data);
};
const handleErrorSearch = async (e) => {
e.preventDefault();
if (errorSearchQuery.trim()) {
await handleLocationChange(errorSearchQuery.trim());
setErrorSearchQuery('');
}
};
// Use portal weather data when in portal mode, otherwise use main weather data
const displayWeatherData = isPortalMode && portalWeatherData ? portalWeatherData : weatherData;
const isNight = isNightTime();
const textColor = (isPortalMode || !isNight) ? 'text-black' : 'text-white';
return (
<div className="w-screen h-screen min-h-dvh relative overflow-hidden">
{/* 3D Scene fills entire viewport - base layer */}
<div className="absolute inset-0 z-0">
<Scene3D
weatherData={weatherData}
isLoading={isLoading}
onPortalModeChange={setIsPortalMode}
onSetExitPortalFunction={setExitPortalFunction}
onPortalWeatherDataChange={handlePortalWeatherDataChange}
/>
</div>
{/* All UI elements overlay on top of the canvas */}
{weatherData && !isLoading && (
<>
{/* Header - changes layout based on portal mode */}
{isPortalMode ? (
<>
{/* Portal Mode Header */}
<div className={`absolute top-6 left-6 z-20 ${textColor}`}>
<button
onClick={() => exitPortalFunction?.()}
className={`flex items-center space-x-2 px-4 py-2 ${textColor} opacity-80 hover:opacity-100 transition-opacity`}
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
</svg>
<span className="text-sm font-light">Back</span>
</button>
</div>
<div className={`absolute top-6 right-6 z-20 ${textColor} text-right`}>
<div className="text-lg font-light tracking-wide opacity-95">
{displayWeatherData.location.name}
{displayWeatherData.rateLimited && (
<span className="ml-2 text-xs bg-blue-500/20 text-blue-300 px-2 py-1 rounded-full">
DEMO
</span>
)}
</div>
<div className="text-sm opacity-60 tracking-wide">
{displayWeatherData.location.region}
</div>
</div>
</>
) : (
/* Normal Mode Header */
<div className={`absolute top-6 left-6 right-6 z-20 flex items-start justify-between ${textColor}`}>
<div>
<div className="text-lg font-light tracking-wide opacity-95">
{displayWeatherData.location.name}
{displayWeatherData.rateLimited && (
<span className="ml-2 text-xs bg-blue-500/20 text-blue-300 px-2 py-1 rounded-full">
DEMO
</span>
)}
</div>
<div className="text-sm opacity-60 tracking-wide">
{displayWeatherData.location.region}
</div>
</div>
<LocationSelector
onLocationChange={handleLocationChange}
currentLocation={currentLocationName}
isLoading={isLoading}
isNight={isNight}
/>
</div>
)}
{/* Main Temperature Card - Bottom Left */}
<div className={`absolute bottom-20 md:bottom-6 left-6 z-20 ${textColor}`} style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}>
<div className="flex items-end space-x-4">
<div className="flex items-baseline">
<span className="text-6xl font-thin leading-none">
{Math.round(displayWeatherData.current.temp_f)}
</span>
<span className="text-2xl font-thin opacity-75">°</span>
</div>
<div className="pb-2">
<div className="text-sm font-light opacity-80 capitalize mb-1">
{displayWeatherData.current.condition.text}
</div>
<div className="text-xs opacity-60 space-y-0.5">
<div>H: {Math.round(displayWeatherData.current.temp_f + 5)}° L: {Math.round(displayWeatherData.current.temp_f - 10)}°</div>
</div>
</div>
</div>
</div>
{/* Compact Stats Bar - Bottom Right */}
<div className={`absolute bottom-20 md:bottom-6 right-6 z-20 ${textColor}`} style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}>
<div className="flex flex-col space-y-3 text-right text-sm">
<div className="flex items-center justify-end space-x-2">
<span className="opacity-60">HUMIDITY</span>
<span className="font-light">{displayWeatherData.current.humidity}%</span>
</div>
<div className="flex items-center justify-end space-x-2">
<span className="opacity-60">WIND</span>
<span className="font-light">{Math.round(displayWeatherData.current.wind_mph)} mph</span>
</div>
<div className="flex items-center justify-end space-x-2">
<span className="opacity-60">FEELS</span>
<span className="font-light">{Math.round(displayWeatherData.current.feelslike_f)}°</span>
</div>
<div className="flex items-center justify-end space-x-2">
<span className="opacity-60">VISIBILITY</span>
<span className="font-light">{Math.round(displayWeatherData.current.vis_miles)} mi</span>
</div>
</div>
</div>
</>
)}
{isLoading && (
<div className="absolute inset-0 flex flex-col items-center justify-center text-white z-50">
<div className="w-16 h-16 border-4 border-white/30 border-t-white rounded-full animate-spin mb-4"></div>
<p className="text-lg font-light">Loading weather data...</p>
</div>
)}
{error && (
<div className="fixed inset-0 flex flex-col items-center justify-center bg-black/80 backdrop-blur-lg z-50">
<div className="bg-white/10 backdrop-blur-md rounded-3xl p-8 max-w-sm mx-4 text-center border border-white/20">
<p className="text-white text-lg font-light mb-6 leading-relaxed">{error}</p>
{/* Search form for manual city entry */}
<form onSubmit={handleErrorSearch} className="mb-6">
<div className="flex items-center space-x-2 bg-white/10 rounded-2xl p-3 border border-white/20">
<input
type="text"
value={errorSearchQuery}
onChange={(e) => setErrorSearchQuery(e.target.value)}
placeholder="Enter city name..."
className="flex-1 bg-transparent text-white placeholder-white/60 focus:outline-none text-sm font-light"
disabled={isLoading}
/>
<button
type="submit"
className="text-white/80 hover:text-white transition-colors disabled:opacity-40"
disabled={!errorSearchQuery.trim() || isLoading}
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
</div>
</form>
{/* Buttons */}
<div className="flex space-x-3">
<button
onClick={loadCurrentLocationWeather}
className="flex-1 bg-white/20 hover:bg-white/30 px-4 py-3 rounded-2xl text-white font-light transition-all duration-300 border border-white/30 hover:scale-105 text-sm"
disabled={isLoading}
>
Try Location Again
</button>
</div>
</div>
</div>
)}
</div>
);
}
export default App;
src/App.test.js
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
src/components/ForecastPortals.js
import React, { useState, useRef, useMemo } from 'react';
import { useFrame, useThree, useLoader, extend } from '@react-three/fiber';
import { MeshPortalMaterial, Text, OrbitControls, Environment } from '@react-three/drei';
import * as THREE from 'three';
import WeatherVisualization from './WeatherVisualization';
import * as geometry from "maath/geometry";
// Extend with rounded plane geometry from maath
extend(geometry);
const ForecastPortal = ({
position,
dayData,
index,
isActive,
isFullscreen,
onEnter,
onExit
}) => {
const portalRef = useRef();
const materialRef = useRef();
const [hovered, setHovered] = useState(false);
useFrame((state, delta) => {
if (materialRef.current) {
// Animate portal blend based on active state
const targetBlend = isFullscreen ? 1 : (isActive ? 0.5 : 0);
materialRef.current.blend = THREE.MathUtils.lerp(
materialRef.current.blend || 0,
targetBlend,
0.1
);
}
});
const formatDay = (dateString, index) => {
// Parse date as local time to avoid timezone shifts
const [year, month, day] = dateString.split('-');
const date = new Date(year, month - 1, day);
return date.toLocaleDateString('en-US', { weekday: 'short' }).toUpperCase();
};
// Create portal scene with forecast weather
const portalWeatherData = useMemo(() => ({
current: {
temp_f: dayData.day.maxtemp_f,
condition: dayData.day.condition,
is_day: 1, // Assume daytime for forecast
humidity: dayData.day.avghumidity,
wind_mph: dayData.day.maxwind_mph,
},
location: {
localtime: dayData.date + 'T12:00' // Noon time for forecast
}
}), [dayData]);
// Portal content with proper scene structure
const PortalScene = () => (
<>
<color attach="background" args={['#87CEEB']} />
<ambientLight intensity={0.4} />
<directionalLight position={[10, 10, 5]} intensity={1} />
<WeatherVisualization
weatherData={portalWeatherData}
isLoading={false}
portalMode={true}
/>
<Environment preset="city" />
</>
);
return (
<group position={position}>
{/* Portal Frame */}
<mesh
ref={portalRef}
onClick={onEnter}
>
<roundedPlaneGeometry args={[2, 2.5, 0.15]} />
<MeshPortalMaterial
ref={materialRef}
blur={0}
resolution={256}
worldUnits={false}
>
<PortalScene />
</MeshPortalMaterial>
</mesh>
{/* Only show UI elements when not in fullscreen */}
{!isFullscreen && (
<>
<Text
position={[-0.8, 1.0, 0.1]}
fontSize={0.18}
color="#FFFFFF"
anchorX="left"
anchorY="middle"
>
{formatDay(dayData.date, index)}
</Text>
<Text
position={[0.8, 1.0, 0.1]}
fontSize={0.15}
color="#FFFFFF"
anchorX="right"
anchorY="middle"
>
{Math.round(dayData.day.maxtemp_f)}° / {Math.round(dayData.day.mintemp_f)}°
</Text>
<Text
position={[-0.8, -1.0, 0.1]}
fontSize={0.13}
color="#FFFFFF"
anchorX="left"
anchorY="middle"
maxWidth={1.6}
textAlign="left"
>
{dayData.day.condition.text}
</Text>
</>
)}
</group>
);
};
const ForecastPortals = ({ weatherData, isLoading, onPortalStateChange }) => {
const [activePortal, setActivePortal] = useState(null);
const [isFullscreen, setIsFullscreen] = useState(false);
const { camera, gl, viewport } = useThree();
const cameraTargetRef = useRef({ x: 0, y: 1, z: 8 });
//Mobile-responsive scaling
const isMobile = viewport.width < 6;
const scale = isMobile ? 0.7 : 1;
const spacing = isMobile ? 2.2 : 3;
const mobileYPosition = isMobile ? 0.5 : -0.5; // Move portals up on mobile
// Smooth camera animation when transitioning to portal mode
useFrame((state, delta) => {
// Only animate camera during the initial transition to portal mode
if (activePortal !== null && !isFullscreen) {
const target = cameraTargetRef.current;
const distance = Math.abs(camera.position.x - target.x) +
Math.abs(camera.position.y - target.y) +
Math.abs(camera.position.z - target.z);
// Stop animating when close to target, let OrbitControls take over
if (distance > 0.1) {
camera.position.x = THREE.MathUtils.lerp(camera.position.x, target.x, 0.05);
camera.position.y = THREE.MathUtils.lerp(camera.position.y, target.y, 0.05);
camera.position.z = THREE.MathUtils.lerp(camera.position.z, target.z, 0.05);
}
}
});
if (isLoading || !weatherData?.forecast?.forecastday) {
return null;
}
const forecastDays = weatherData.forecast.forecastday.slice(0, 3);
const handleEnterPortal = (index) => {
if (isFullscreen) return; // Prevent entering when already fullscreen
setActivePortal(index);
setIsFullscreen(true);
// Notify parent component about portal state
if (onPortalStateChange) {
const dayData = forecastDays[index];
onPortalStateChange(true, dayData);
}
// Set camera for fullscreen portal view
cameraTargetRef.current = {
x: 0, // Center the camera
y: 0,
z: 5
};
};
const handleExitPortal = () => {
setIsFullscreen(false);
setActivePortal(null);
// Notify parent component about portal state
if (onPortalStateChange) {
onPortalStateChange(false, null);
}
// Set camera target back to default position
cameraTargetRef.current = { x: 0, y: 1, z: 8 };
};
return (
<>
<group position={[0, mobileYPosition, 0]} scale={[scale, scale, scale]}>
{forecastDays.map((day, index) => (
<ForecastPortal
key={day.date}
position={[-spacing + index * spacing, 0, 0]}
dayData={day}
index={index}
isActive={activePortal === index}
isFullscreen={isFullscreen}
onEnter={() => handleEnterPortal(index)}
onExit={handleExitPortal}
/>
))}
</group>
</>
);
};
export default ForecastPortals;src/components/LocationSelector.js
import React, { useState } from 'react';
const LocationSelector = ({ onLocationChange, currentLocation, isLoading, isNight }) => {
const [searchQuery, setSearchQuery] = useState('');
const [isSearching, setIsSearching] = useState(false);
const handleSearch = async (e) => {
e.preventDefault();
if (searchQuery.trim() && !isLoading) {
setIsSearching(true);
await onLocationChange(searchQuery.trim());
setIsSearching(false);
setSearchQuery('');
}
};
const handleCurrentLocation = async () => {
if (!isLoading) {
setIsSearching(true);
try {
const position = await new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition(resolve, reject, {
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 600000
});
});
const { latitude, longitude } = position.coords;
await onLocationChange(`${latitude},${longitude}`);
} catch (error) {
console.error('Error getting current location:', error);
alert('Unable to get your current location. Please enter a city name manually.');
}
setIsSearching(false);
}
};
return (
<div className="flex flex-col items-end space-y-2">
<form onSubmit={handleSearch}>
<div className="flex items-center space-x-1">
<input
type="text"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Search..."
className={`bg-transparent px-3 py-1 ${isNight ? 'text-white placeholder-white/40' : 'text-black placeholder-black/40'} text-sm md:text-base font-light focus:outline-none w-32 md:w-48 tracking-wide`}
disabled={isLoading || isSearching}
/>
<button
type="submit"
className={`p-1 ${isNight ? 'text-white/60 hover:text-white' : 'text-black/60 hover:text-black'} transition-colors disabled:opacity-40`}
disabled={!searchQuery.trim() || isLoading || isSearching}
>
{isSearching && !isLoading ? (
<div className={`w-3 h-3 border ${isNight ? 'border-white/30 border-t-white' : 'border-black/30 border-t-black'} rounded-full animate-spin`}></div>
) : (
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
)}
</button>
</div>
</form>
<button
onClick={handleCurrentLocation}
className={`px-2 py-1 ${isNight ? 'text-white/60 hover:text-white' : 'text-black/60 hover:text-black'} text-xs md:text-sm transition-colors disabled:opacity-40 flex items-center space-x-1`}
disabled={isLoading || isSearching}
>
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<span>Location</span>
</button>
</div>
);
};
export default LocationSelector;src/components/Scene3D.js
import React, { Suspense, useMemo, useEffect } from 'react';
import { Canvas, useThree } from '@react-three/fiber';
import { OrbitControls, Sky, Stars, Text } from '@react-three/drei';
import { EffectComposer, Bloom } from '@react-three/postprocessing';
import UltimateLensFlare from './lensflare/LensFlare';
import ForecastPortals from './ForecastPortals';
import { getWeatherConditionType, shouldShowSun } from '../services/weatherService';
import * as THREE from 'three';
import WeatherVisualization from './WeatherVisualization';
// Component to handle scene background
const SceneBackground = ({ backgroundColor }) => {
const { scene } = useThree();
useEffect(() => {
scene.background = new THREE.Color(backgroundColor);
}, [scene, backgroundColor]);
return null;
};
// Lens flare visibility logic - uses shared weather service utility
const useLensFlareVisibility = (weatherData, isNight) => {
return React.useMemo(() => {
if (isNight || !weatherData) return false;
return shouldShowSun(weatherData);
}, [isNight, weatherData]);
};
// Post-processing effects with Ultimate Lens Flare - only render when needed
const PostProcessingEffects = ({ showLensFlare, isPortalMode = false }) => {
// Define main scene lens flare values
const mainSceneDefaults = {
positionX: 0,
positionY: 5,
positionZ: 0,
opacity: 1.00,
glareSize: 1.68,
starPoints: 2,
animated: false,
followMouse: false,
anamorphic: false,
colorGain: '#38150b',
flareSpeed: 0.10,
flareShape: 0.81,
flareSize: 1.68,
secondaryGhosts: true,
ghostScale: 0.03,
aditionalStreaks: true,
starBurst: false,
haloScale: 3.88,
};
// Define portal mode lens flare values
const portalModeDefaults = {
positionX: 0,
positionY: 3,
positionZ: 0,
opacity: 1.00,
glareSize: 1.68,
starPoints: 2,
animated: false,
followMouse: false,
anamorphic: false,
colorGain: '#38150b',
flareSpeed: 0.10,
flareShape: 0.81,
flareSize: 1.68,
secondaryGhosts: true,
ghostScale: 0.03,
aditionalStreaks: true,
starBurst: false,
haloScale: 3.88,
};
// Use appropriate defaults based on portal mode
const lensFlareSettings = isPortalMode ? portalModeDefaults : mainSceneDefaults;
// Define bloom values for different modes
const mainSceneBloom = {
bloomIntensity: 0.3,
bloomThreshold: 0.9,
};
const portalModeBloom = {
bloomIntensity: 0.97,
bloomThreshold: 0.85,
};
const bloomSettings = isPortalMode ? portalModeBloom : mainSceneBloom;
if (!showLensFlare) return null;
return (
<EffectComposer>
<UltimateLensFlare
position={[lensFlareSettings.positionX, lensFlareSettings.positionY, lensFlareSettings.positionZ]}
opacity={lensFlareSettings.opacity}
glareSize={lensFlareSettings.glareSize}
starPoints={lensFlareSettings.starPoints}
animated={lensFlareSettings.animated}
followMouse={lensFlareSettings.followMouse}
anamorphic={lensFlareSettings.anamorphic}
colorGain={new THREE.Color(lensFlareSettings.colorGain)}
flareSpeed={lensFlareSettings.flareSpeed}
flareShape={lensFlareSettings.flareShape}
flareSize={lensFlareSettings.flareSize}
secondaryGhosts={lensFlareSettings.secondaryGhosts}
ghostScale={lensFlareSettings.ghostScale}
aditionalStreaks={lensFlareSettings.aditionalStreaks}
starBurst={lensFlareSettings.starBurst}
haloScale={lensFlareSettings.haloScale}
dirtTextureFile="/lensDirtTexture.jpg"
/>
<Bloom
intensity={bloomSettings.bloomIntensity}
threshold={bloomSettings.bloomThreshold}
/>
</EffectComposer>
);
};
const Scene3D = ({ weatherData, isLoading, onPortalModeChange, onSetExitPortalFunction, onPortalWeatherDataChange }) => {
const [portalMode, setPortalMode] = React.useState(false);
const [portalWeatherData, setPortalWeatherData] = React.useState(null);
const exitPortal = () => {
setPortalMode(false);
setPortalWeatherData(null);
onPortalModeChange?.(false);
onPortalWeatherDataChange?.(null);
};
const handlePortalStateChange = (isPortalActive, dayData) => {
setPortalMode(isPortalActive);
onPortalModeChange?.(isPortalActive);
if (isPortalActive && dayData) {
// Create weather data for the portal day
const portalData = {
current: {
temp_f: dayData.day.maxtemp_f,
condition: dayData.day.condition,
is_day: 1,
humidity: dayData.day.avghumidity,
wind_mph: dayData.day.maxwind_mph,
feelslike_f: dayData.day.maxtemp_f, // Approximate feels like temp
vis_miles: 10, // Default visibility
},
location: {
name: weatherData?.location?.name || 'Unknown',
region: weatherData?.location?.region || '',
localtime: dayData.date + 'T12:00'
}
};
setPortalWeatherData(portalData);
onPortalWeatherDataChange?.(portalData);
} else {
setPortalWeatherData(null);
onPortalWeatherDataChange?.(null);
}
};
// Provide exit function to parent
React.useEffect(() => {
onSetExitPortalFunction?.(() => exitPortal);
}, [onSetExitPortalFunction]);
const getTimeOfDay = () => {
if (!weatherData?.location?.localtime) return 'day';
const localTime = weatherData.location.localtime;
const currentHour = new Date(localTime).getHours();
if (currentHour >= 19 || currentHour <= 6) return 'night';
if (currentHour >= 6 && currentHour < 8) return 'dawn';
if (currentHour >= 17 && currentHour < 19) return 'dusk';
return 'day';
};
const isNightTime = () => {
if (!weatherData?.location?.localtime) return false;
const localTime = weatherData.location.localtime;
const currentHour = new Date(localTime).getHours();
return currentHour >= 19 || currentHour <= 6;
};
// Calculate sun position based on time and location
const sunPosition = useMemo(() => {
if (!weatherData?.location) {
// Default position for day/night - ensure sun is visible during day
const hour = new Date().getHours();
if (hour >= 6 && hour <= 18) {
// Daytime - put sun high in sky
const dayProgress = (hour - 6) / 12; // 0 to 1 from sunrise to sunset
const angle = dayProgress * Math.PI; // 0 to π
return [
Math.sin(angle) * 50,
Math.cos(angle) * 50 + 25, // Keep sun above horizon
30
];
} else {
// Nighttime - sun below horizon
return [0, -50, 0];
}
}
const { lat, lon, localtime } = weatherData.location;
const date = new Date(localtime);
const hour = date.getHours() + date.getMinutes() / 60;
if (hour >= 6 && hour <= 18) {
// Daytime positioning
const dayProgress = (hour - 6) / 12; // 0 at sunrise, 1 at sunset
const sunAngle = dayProgress * Math.PI; // 0 to π
const distance = 100;
const elevation = Math.sin(sunAngle) * 0.7 + 0.3;
return [
Math.sin(sunAngle - Math.PI/2) * distance * 0.8,
elevation * distance,
Math.cos(sunAngle - Math.PI/2) * distance * 0.3
];
} else {
// Nighttime - moon position
return [0, -30, 50];
}
}, [weatherData?.location?.lat, weatherData?.location?.lon, weatherData?.location?.localtime]);
const isNight = isNightTime();
const timeOfDay = getTimeOfDay();
const showLensFlare = useLensFlareVisibility(weatherData, isNight);
const showPortalLensFlare = useLensFlareVisibility(portalWeatherData, false);
//Sky colors
const getBackgroundColor = () => {
if (isNight) return '#0A1428';
// Dawn/dusk specific colors
if (timeOfDay === 'dawn') return '#2D1B3D';
if (timeOfDay === 'dusk') return '#3D2914';
if (!weatherData?.current?.condition) return '#0D7FDB';
const condition = weatherData.current.condition.text.toLowerCase();
if (condition.includes('storm')) return '#263238';
if (condition.includes('rain') || condition.includes('overcast')) return '#546E7A';
if (condition.includes('cloudy')) return '#1E88E5';
return '#0D7FDB';
};
// Component to handle mobile responsive text inside Canvas
const ResponsiveText = ({ isNight, isLoading }) => {
const { viewport } = useThree();
const isMobile = viewport.width < 6;
const textScale = isMobile ? 0.7 : 1;
const textPosition = isMobile ? [0, -0.6, 0] : [0, -2.1, 0];
if (isLoading) return null;
return (
<Text
position={textPosition}
fontSize={0.2 * textScale}
color={isNight ? "#FFFFFF" : "#333333"}
anchorX="center"
anchorY="middle"
letterSpacing={0.7}
>
THREE DAY FORECAST
</Text>
);
};
return (
<div style={{ width: '100%', height: '100vh', position: 'relative' }}>
<Canvas
camera={{ position: [0, 1, 10], fov: 60 }}
gl={{ alpha: false, antialias: true }}
style={{ width: '100%', height: '100%' }}
>
<Suspense fallback={null}>
{/* Scene background - Sky handles day/dawn/dusk, black background for night */}
{portalMode && <SceneBackground key={`bg-${timeOfDay}-${portalMode}`} backgroundColor={getBackgroundColor()} />}
{!portalMode && isNight && <SceneBackground key={`bg-night`} backgroundColor={'#000000'} />}
{/* Sky with dynamic sun position - only for non-night times */}
{timeOfDay !== 'night' && (
<Sky
key={`main-sky-${timeOfDay}-${portalMode}`}
sunPosition={(() => {
if (timeOfDay === 'dawn') {
return [100, -5, 100]; // Sun below horizon for darker dawn
} else if (timeOfDay === 'dusk') {
return [-100, -5, 100]; // Sun below horizon for darker dusk
} else { // day
return [100, 20, 100]; // Keep existing day value
}
})()}
inclination={(() => {
if (timeOfDay === 'dawn' || timeOfDay === 'dusk') {
return 0.6; // Medium inclination for dawn/dusk
} else { // day
return 0.9; // Keep existing day value
}
})()}
turbidity={(() => {
if (timeOfDay === 'dawn' || timeOfDay === 'dusk') {
return 8; // Higher turbidity for atmospheric scattering
} else { // day
return 2; // Keep existing day value
}
})()}
/>
)}
<ambientLight intensity={(() => {
if (timeOfDay === 'dawn' || timeOfDay === 'dusk') {
return 0.25; // Darker ambient light for dawn/dusk
} else if (timeOfDay === 'night') {
return 0.2; // Keep existing night value
} else { // day
return 0.4; // Keep existing day value
}
})()} />
<directionalLight
position={sunPosition}
intensity={(() => {
if (timeOfDay === 'dawn' || timeOfDay === 'dusk') {
return 0.6; // Dimmer directional light for dawn/dusk
} else if (timeOfDay === 'night') {
return 0.5; // Keep existing night value
} else { // day
return 1; // Keep existing day value
}
})()}
color={(() => {
if (timeOfDay === 'dawn') {
return "#9B59B6"; // Purple-pink for dawn
} else if (timeOfDay === 'dusk') {
return "#E67E22"; // Warm orange for dusk
} else if (timeOfDay === 'night') {
return "#4169E1"; // Keep existing night value
} else { // day
return "#FFFFFF"; // Keep existing day value
}
})()}
/>
<pointLight position={[-10, -10, -10]} intensity={0.3} />
{!portalMode ? (
<>
{/* Main Scene */}
{/* Stars only visible at night in main scene */}
{isNight && <Stars radius={100} depth={50} count={5000} factor={4} saturation={0} fade speed={1} />}
<WeatherVisualization
weatherData={weatherData}
isLoading={isLoading}
/>
{/* Three Day Forecast 3D Label - responsive for mobile */}
<ResponsiveText isNight={isNight} isLoading={isLoading} />
{/* 3D Forecast Portals */}
<ForecastPortals
weatherData={weatherData}
isLoading={isLoading}
onPortalStateChange={handlePortalStateChange}
/>
{/* Post-processing effects including Ultimate Lens Flare */}
<PostProcessingEffects showLensFlare={showLensFlare} isPortalMode={false} />
</>
) : (
<>
{/* Fullscreen Portal Content with Day Sky */}
<SceneBackground backgroundColor={'#0D7FDB'} />
<Sky
sunPosition={[100, 20, 100]}
inclination={0.9}
turbidity={2}
/>
<ambientLight intensity={0.4} />
<directionalLight
position={[10, 10, 5]}
intensity={1}
color="#FFFFFF"
/>
<group position={[0, -1, 0]}>
<WeatherVisualization
weatherData={portalWeatherData}
isLoading={false}
portalMode={false}
/>
</group>
{/* Add lens flare effect for portal mode when sun should be visible */}
<PostProcessingEffects showLensFlare={showPortalLensFlare} isPortalMode={true} />
</>
)}
<OrbitControls
enablePan={false}
enableZoom={false}
enableRotate={true}
target={portalMode ? [0, 2, 0] : [0, 2, 0]}
maxPolarAngle={Math.PI / 1.8}
minPolarAngle={Math.PI / 4}
maxAzimuthAngle={Math.PI * 70 / 180}
minAzimuthAngle={-Math.PI * 70 / 180}
minDistance={3}
maxDistance={20}
/>
</Suspense>
</Canvas>
</div>
);
};
export default Scene3D;src/components/WeatherVisualization.js
import React from 'react';
import { getWeatherConditionType, shouldShowSun, isPartlyCloudy } from '../services/weatherService';
import Sun from './weather3d/Sun';
import Moon from './weather3d/Moon';
import Clouds from './weather3d/Clouds';
import Rain from './weather3d/Rain';
import Snow from './weather3d/Snow';
import Storm from './weather3d/Storm';
import { Text } from '@react-three/drei';
const WeatherVisualization = ({ weatherData, isLoading, portalMode = false }) => {
// Check if it's nighttime based on local time
const isNightTime = () => {
if (!weatherData?.location?.localtime) return false;
const localTime = weatherData.location.localtime;
const currentHour = new Date(localTime).getHours();
return currentHour >= 19 || currentHour <= 6; // 7 PM to 6 AM is night
};
const isNight = isNightTime();
const currentCondition = weatherData?.current?.condition?.text;
const weatherType = currentCondition ? getWeatherConditionType(currentCondition) : null;
if (isLoading || !weatherData) {
return null;
}
const renderWeatherEffect = () => {
const partlyCloudy = isPartlyCloudy(currentCondition);
if (weatherType === 'sunny') {
if (partlyCloudy) {
return (
<>
{isNight ? <Moon /> : <Sun />}
<Clouds intensity={0.5} speed={0.1} isPartlyCloudy={true} portalMode={portalMode} />
</>
);
}
return isNight ? <Moon /> : <Sun />;
} else if (weatherType === 'cloudy') {
if (partlyCloudy) {
return (
<>
{isNight ? <Moon /> : <Sun />}
<Clouds intensity={0.6} speed={0.1} isPartlyCloudy={true} portalMode={portalMode} />
</>
);
}
return (
<Clouds intensity={0.8} speed={0.1} isPartlyCloudy={false} portalMode={portalMode} />
);
} else if (weatherType === 'rainy') {
return (
<>
<Clouds intensity={0.8} speed={0.15} portalMode={portalMode} />
<Rain count={portalMode ? 100 : 800} />
</>
);
} else if (weatherType === 'snowy') {
return (
<>
<Clouds intensity={0.6} speed={0.05} portalMode={portalMode} />
<Snow count={portalMode ? 50 : 400} />
</>
);
} else if (weatherType === 'stormy') {
return <Storm />;
} else if (weatherType === 'foggy') {
return <Clouds intensity={0.9} speed={0.05} portalMode={portalMode} />;
} else {
if (partlyCloudy) {
return (
<>
{isNight ? <Moon /> : <Sun />}
<Clouds intensity={0.5} speed={0.1} isPartlyCloudy={true} portalMode={portalMode} />
</>
);
}
return isNight ? <Moon /> : <Sun />;
}
};
return (
<group
scale={portalMode ? 0.4 : 1}
position={portalMode ? [0, -1.8, 0] : [0, 0, 0]}
>
{renderWeatherEffect()}
{!portalMode && (
<Text
position={[0, 2, 0]}
fontSize={0.5}
color={isNight ? "#FFFFFF" : "#333333"}
anchorX="center"
anchorY="middle"
>
{currentCondition}
</Text>
)}
</group>
);
};
export default WeatherVisualization;src/components/lensflare/LensFlare.js
// Created by Anderson Mancini 2023
// React Three Fiber Ultimate LensFlare
// Modified for weather app integration
import { Uniform, Color, Vector3 } from 'three'
import { BlendFunction, Effect } from 'postprocessing'
import { wrapEffect } from './util.js'
import { useRef, useMemo, useEffect } from 'react'
import { useFrame, useThree } from '@react-three/fiber'
import { useTexture } from '@react-three/drei'
import { easing } from 'maath'
const LensFlareShader = {
fragmentShader: /* glsl */ `
uniform float iTime;
uniform vec2 lensPosition;
uniform vec2 iResolution;
uniform vec3 colorGain;
uniform float starPoints;
uniform float glareSize;
uniform float flareSize;
uniform float flareSpeed;
uniform float flareShape;
uniform float haloScale;
uniform float opacity;
uniform bool animated;
uniform bool anamorphic;
uniform bool enabled;
uniform bool secondaryGhosts;
uniform bool starBurst;
uniform float ghostScale;
uniform bool aditionalStreaks;
uniform sampler2D lensDirtTexture;
vec2 vxtC;
float rndf(float n){return fract(sin(n) * 43758.5453123);}float niz(float p){float fl = floor(p);float fc = fract(p);return mix(rndf(fl),rndf(fl + 1.0), fc);}
vec3 hsv2rgb(vec3 c){vec4 k = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);vec3 p = abs(fract(c.xxx + k.xyz) * 6.0 - k.www);return c.z * mix(k.xxx, clamp(p - k.xxx, 0.0, 1.0), c.y);}
float satU(float x){return clamp(x, 0.,1.);}vec2 rtU(vec2 naz, float rtn){return vec2(cos(rtn) * naz.x + sin(rtn) * naz.y,cos(rtn) * naz.y - sin(rtn) * naz.x);}
vec3 drwF(vec2 p, float intensity, float rnd, float speed, int id){float flhos = (1. / 32.) * float(id) * 0.1;float lingrad = distance(vec2(0.), p);float expg = 1. / exp(lingrad * (fract(rnd) * 0.66 + 0.33));vec3 qzTg = hsv2rgb(vec3( fract( (expg * 8.) + speed * flareSpeed + flhos), pow(1.-abs(expg*2.-1.), 0.45), 20.0 * expg * intensity));float internalStarPoints;if(anamorphic){internalStarPoints = 1.0;} else{internalStarPoints = starPoints;}float ams = length(p * flareShape * sin(internalStarPoints * atan(p.x, p.y)));float kJhg = pow(1.-satU(ams), ( anamorphic ? 100. : 12.));kJhg += satU(expg-0.9) * 3.;kJhg = pow(kJhg * expg, 8. + (1.-intensity) * 5.);if(flareSpeed > 0.0){return vec3(kJhg) * qzTg;} else{return vec3(kJhg) * flareSize * 15.;}}
float ams2(vec3 a, vec3 b) { return abs(a.x - b.x) + abs(a.y - b.y) + abs(a.z - b.z);}vec3 satU(vec3 x){return clamp(x, vec3(0.0), vec3(1.0));}
float glR(vec2 naz, vec2 pos, float zsi){vec2 mni;if(animated){mni = rtU(naz-pos, iTime * 0.1);} else{mni = naz-pos;}float ang = atan(mni.y, mni.x) * (anamorphic ? 1.0 : starPoints);float ams2 = length(mni);ams2 = pow(ams2, .9);float f0 = 1.0/(length(naz-pos)*(1.0/zsi*16.0)+.2);return f0+f0*(sin((ang))*.2 +.3);}
float sdHex(vec2 p){p = abs(p);vec2 q = vec2(p.x*2.0*0.5773503, p.y + p.x*0.5773503);return dot(step(q.xy,q.yx), 1.0-q.yx);}float fpow(float x, float k){return x > k ? pow((x-k)/(1.0-k),2.0) : 0.0;}
vec3 rHx(vec2 naz, vec2 p, float s, vec3 col){naz -= p;if (abs(naz.x) < 0.2*s && abs(naz.y) < 0.2*s){return mix(vec3(0),mix(vec3(0),col,0.1 + fpow(length(naz/s),0.1)*10.0),smoothstep(0.0,0.1,sdHex(naz*20.0/s)));}return vec3(0);}
vec3 mLs(vec2 naz, vec2 pos){vec2 mni = naz-pos;vec2 zxMp = naz*(length(naz));float ang = atan(mni.x,mni.y);float f0 = .3/(length(naz-pos)*16.0+1.0);f0 = f0*(sin(niz(sin(ang*3.9-(animated ? iTime : 0.0) * 0.3) * starPoints))*.2 );float f1 = max(0.01-pow(length(naz+1.2*pos),1.9),.0)*7.0;float f2 = max(.9/(10.0+32.0*pow(length(zxMp+0.99*pos),2.0)),.0)*0.35;float f22 = max(.9/(11.0+32.0*pow(length(zxMp+0.85*pos),2.0)),.0)*0.23;float f23 = max(.9/(12.0+32.0*pow(length(zxMp+0.95*pos),2.0)),.0)*0.6;vec2 ztX = mix(naz,zxMp, 0.1);float f4 = max(0.01-pow(length(ztX+0.4*pos),2.9),.0)*4.02;float f42 = max(0.0-pow(length(ztX+0.45*pos),2.9),.0)*4.1;float f43 = max(0.01-pow(length(ztX+0.5*pos),2.9),.0)*4.6;ztX = mix(naz,zxMp,-.4);float f5 = max(0.01-pow(length(ztX+0.1*pos),5.5),.0)*2.0;float f52 = max(0.01-pow(length(ztX+0.2*pos),5.5),.0)*2.0;float f53 = max(0.01-pow(length(ztX+0.1*pos),5.5),.0)*2.0;ztX = mix(naz,zxMp, 2.1);float f6 = max(0.01-pow(length(ztX-0.3*pos),1.61),.0)*3.159;float f62 = max(0.01-pow(length(ztX-0.325*pos),1.614),.0)*3.14;float f63 = max(0.01-pow(length(ztX-0.389*pos),1.623),.0)*3.12;vec3 c = vec3(glR(naz,pos, glareSize));vec2 prot;if(animated){prot = rtU(naz - pos, (iTime * 0.1));} else if(anamorphic){prot = rtU(naz - pos, 1.570796);} else {prot = naz - pos;}c += drwF(prot, (anamorphic ? flareSize * 10. : flareSize), 0.1, iTime, 1);c.r+=f1+f2+f4+f5+f6; c.g+=f1+f22+f42+f52+f62; c.b+=f1+f23+f43+f53+f63;c = c*1.3 * vec3(length(zxMp)+.09);c+=vec3(f0);return c;}
vec3 cc(vec3 clr, float fct,float fct2){float w = clr.x+clr.y+clr.z;return mix(clr,vec3(w)*fct,w*fct2);}float rnd(vec2 p){float f = fract(sin(dot(p, vec2(12.1234, 72.8392) )*45123.2));return f;}float rnd(float w){float f = fract(sin(w)*1000.);return f;}
float rShp(vec2 p, int N){float f;float a=atan(p.x,p.y)+.2;float b=6.28319/float(N);f=smoothstep(.5,.51, cos(floor(.5+a/b)*b-a)*length(p.xy)* 2.0 -ghostScale);return f;}
vec3 drC(vec2 p, float zsi, float dCy, vec3 clr, vec3 clr2, float ams2, vec2 esom){float l = length(p + esom*(ams2*2.))+zsi/2.;float l2 = length(p + esom*(ams2*4.))+zsi/3.;float c = max(0.01-pow(length(p + esom*ams2), zsi*ghostScale), 0.0)*10.;float c1 = max(0.001-pow(l-0.3, 1./40.)+sin(l*20.), 0.0)*3.;float c2 = max(0.09/pow(length(p-esom*ams2/.5)*1., .95), 0.0)/20.;float s = max(0.02-pow(rShp(p*5. + esom*ams2*5. + dCy, 6) , 1.), 0.0)*1.5;clr = cos(vec3(0.44, .24, .2)*16. + ams2/8.)*0.5+.5;vec3 f = c*clr;f += c1*clr;f += c2*clr;f += s*clr;return f;}
vec4 geLC(float x){return vec4(vec3(mix(mix(mix(mix(mix(mix(mix(mix(mix(mix(mix(mix(mix(mix(mix(vec3(0., 0., 0.),vec3(0., 0., 0.), smoothstep(0.0, 0.063, x)),vec3(0., 0., 0.), smoothstep(0.063, 0.125, x)),vec3(0.0, 0., 0.), smoothstep(0.125, 0.188, x)),vec3(0.188, 0.131, 0.116), smoothstep(0.188, 0.227, x)),vec3(0.31, 0.204, 0.537), smoothstep(0.227, 0.251, x)),vec3(0.192, 0.106, 0.286), smoothstep(0.251, 0.314, x)),vec3(0.102, 0.008, 0.341), smoothstep(0.314, 0.392, x)),vec3(0.086, 0.0, 0.141), smoothstep(0.392, 0.502, x)),vec3(1.0, 0.31, 0.0), smoothstep(0.502, 0.604, x)),vec3(.1, 0.1, 0.1), smoothstep(0.604, 0.643, x)),vec3(1.0, 0.929, 0.0), smoothstep(0.643, 0.761, x)),vec3(1.0, 0.086, 0.424), smoothstep(0.761, 0.847, x)),vec3(1.0, 0.49, 0.0), smoothstep(0.847, 0.89, x)),vec3(0.945, 0.275, 0.475), smoothstep(0.89, 0.941, x)),vec3(0.251, 0.275, 0.796), smoothstep(0.941, 1.0, x))),1.0);}
float diTN(vec2 p){vec2 f = fract(p);f = (f * f) * (3.0 - (2.0 * f));float n = dot(floor(p), vec2(1.0, 157.0));vec4 a = fract(sin(vec4(n + 0.0, n + 1.0, n + 157.0, n + 158.0)) * 43758.5453123);return mix(mix(a.x, a.y, f.x), mix(a.z, a.w, f.x), f.y);}
float fbm(vec2 p){const mat2 m = mat2(0.80, -0.60, 0.60, 0.80);float f = 0.0;f += 0.5000*diTN(p); p = m*p*2.02;f += 0.2500*diTN(p); p = m*p*2.03;f += 0.1250*diTN(p); p = m*p*2.01;f += 0.0625*diTN(p);return f/0.9375;}
vec4 geLS(vec2 p){vec2 pp = (p - vec2(0.5)) * 2.0;float a = atan(pp.y, pp.x);vec4 cp = vec4(sin(a * 1.0), length(pp), sin(a * 13.0), sin(a * 53.0));float d = sin(clamp(pow(length(vec2(0.5) - p) * 0.5 + haloScale /2., 5.0), 0.0, 1.0) * 3.14159);vec3 c = vec3(d) * vec3(fbm(cp.xy * 16.0) * fbm(cp.zw * 9.0) * max(max(max(max(0.5, sin(a * 1.0)), sin(a * 3.0) * 0.8), sin(a * 7.0) * 0.8), sin(a * 9.0) * 10.6));c *= vec3(mix(2.0, (sin(length(pp.xy) * 256.0) * 0.5) + 0.5, sin((clamp((length(pp.xy) - 0.875) / 0.1, 0.0, 1.0) + 0.0) * 2.0 * 3.14159) * 1.5) + 0.5) * 0.3275;return vec4(vec3(c * 1.0), d);}
vec4 geLD(vec2 p){p.xy += vec2(fbm(p.yx * 3.0), fbm(p.yx * 2.0)) * 0.0825;vec3 o = vec3(mix(0.125, 0.25, max(max(smoothstep(0.1, 0.0, length(p - vec2(0.25))),smoothstep(0.4, 0.0, length(p - vec2(0.75)))),smoothstep(0.8, 0.0, length(p - vec2(0.875, 0.125))))));o += vec3(max(fbm(p * 1.0) - 0.5, 0.0)) * 0.5;o += vec3(max(fbm(p * 2.0) - 0.5, 0.0)) * 0.5;o += vec3(max(fbm(p * 4.0) - 0.5, 0.0)) * 0.25;o += vec3(max(fbm(p * 8.0) - 0.75, 0.0)) * 1.0;o += vec3(max(fbm(p * 16.0) - 0.75, 0.0)) * 0.75;o += vec3(max(fbm(p * 64.0) - 0.75, 0.0)) * 0.5;return vec4(clamp(o, vec3(0.15), vec3(1.0)), 1.0);}
vec4 txL(sampler2D tex, vec2 xtC){if(((xtC.x < 0.) || (xtC.y < 0.)) || ((xtC.x > 1.) || (xtC.y > 1.))){return vec4(0.0);}else{return texture(tex, xtC); }}
vec4 txD(sampler2D tex, vec2 xtC, vec2 dir, vec3 ditn) {return vec4(txL(tex, (xtC + (dir * ditn.r))).r,txL(tex, (xtC + (dir * ditn.g))).g,txL(tex, (xtC + (dir * ditn.b))).b,1.0);}
vec4 strB(){vec2 aspXtc = vec2(1.0) - (((vxtC - vec2(0.5)) * vec2(1.0)) + vec2(0.5)); vec2 xtC = vec2(1.0) - vxtC; vec2 ghvc = (vec2(0.5) - xtC) * 0.3 - lensPosition; vec2 ghNm = normalize(ghvc * vec2(1.0)) * vec2(1.0);vec2 haloVec = normalize(ghvc) * 0.6;vec2 hlNm = ghNm * 0.6;vec2 texelSize = vec2(1.0) / vec2(iResolution.xy);vec3 ditn = vec3(-(texelSize.x * 1.5), 0.2, texelSize.x * 1.5);vec4 c = vec4(0.0);for (int i = 0; i < 8; i++) {vec2 offset = xtC + (ghvc * float(i));c += txD(lensDirtTexture, offset, ghNm, ditn) * pow(max(0.0, 1.0 - (length(vec2(0.5) - offset) / length(vec2(0.5)))), 10.0);}vec2 uyTrz = xtC + hlNm; return (c * geLC((length(vec2(0.5) - aspXtc) / length(vec2(haloScale))))) +(txD(lensDirtTexture, uyTrz, ghNm, ditn) * pow(max(0.0, 1.0 - (length(vec2(0.5) - uyTrz) / length(vec2(0.5)))), 10.0));}
void mainImage(vec4 v,vec2 r,out vec4 i){vec2 g=r-.5;g.y*=iResolution.y/iResolution.x;vec2 l=lensPosition*.5;l.y*=iResolution.y/iResolution.x;vec3 f=mLs(g,l)*20.*colorGain/256.;if(aditionalStreaks){vec3 o=vec3(.9,.2,.1),p=vec3(.3,.1,.9);for(float n=0.;n<10.;n++)f+=drC(g,pow(rnd(n*2e3)*2.8,.1)+1.41,0.,o+n,p+n,rnd(n*20.)*3.+.2-.5,lensPosition);}if(secondaryGhosts){vec3 n=vec3(0);n+=rHx(g,-lensPosition*.25,ghostScale*1.4,vec3(.25,.35,0));n+=rHx(g,lensPosition*.25,ghostScale*.5,vec3(1,.5,.5));n+=rHx(g,lensPosition*.1,ghostScale*1.6,vec3(1));n+=rHx(g,lensPosition*1.8,ghostScale*2.,vec3(0,.5,.75));n+=rHx(g,lensPosition*1.25,ghostScale*.8,vec3(1,1,.5));n+=rHx(g,-lensPosition*1.25,ghostScale*5.,vec3(.5,.5,.25));n+=fpow(1.-abs(distance(lensPosition*.8,g)-.7),.985)*colorGain/2100.;f+=n;}if(starBurst){vxtC=g+.5;vec4 n=geLD(g);float o=1.-clamp(0.5,0.,.5)*2.;n+=mix(n,pow(n*2.,vec4(2))*.5,o);float s=(g.x+g.y)*(1./6.);vec2 d=mat2(cos(s),-sin(s),sin(s),cos(s))*vxtC;n+=geLS(d)*2.;f+=clamp(n.xyz*strB().xyz,.01,1.);}i=enabled?vec4(mix(f,vec3(0),opacity)+v.xyz,v.w):vec4(v);}
`,
}
export class LensFlareEffect extends Effect {
constructor({
blendFunction = BlendFunction.NORMAL,
enabled = true,
glareSize = 0.2,
lensPosition = [0.01, 0.01],
iResolution = [0, 0],
starPoints = 6,
flareSize = 0.01,
flareSpeed = 0.01,
flareShape = 0.01,
animated = true,
anamorphic = false,
colorGain = new Color(70, 70, 70),
lensDirtTexture = null,
haloScale = 0.5,
secondaryGhosts = true,
aditionalStreaks = true,
ghostScale = 0.0,
opacity = 1.0,
starBurst = true
} = {}) {
super('LensFlareEffect', LensFlareShader.fragmentShader, {
blendFunction,
uniforms: new Map([
['enabled', new Uniform(enabled)],
['glareSize', new Uniform(glareSize)],
['lensPosition', new Uniform(lensPosition)],
['iTime', new Uniform(0)],
['iResolution', new Uniform(iResolution)],
['starPoints', new Uniform(starPoints)],
['flareSize', new Uniform(flareSize)],
['flareSpeed', new Uniform(flareSpeed)],
['flareShape', new Uniform(flareShape)],
['animated', new Uniform(animated)],
['anamorphic', new Uniform(anamorphic)],
['colorGain', new Uniform(colorGain)],
['lensDirtTexture', new Uniform(lensDirtTexture)],
['haloScale', new Uniform(haloScale)],
['secondaryGhosts', new Uniform(secondaryGhosts)],
['aditionalStreaks', new Uniform(aditionalStreaks)],
['ghostScale', new Uniform(ghostScale)],
['starBurst', new Uniform(starBurst)],
['opacity', new Uniform(opacity)]
])
})
}
update(renderer, inputBuffer, deltaTime) {
this.uniforms.get('iTime').value += deltaTime
}
}
const LensFlare = wrapEffect(LensFlareEffect)
function UltimateLensFlare({
position = [0, 3, 0], // Sun position
blendFunction = BlendFunction.SCREEN,
glareSize = 0.35,
followMouse = false,
starPoints = 2.0,
flareSize = 0.5,
flareSpeed = 0.3,
flareShape = 0.02,
animated = true,
anamorphic = false,
colorGain = new Color(255, 165, 0),
dirtTextureFile = 'https://i.ibb.co/c3x4dBy/lens-Dirt-Texture.jpg',
haloScale = 0.5,
secondaryGhosts = true,
aditionalStreaks = true,
ghostScale = 0.3,
starBurst = true,
enabled = true,
opacity = 1.0
}) {
const lensRef = useRef()
const screenPosition = new Vector3(...position)
let flarePosition = new Vector3()
const { viewport, raycaster } = useThree()
const lensDirtTexture = useTexture(dirtTextureFile)
let projectedPosition
useFrame(({ scene, camera, delta }) => {
if (lensRef.current) {
projectedPosition = screenPosition.clone()
projectedPosition.project(camera)
flarePosition.set(projectedPosition.x, projectedPosition.y, projectedPosition.z)
raycaster.setFromCamera(projectedPosition, camera)
const intersects = raycaster.intersectObjects(scene.children, true)
if (intersects.length > 0) {
const firstIntersect = intersects[0]
if (firstIntersect.object.userData && firstIntersect.object.userData.lensflare === 'no-occlusion') {
easing.damp(lensRef.current.uniforms.get('opacity'), 'value', 1.0, 0.07, delta)
} else {
const material = firstIntersect.object.material
if (material) {
if (material.transparent && material.opacity < 0.8) {
easing.damp(lensRef.current.uniforms.get('opacity'), 'value', material.opacity * 0.5, 0.07, delta)
} else if (material.transmission && material.transmission > 0.2) {
easing.damp(lensRef.current.uniforms.get('opacity'), 'value', 0.3, 0.07, delta)
} else {
easing.damp(lensRef.current.uniforms.get('opacity'), 'value', 0.0, 0.07, delta)
}
} else {
easing.damp(lensRef.current.uniforms.get('opacity'), 'value', 0.0, 0.07, delta)
}
}
} else {
easing.damp(lensRef.current.uniforms.get('opacity'), 'value', 1.0, 0.07, delta)
}
lensRef.current.uniforms.get('lensPosition').value.x = flarePosition.x
lensRef.current.uniforms.get('lensPosition').value.y = flarePosition.y
}
})
useEffect(() => {
if (lensRef.current) {
lensRef.current.uniforms.get('iResolution').value.x = viewport.width
lensRef.current.uniforms.get('iResolution').value.y = viewport.height
}
}, [viewport])
return useMemo(
() => (
<LensFlare
ref={lensRef}
iResolution={[viewport.width, viewport.height]}
blendFunction={blendFunction}
lensDirtTexture={lensDirtTexture}
glareSize={glareSize}
starPoints={starPoints}
flareSize={flareSize}
flareSpeed={flareSpeed}
flareShape={flareShape}
animated={animated}
anamorphic={anamorphic}
colorGain={colorGain}
haloScale={haloScale}
secondaryGhosts={secondaryGhosts}
aditionalStreaks={aditionalStreaks}
ghostScale={ghostScale}
starBurst={starBurst}
enabled={enabled}
opacity={opacity}
/>
),
[
glareSize,
blendFunction,
starPoints,
flareSize,
flareSpeed,
flareShape,
animated,
anamorphic,
colorGain,
haloScale,
secondaryGhosts,
aditionalStreaks,
ghostScale,
starBurst,
enabled,
opacity,
viewport.width,
viewport.height
]
)
}
export default UltimateLensFlaresrc/components/lensflare/util.js
//Converted from TypeScript to JavaScript for lens flare utility
import React, { forwardRef, useMemo, useLayoutEffect } from 'react'
import { useThree } from '@react-three/fiber'
import { BlendFunction } from 'postprocessing'
const isRef = (ref) => !!ref.current
export const resolveRef = (ref) => (isRef(ref) ? ref.current : ref)
export const wrapEffect = (effectImpl, defaultBlendMode = BlendFunction.NORMAL) =>
forwardRef(function Wrap({ blendFunction, opacity, ...props }, ref) {
const invalidate = useThree((state) => state.invalidate)
const effect = useMemo(() => new effectImpl(props), [props])
useLayoutEffect(() => {
effect.blendMode.blendFunction = !blendFunction && blendFunction !== 0 ? defaultBlendMode : blendFunction
if (opacity !== undefined) effect.blendMode.opacity.value = opacity
invalidate()
}, [blendFunction, effect.blendMode, opacity])
return React.createElement('primitive', { ref, object: effect, dispose: null })
})
src/components/weather3d/Clouds.js
import React from 'react';
import { Clouds as DreiClouds, Cloud } from '@react-three/drei';
import * as THREE from 'three';
const Clouds = ({ intensity = 0.7, speed = 0.1, portalMode = false }) => {
// Determine cloud colors based on weather condition
const getCloudColors = () => {
return {
primary: '#FFFFFF',
secondary: '#F8F8F8',
tertiary: '#F0F0F0',
light: '#FAFAFA',
intensity: intensity
};
};
const colors = getCloudColors();
// Portal mode: show fewer, centered clouds for performance
if (portalMode) {
return (
<group>
<DreiClouds material={THREE.MeshLambertMaterial}>
{/* Only 2 centered clouds for portal preview */}
<Cloud
segments={40}
bounds={[8, 3, 3]}
volume={8}
color={colors.primary}
fade={50}
speed={speed}
opacity={colors.intensity}
position={[0, 4, -2]}
/>
<Cloud
segments={35}
bounds={[6, 2.5, 2.5]}
volume={6}
color={colors.secondary}
fade={60}
speed={speed * 0.8}
opacity={colors.intensity * 0.8}
position={[2, 3, -3]}
/>
</DreiClouds>
</group>
);
}
// Full cloud system for main scene and fullscreen portals
return (
<group>
<DreiClouds material={THREE.MeshLambertMaterial}>
{/* Large fluffy cloud cluster */}
<Cloud
segments={80}
bounds={[12, 4, 4]}
volume={15}
color={colors.primary}
fade={50}
speed={speed}
opacity={colors.intensity}
position={[-5, 4, -2]}
/>
<Cloud
segments={70}
bounds={[14, 3, 3]}
volume={12}
color={colors.secondary}
fade={60}
speed={speed * 0.7}
opacity={colors.intensity * 0.9}
position={[6, 3.5, -1]}
/>
<Cloud
segments={60}
bounds={[10, 3, 3]}
volume={10}
color={colors.tertiary}
fade={70}
speed={speed * 1.1}
opacity={colors.intensity * 0.8}
position={[0, 5.5, -3]}
/>
{/* Additional smaller fluffy clouds */}
<Cloud
segments={50}
bounds={[8, 2.5, 2.5]}
volume={8}
color={colors.light}
fade={80}
speed={speed * 0.9}
opacity={colors.intensity * 0.6}
position={[-8, 3, -4]}
/>
<Cloud
segments={45}
bounds={[6, 2, 2]}
volume={6}
color={colors.secondary}
fade={90}
speed={speed * 1.3}
opacity={colors.intensity * 0.5}
position={[8, 6, -2]}
/>
<Cloud
segments={55}
bounds={[9, 2.5, 2.5]}
volume={9}
color={colors.tertiary}
fade={75}
speed={speed * 0.6}
opacity={colors.intensity * 0.7}
position={[-2, 2.5, -5]}
/>
</DreiClouds>
</group>
);
};
export default Clouds;src/components/weather3d/Moon.js
import React, { useRef } from 'react';
import { useFrame, useLoader } from '@react-three/fiber';
import { Sphere } from '@react-three/drei';
import * as THREE from 'three';
const Moon = () => {
const moonRef = useRef();
const moonTexture = useLoader(THREE.TextureLoader, '/textures/moon_2k.jpg');
useFrame((state) => {
if (moonRef.current) {
moonRef.current.rotation.y = state.clock.getElapsedTime() * 0.1;
}
});
const moonMaterial = new THREE.MeshLambertMaterial({
map: moonTexture,
emissive: '#111111',
emissiveIntensity: 0.5,
});
return (
<group position={[0, 4.5, 0]}>
<Sphere ref={moonRef} args={[2, 32, 32]} material={moonMaterial} />
{/* Soft moonlight */}
<pointLight position={[0, 0, 5]} intensity={2} color="#E6E6FA" />
</group>
);
};
export default Moon;src/components/weather3d/Rain.js
import React, { useRef, useMemo } from 'react';
import { useFrame } from '@react-three/fiber';
import * as THREE from 'three';
const Rain = ({ count = 1000 }) => {
const meshRef = useRef();
const dummy = useMemo(() => new THREE.Object3D(), []);
const particles = useMemo(() => {
const temp = [];
for (let i = 0; i < count; i++) {
temp.push({
x: (Math.random() - 0.5) * 20,
y: Math.random() * 20 + 10,
z: (Math.random() - 0.5) * 20,
speed: Math.random() * 0.1 + 0.05,
});
}
return temp;
}, [count]);
useFrame(() => {
particles.forEach((particle, i) => {
particle.y -= particle.speed;
if (particle.y < -1) {
particle.y = 20;
}
dummy.position.set(particle.x, particle.y, particle.z);
dummy.updateMatrix();
meshRef.current.setMatrixAt(i, dummy.matrix);
});
meshRef.current.instanceMatrix.needsUpdate = true;
});
return (
<instancedMesh ref={meshRef} args={[null, null, count]}>
<cylinderGeometry args={[0.01, 0.01, 0.5, 8]} />
<meshBasicMaterial color="#87CEEB" transparent opacity={0.6} />
</instancedMesh>
);
};
export default Rain;src/components/weather3d/Snow.js
import React, { useRef, useMemo } from 'react';
import { useFrame } from '@react-three/fiber';
import * as THREE from 'three';
const Snow = ({ count = 500 }) => {
const meshRef = useRef();
const dummy = useMemo(() => new THREE.Object3D(), []);
const particles = useMemo(() => {
const temp = [];
for (let i = 0; i < count; i++) {
temp.push({
x: (Math.random() - 0.5) * 20,
y: Math.random() * 20 + 10,
z: (Math.random() - 0.5) * 20,
speed: Math.random() * 0.02 + 0.01,
drift: Math.random() * 0.02 - 0.01,
});
}
return temp;
}, [count]);
useFrame((state) => {
particles.forEach((particle, i) => {
particle.y -= particle.speed;
particle.x += Math.sin(state.clock.elapsedTime + i) * particle.drift;
if (particle.y < -1) {
particle.y = 20;
particle.x = (Math.random() - 0.5) * 20;
}
dummy.position.set(particle.x, particle.y, particle.z);
dummy.rotation.x = state.clock.elapsedTime * 2;
dummy.rotation.y = state.clock.elapsedTime * 3;
dummy.updateMatrix();
meshRef.current.setMatrixAt(i, dummy.matrix);
});
meshRef.current.instanceMatrix.needsUpdate = true;
});
return (
<instancedMesh ref={meshRef} args={[null, null, count]}>
<octahedronGeometry args={[0.05, 0]} />
<meshBasicMaterial color="#FFFFFF" />
</instancedMesh>
);
};
export default Snow;src/components/weather3d/Storm.js
import React, { useRef } from 'react';
import { useFrame } from '@react-three/fiber';
import { Clouds as DreiClouds, Cloud } from '@react-three/drei';
import * as THREE from 'three';
import Rain from './Rain';
const Storm = () => {
const cloudsRef = useRef();
const lightningLightRef = useRef();
const lightningActive = useRef(false);
useFrame((state) => {
// Lightning flash with ambient light
if (Math.random() < 0.003 && !lightningActive.current) {
lightningActive.current = true;
if (lightningLightRef.current) {
// Random X position for each flash
const randomX = (Math.random() - 0.5) * 10; // Range: -5 to 5
lightningLightRef.current.position.x = randomX;
// Single bright flash
lightningLightRef.current.intensity = 90;
setTimeout(() => {
if (lightningLightRef.current) lightningLightRef.current.intensity = 0;
lightningActive.current = false;
}, 400);
}
}
});
return (
<group>
<group ref={cloudsRef}>
<DreiClouds material={THREE.MeshLambertMaterial}>
<Cloud
segments={60}
bounds={[12, 3, 3]}
volume={10}
color="#8A8A8A"
fade={100}
speed={0.2}
opacity={0.8}
position={[-3, 4, -2]}
/>
<Cloud
segments={60}
bounds={[12, 3, 3]}
volume={10}
color="#9A9A9A"
fade={100}
speed={0.15}
opacity={0.7}
position={[3, 3, -1]}
/>
<Cloud
segments={60}
bounds={[10, 3, 3]}
volume={10}
color="#7A7A7A"
fade={100}
speed={0.25}
opacity={0.9}
position={[0, 5, -3]}
/>
<Cloud
segments={60}
bounds={[8, 2, 2]}
volume={10}
color="#8A8A8A"
fade={80}
speed={0.18}
opacity={0.6}
position={[-4, 3, -4]}
/>
<Cloud
segments={60}
bounds={[9, 2, 2]}
volume={10}
color="#9A9A9A"
fade={80}
speed={0.22}
opacity={0.7}
position={[4, 4, -2]}
/>
<Cloud
segments={60}
bounds={[6, 2, 2]}
volume={10}
color="#858585"
fade={60}
speed={0.16}
opacity={0.5}
position={[2, 6, -5]}
/>
<Cloud
segments={60}
bounds={[10, 3, 3]}
volume={10}
color="#777777"
fade={70}
speed={0.14}
opacity={0.6}
position={[-5, 7, -3]}
/>
<Cloud
segments={60}
bounds={[9, 2.5, 2.5]}
volume={10}
color="#888888"
fade={75}
speed={0.19}
opacity={0.7}
position={[5, 7.5, -4]}
/>
<Cloud
segments={60}
bounds={[8, 2.5, 2.5]}
volume={10}
color="#7A7A7A"
fade={65}
speed={0.17}
opacity={0.65}
position={[0, 7, -3.5]}
/>
</DreiClouds>
</group>
<Rain count={1500} />
<pointLight
ref={lightningLightRef}
position={[0, 6, -5.5]}
intensity={0}
color="#e6d8b3"
distance={30}
decay={0.8}
castShadow
/>
</group>
);
};
export default Storm;src/components/weather3d/Sun.js
import React, { useRef } from 'react';
import { useFrame, useLoader } from '@react-three/fiber';
import { Sphere } from '@react-three/drei';
import * as THREE from 'three';
const Sun = () => {
const sunRef = useRef();
const sunTexture = useLoader(THREE.TextureLoader, '/textures/sun_2k.jpg');
useFrame((state) => {
if (sunRef.current) {
sunRef.current.rotation.y = state.clock.getElapsedTime() * 0.1;
}
});
const sunMaterial = new THREE.MeshBasicMaterial({
map: sunTexture,
});
return (
<group position={[0, 4.5, 0]}>
<Sphere ref={sunRef} args={[2, 32, 32]} material={sunMaterial} />
{/* Sun lighting */}
<pointLight position={[0, 0, 0]} intensity={2.5} color="#FFD700" distance={25} />
</group>
);
};
export default Sun;src/index.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
src/reportWebVitals.js
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
src/services/weatherService.js
import axios from 'axios';
//true false for prod or dev
const USE_API_ROUTE = true;
const API_BASE = '/api';
const WEATHER_API_BASE = 'https://api.weatherapi.com/v1';
const API_KEY = process.env.REACT_APP_WEATHER_API_KEY;
// Demo data for when Vercel service is unavailable
const getDemoWeatherData = (requestedLocation) => ({
location: {
name: "Demo City",
region: "Demo State",
country: "Demo Country",
lat: 40.7128,
lon: -74.0060,
tz_id: "America/New_York",
localtime_epoch: Math.floor(Date.now() / 1000),
localtime: new Date().toISOString().slice(0, -5)
},
current: {
last_updated_epoch: Math.floor(Date.now() / 1000),
last_updated: new Date().toISOString().slice(0, -5),
temp_c: 22,
temp_f: 72,
is_day: new Date().getHours() >= 6 && new Date().getHours() <= 18 ? 1 : 0,
condition: {
text: "Partly cloudy",
icon: "//cdn.weatherapi.com/weather/64x64/day/116.png",
code: 1003
},
wind_mph: 8.5,
wind_kph: 13.7,
wind_degree: 230,
wind_dir: "SW",
pressure_mb: 1013.0,
pressure_in: 29.91,
precip_mm: 0.0,
precip_in: 0.0,
humidity: 65,
cloud: 40,
feelslike_c: 24,
feelslike_f: 75,
vis_km: 16.0,
vis_miles: 10.0,
uv: 5.0,
gust_mph: 12.1,
gust_kph: 19.4
},
forecast: {
forecastday: [
{
date: new Date().toISOString().split('T')[0],
date_epoch: Math.floor(Date.now() / 1000),
day: {
maxtemp_c: 26,
maxtemp_f: 79,
mintemp_c: 18,
mintemp_f: 64,
avgtemp_c: 22,
avgtemp_f: 72,
maxwind_mph: 12.1,
maxwind_kph: 19.4,
totalprecip_mm: 0.0,
totalprecip_in: 0.0,
totalsnow_cm: 0.0,
avgvis_km: 16.0,
avgvis_miles: 10.0,
avghumidity: 65,
daily_will_it_rain: 0,
daily_chance_of_rain: 10,
daily_will_it_snow: 0,
daily_chance_of_snow: 0,
condition: {
text: "Partly cloudy",
icon: "//cdn.weatherapi.com/weather/64x64/day/116.png",
code: 1003
},
uv: 5.0
}
},
{
date: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString().split('T')[0],
date_epoch: Math.floor(Date.now() / 1000) + 86400,
day: {
maxtemp_c: 24,
maxtemp_f: 75,
mintemp_c: 16,
mintemp_f: 61,
avgtemp_c: 20,
avgtemp_f: 68,
maxwind_mph: 10.5,
maxwind_kph: 16.9,
totalprecip_mm: 2.1,
totalprecip_in: 0.08,
totalsnow_cm: 0.0,
avgvis_km: 12.0,
avgvis_miles: 7.0,
avghumidity: 72,
daily_will_it_rain: 1,
daily_chance_of_rain: 80,
daily_will_it_snow: 0,
daily_chance_of_snow: 0,
condition: {
text: "Light rain",
icon: "//cdn.weatherapi.com/weather/64x64/day/296.png",
code: 1183
},
uv: 3.0
}
},
{
date: new Date(Date.now() + 48 * 60 * 60 * 1000).toISOString().split('T')[0],
date_epoch: Math.floor(Date.now() / 1000) + 172800,
day: {
maxtemp_c: 28,
maxtemp_f: 82,
mintemp_c: 20,
mintemp_f: 68,
avgtemp_c: 24,
avgtemp_f: 75,
maxwind_mph: 15.2,
maxwind_kph: 24.4,
totalprecip_mm: 0.0,
totalprecip_in: 0.0,
totalsnow_cm: 0.0,
avgvis_km: 16.0,
avgvis_miles: 10.0,
avghumidity: 58,
daily_will_it_rain: 0,
daily_chance_of_rain: 5,
daily_will_it_snow: 0,
daily_chance_of_snow: 0,
condition: {
text: "Sunny",
icon: "//cdn.weatherapi.com/weather/64x64/day/113.png",
code: 1000
},
uv: 7.0
}
}
]
},
rateLimited: true, // Flag to indicate this is demo data
serviceUnavailable: true, // Flag to indicate service issues
requestedLocation: requestedLocation, // Store what user actually searched for
cached: false
});
export const weatherService = {
getCurrentWeather: async (location) => {
try {
let response;
if (USE_API_ROUTE) {
// Use caching API route (for production/when enabled)
response = await axios.get(`${API_BASE}/weather`, {
params: { location },
timeout: 10000
});
const data = response.data;
// Log cache info for debugging
if (data.serviceUnavailable) {
console.log(`Vercel service unavailable - serving demo weather data for: ${location}`);
} else if (data.rateLimited) {
console.log(`Rate limited - serving demo weather data for: ${location}`);
} else if (data.cached) {
console.log(`Using cached weather data (${data.cacheAge}s old) for: ${location}`);
} else {
console.log(`Fresh weather data fetched for: ${location}`);
}
return data;
} else {
// Direct API call for local development
console.log('Using direct API call for local development');
response = await axios.get(
`${WEATHER_API_BASE}/forecast.json?key=${API_KEY}&q=${location}&days=3&aqi=no&alerts=no&tz=${Intl.DateTimeFormat().resolvedOptions().timeZone}`,
{ timeout: 10000 }
);
return response.data;
}
} catch (error) {
console.error('Error fetching weather data:', error);
// Handle different types of errors appropriately
if (error.response?.status === 429) {
console.log('Too many requests');
return getDemoWeatherData(location);
}
// Handle user input errors (city not found, typos, etc.) - let them through as errors
if (error.response?.status === 400 || error.response?.status === 404) {
if (error.response?.data?.error) {
throw new Error(error.response.data.error);
}
throw new Error('Location not found. Please check your spelling and try again.');
}
// Handle Vercel service unavailability (500+ errors or network failures)
if (!error.response || error.response?.status >= 500 || error.code === 'NETWORK_ERROR') {
console.log('Vercel service unavailable, using demo data');
return getDemoWeatherData(location);
}
// Handle other API errors normally
if (error.response?.data?.error) {
throw new Error(error.response.data.error);
}
throw error;
}
},
getCurrentLocation: () => {
return new Promise((resolve, reject) => {
if (!navigator.geolocation) {
reject(new Error('Geolocation is not supported by this browser.'));
return;
}
navigator.geolocation.getCurrentPosition(
(position) => {
const { latitude, longitude } = position.coords;
resolve(`${latitude},${longitude}`);
},
(error) => {
reject(error);
},
{
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 600000
}
);
});
}
};
export const getWeatherConditionType = (condition) => {
const conditionLower = condition.toLowerCase();
if (conditionLower.includes('sunny') || conditionLower.includes('clear')) {
return 'sunny';
}
if (conditionLower.includes('thunder') || conditionLower.includes('storm')) {
return 'stormy';
}
if (conditionLower.includes('cloud') || conditionLower.includes('overcast')) {
return 'cloudy';
}
if (conditionLower.includes('rain') || conditionLower.includes('drizzle')) {
return 'rainy';
}
if (conditionLower.includes('snow') || conditionLower.includes('blizzard')) {
return 'snowy';
}
if (conditionLower.includes('fog') || conditionLower.includes('mist')) {
return 'foggy';
}
return 'cloudy';
};
export const isPartlyCloudy = (condition) => {
if (!condition) return false;
const conditionLower = condition.toLowerCase();
return conditionLower.includes('partly') || conditionLower.includes('few clouds') ||
conditionLower.includes('scattered') || conditionLower.includes('broken clouds');
};
export const shouldShowSun = (weatherData) => {
if (!weatherData?.current?.condition?.text) return false;
const currentCondition = weatherData.current.condition.text;
const weatherType = getWeatherConditionType(currentCondition);
const partlyCloudy = isPartlyCloudy(currentCondition);
if (weatherType === 'sunny') {
return true; // Sun always appears for sunny (with or without clouds)
} else if (weatherType === 'cloudy') {
return partlyCloudy; // Sun only appears if partly cloudy
} else if (weatherType === 'rainy') {
return false; // No sun - only clouds and rain
} else if (weatherType === 'snowy') {
return false; // No sun - only clouds and snow
} else if (weatherType === 'stormy') {
return false; // No sun - storm effect only
} else if (weatherType === 'foggy') {
return false; // No sun - only clouds/fog
} else {
return partlyCloudy; // Default case shows sun only if partly cloudy
}
};src/setupTests.js
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {
fontFamily: {
'sans': ['Inter', 'system-ui', 'sans-serif'],
},
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
},
animation: {
'fade-in': 'fadeIn 0.5s ease-in-out',
'slide-up': 'slideUp 0.3s ease-out',
'bounce-gentle': 'bounceGentle 2s infinite',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
slideUp: {
'0%': { transform: 'translateY(20px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
},
bounceGentle: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-5px)' },
},
},
},
},
plugins: [],
}Original author attribution실행 안내·자료
Creating an Immersive 3D Weather Visualization with React Three Fiber
Original author: Carter Rink
Published by Codrops. Copyright (c) 2026 Codrops.
License: MIT, pursuant to the publisher's downloadable-demo grant.
Keep CODROPS-MIT-2026.txt and the original project notices with copies.
Third-party media exceptions and credits are recorded separately in the source inventory.
external/lens-flare/lens-Dirt-Texture.jpg — separate asset license실행 안내·자료
큰 소스 파일과 이미지·모델 등의 자료는 파일을 저장해 확인할 수 있어요.
external/drei-assets/potsdamer_platz_1k.hdr — CC0-1.0실행 안내·자료
큰 소스 파일과 이미지·모델 등의 자료는 파일을 저장해 확인할 수 있어요.
external/drei-assets/CLOUD-MIT-LICENSE.txt — MIT실행 안내·자료
큰 소스 파일과 이미지·모델 등의 자료는 파일을 저장해 확인할 수 있어요.
external/troika-default/sans-serif.normal.400.woff — OFL-1.1실행 안내·자료
큰 소스 파일과 이미지·모델 등의 자료는 파일을 저장해 확인할 수 있어요.
external/lens-flare/LICENSE실행 안내·자료
Creative Commons Legal Code
CC0 1.0 Universal
CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE
LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN
ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS
INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES
REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS
PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM
THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED
HEREUNDER.
Statement of Purpose
The laws of most jurisdictions throughout the world automatically confer
exclusive Copyright and Related Rights (defined below) upon the creator
and subsequent owner(s) (each and all, an "owner") of an original work of
authorship and/or a database (each, a "Work").
Certain owners wish to permanently relinquish those rights to a Work for
the purpose of contributing to a commons of creative, cultural and
scientific works ("Commons") that the public can reliably and without fear
of later claims of infringement build upon, modify, incorporate in other
works, reuse and redistribute as freely as possible in any form whatsoever
and for any purposes, including without limitation commercial purposes.
These owners may contribute to the Commons to promote the ideal of a free
culture and the further production of creative, cultural and scientific
works, or to gain reputation or greater distribution for their Work in
part through the use and efforts of others.
For these and/or other purposes and motivations, and without any
expectation of additional consideration or compensation, the person
associating CC0 with a Work (the "Affirmer"), to the extent that he or she
is an owner of Copyright and Related Rights in the Work, voluntarily
elects to apply CC0 to the Work and publicly distribute the Work under its
terms, with knowledge of his or her Copyright and Related Rights in the
Work and the meaning and intended legal effect of CC0 on those rights.
1. Copyright and Related Rights. A Work made available under CC0 may be
protected by copyright and related or neighboring rights ("Copyright and
Related Rights"). Copyright and Related Rights include, but are not
limited to, the following:
i. the right to reproduce, adapt, distribute, perform, display,
communicate, and translate a Work;
ii. moral rights retained by the original author(s) and/or performer(s);
iii. publicity and privacy rights pertaining to a person's image or
likeness depicted in a Work;
iv. rights protecting against unfair competition in regards to a Work,
subject to the limitations in paragraph 4(a), below;
v. rights protecting the extraction, dissemination, use and reuse of data
in a Work;
vi. database rights (such as those arising under Directive 96/9/EC of the
European Parliament and of the Council of 11 March 1996 on the legal
protection of databases, and under any national implementation
thereof, including any amended or successor version of such
directive); and
vii. other similar, equivalent or corresponding rights throughout the
world based on applicable law or treaty, and any national
implementations thereof.
2. Waiver. To the greatest extent permitted by, but not in contravention
of, applicable law, Affirmer hereby overtly, fully, permanently,
irrevocably and unconditionally waives, abandons, and surrenders all of
Affirmer's Copyright and Related Rights and associated claims and causes
of action, whether now known or unknown (including existing as well as
future claims and causes of action), in the Work (i) in all territories
worldwide, (ii) for the maximum duration provided by applicable law or
treaty (including future time extensions), (iii) in any current or future
medium and for any number of copies, and (iv) for any purpose whatsoever,
including without limitation commercial, advertising or promotional
purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each
member of the public at large and to the detriment of Affirmer's heirs and
successors, fully intending that such Waiver shall not be subject to
revocation, rescission, cancellation, termination, or any other legal or
equitable action to disrupt the quiet enjoyment of the Work by the public
as contemplated by Affirmer's express Statement of Purpose.
3. Public License Fallback. Should any part of the Waiver for any reason
be judged legally invalid or ineffective under applicable law, then the
Waiver shall be preserved to the maximum extent permitted taking into
account Affirmer's express Statement of Purpose. In addition, to the
extent the Waiver is so judged Affirmer hereby grants to each affected
person a royalty-free, non transferable, non sublicensable, non exclusive,
irrevocable and unconditional license to exercise Affirmer's Copyright and
Related Rights in the Work (i) in all territories worldwide, (ii) for the
maximum duration provided by applicable law or treaty (including future
time extensions), (iii) in any current or future medium and for any number
of copies, and (iv) for any purpose whatsoever, including without
limitation commercial, advertising or promotional purposes (the
"License"). The License shall be deemed effective as of the date CC0 was
applied by Affirmer to the Work. Should any part of the License for any
reason be judged legally invalid or ineffective under applicable law, such
partial invalidity or ineffectiveness shall not invalidate the remainder
of the License, and in such case Affirmer hereby affirms that he or she
will not (i) exercise any of his or her remaining Copyright and Related
Rights in the Work or (ii) assert any associated claims and causes of
action with respect to the Work, in either case contrary to Affirmer's
express Statement of Purpose.
4. Limitations and Disclaimers.
a. No trademark or patent rights held by Affirmer are waived, abandoned,
surrendered, licensed or otherwise affected by this document.
b. Affirmer offers the Work as-is and makes no representations or
warranties of any kind concerning the Work, express, implied,
statutory or otherwise, including without limitation warranties of
title, merchantability, fitness for a particular purpose, non
infringement, or the absence of latent or other defects, accuracy, or
the present or absence of errors, whether or not discoverable, all to
the greatest extent permissible under applicable law.
c. Affirmer disclaims responsibility for clearing rights of other persons
that may apply to the Work or any use thereof, including without
limitation any person's Copyright and Related Rights in the Work.
Further, Affirmer disclaims responsibility for obtaining any necessary
consents, permissions or other rights required for any use of the
Work.
d. Affirmer understands and acknowledges that Creative Commons is not a
party to this document and has no duty or obligation with respect to
this CC0 or use of the Work.
Bundled dependency licenses실행 안내·자료
react@19.1.1 — LICENSE
MIT License
Copyright (c) Meta Platforms, Inc. and affiliates.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
scheduler@0.26.0 — LICENSE
MIT License
Copyright (c) Meta Platforms, Inc. and affiliates.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
react-dom@19.1.1 — LICENSE
MIT License
Copyright (c) Meta Platforms, Inc. and affiliates.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
react-reconciler@0.31.0 — LICENSE
MIT License
Copyright (c) Meta Platforms, Inc. and affiliates.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
three@0.179.1 — LICENSE
The MIT License
Copyright © 2010-2025 three.js authors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
use-sync-external-store@1.7.0 — LICENSE
MIT License
Copyright (c) Meta Platforms, Inc. and affiliates.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
zustand@5.0.15 — LICENSE
MIT License
Copyright (c) 2019 Paul Henschel
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
suspend-react@0.1.3 — LICENSE
MIT License
Copyright (c) 2021 Paul Henschel
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
scheduler@0.25.0 — LICENSE
MIT License
Copyright (c) Meta Platforms, Inc. and affiliates.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
its-fine@2.0.0 — LICENSE
MIT License
Copyright (c) 2022-2025 Poimandres
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
react-use-measure@2.1.7 — LICENSE
MIT License
Copyright (c) 2019-2025 Poimandres
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
@babel/runtime@7.29.7 — LICENSE
MIT License
Copyright (c) 2014-present Sebastian McKenzie and other contributors
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
@react-three/drei@10.6.1 — LICENSE
MIT License
Copyright (c) 2020 react-spring
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
@use-gesture/core@10.3.1 — LICENSE
Copyright (c) 2018-present Paul Henschel <drcmda@gmail.com>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
@use-gesture/react@10.3.1 — LICENSE
Copyright (c) 2018-present Paul Henschel <drcmda@gmail.com>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
three-stdlib@2.36.1 — LICENSE
MIT License
Copyright (c) 2021-2023 Poimandres
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
potpack@1.0.2 — LICENSE
ISC License
Copyright (c) 2018, Mapbox
Permission to use, copy, modify, and/or distribute this software for any purpose
with or without fee is hereby granted, provided that the above copyright notice
and this permission notice appear in all copies.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
THIS SOFTWARE.
fflate@0.6.11 — LICENSE
MIT License
Copyright (c) 2020 Arjun Barrett
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
troika-worker-utils@0.52.0 — LICENSE
MIT License
Copyright (c) 2019 ProtectWise
Copyright (c) 2021 Jason Johnston
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
webgl-sdf-generator@1.1.1 — LICENSE.txt
Copyright (c) 2021 Jason Johnston
MIT License
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
bidi-js@1.1.0 — LICENSE.txt
Copyright (c) 2021 Jason Johnston
MIT License
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
troika-three-utils@0.52.5 — LICENSE
MIT License
Copyright (c) 2019 ProtectWise
Copyright (c) 2021 Jason Johnston
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
troika-three-text@0.52.5 — LICENSE
MIT License
Copyright (c) 2019 ProtectWise
Copyright (c) 2021 Jason Johnston
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
meshline@3.3.1 — LICENSE
MIT License
Copyright (c) 2016 Jaume Sanchez
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
camera-controls@3.1.2 — LICENSE
MIT License
Copyright (c) 2017 @yomotsu
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
hls.js@1.7.3 — LICENSE
Copyright (c) 2017 Dailymotion (http://www.dailymotion.com)
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
src/remux/mp4-generator.js and src/demux/exp-golomb.ts implementation in this project
are derived from the HLS library for video.js (https://github.com/videojs/videojs-contrib-hls)
That work is also covered by the Apache 2 License, following copyright:
Copyright (c) 2013-2015 Brightcove
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
stats.js@0.17.0 — LICENSE
The MIT License
Copyright (c) 2009-2016 stats.js authors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
detect-gpu@5.0.70 — LICENSE
MIT License
Copyright (c) 2020 Tim van Scherpenzeel
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
three-mesh-bvh@0.8.3 — LICENSE
MIT License
Copyright (c) 2018 Garrett Johnson
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
@monogrid/gainmap-js@3.4.0 — LICENSE
MIT License
Copyright (c) 2023 MONOGRID
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
zustand@4.5.7 — LICENSE
MIT License
Copyright (c) 2019 Paul Henschel
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
tunnel-rat@0.1.2 — LICENSE
MIT License
Copyright (c) 2022 Poimandres
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
postprocessing@6.37.7 — LICENSE.md
Copyright © 2015 Raoul van Rüschen
This software is provided 'as-is', without any express or implied warranty. In
no event will the authors be held liable for any damages arising from the use of
this software.
Permission is granted to anyone to use this software for any purpose, including
commercial applications, and to alter it and redistribute it freely, subject to
the following restrictions:
1. The origin of this software must not be misrepresented; you must not claim
that you wrote the original software. If you use this software in a product,
an acknowledgment in the product documentation would be appreciated but is
not required.
2. Altered source versions must be plainly marked as such, and must not be
misrepresented as being the original software.
3. This notice may not be removed or altered from any source distribution.
n8ao@1.10.3 — LICENSE
Creative Commons Legal Code
CC0 1.0 Universal
CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE
LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN
ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS
INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES
REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS
PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM
THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED
HEREUNDER.
Statement of Purpose
The laws of most jurisdictions throughout the world automatically confer
exclusive Copyright and Related Rights (defined below) upon the creator
and subsequent owner(s) (each and all, an "owner") of an original work of
authorship and/or a database (each, a "Work").
Certain owners wish to permanently relinquish those rights to a Work for
the purpose of contributing to a commons of creative, cultural and
scientific works ("Commons") that the public can reliably and without fear
of later claims of infringement build upon, modify, incorporate in other
works, reuse and redistribute as freely as possible in any form whatsoever
and for any purposes, including without limitation commercial purposes.
These owners may contribute to the Commons to promote the ideal of a free
culture and the further production of creative, cultural and scientific
works, or to gain reputation or greater distribution for their Work in
part through the use and efforts of others.
For these and/or other purposes and motivations, and without any
expectation of additional consideration or compensation, the person
associating CC0 with a Work (the "Affirmer"), to the extent that he or she
is an owner of Copyright and Related Rights in the Work, voluntarily
elects to apply CC0 to the Work and publicly distribute the Work under its
terms, with knowledge of his or her Copyright and Related Rights in the
Work and the meaning and intended legal effect of CC0 on those rights.
1. Copyright and Related Rights. A Work made available under CC0 may be
protected by copyright and related or neighboring rights ("Copyright and
Related Rights"). Copyright and Related Rights include, but are not
limited to, the following:
i. the right to reproduce, adapt, distribute, perform, display,
communicate, and translate a Work;
ii. moral rights retained by the original author(s) and/or performer(s);
iii. publicity and privacy rights pertaining to a person's image or
likeness depicted in a Work;
iv. rights protecting against unfair competition in regards to a Work,
subject to the limitations in paragraph 4(a), below;
v. rights protecting the extraction, dissemination, use and reuse of data
in a Work;
vi. database rights (such as those arising under Directive 96/9/EC of the
European Parliament and of the Council of 11 March 1996 on the legal
protection of databases, and under any national implementation
thereof, including any amended or successor version of such
directive); and
vii. other similar, equivalent or corresponding rights throughout the
world based on applicable law or treaty, and any national
implementations thereof.
2. Waiver. To the greatest extent permitted by, but not in contravention
of, applicable law, Affirmer hereby overtly, fully, permanently,
irrevocably and unconditionally waives, abandons, and surrenders all of
Affirmer's Copyright and Related Rights and associated claims and causes
of action, whether now known or unknown (including existing as well as
future claims and causes of action), in the Work (i) in all territories
worldwide, (ii) for the maximum duration provided by applicable law or
treaty (including future time extensions), (iii) in any current or future
medium and for any number of copies, and (iv) for any purpose whatsoever,
including without limitation commercial, advertising or promotional
purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each
member of the public at large and to the detriment of Affirmer's heirs and
successors, fully intending that such Waiver shall not be subject to
revocation, rescission, cancellation, termination, or any other legal or
equitable action to disrupt the quiet enjoyment of the Work by the public
as contemplated by Affirmer's express Statement of Purpose.
3. Public License Fallback. Should any part of the Waiver for any reason
be judged legally invalid or ineffective under applicable law, then the
Waiver shall be preserved to the maximum extent permitted taking into
account Affirmer's express Statement of Purpose. In addition, to the
extent the Waiver is so judged Affirmer hereby grants to each affected
person a royalty-free, non transferable, non sublicensable, non exclusive,
irrevocable and unconditional license to exercise Affirmer's Copyright and
Related Rights in the Work (i) in all territories worldwide, (ii) for the
maximum duration provided by applicable law or treaty (including future
time extensions), (iii) in any current or future medium and for any number
of copies, and (iv) for any purpose whatsoever, including without
limitation commercial, advertising or promotional purposes (the
"License"). The License shall be deemed effective as of the date CC0 was
applied by Affirmer to the Work. Should any part of the License for any
reason be judged legally invalid or ineffective under applicable law, such
partial invalidity or ineffectiveness shall not invalidate the remainder
of the License, and in such case Affirmer hereby affirms that he or she
will not (i) exercise any of his or her remaining Copyright and Related
Rights in the Work or (ii) assert any associated claims and causes of
action with respect to the Work, in either case contrary to Affirmer's
express Statement of Purpose.
4. Limitations and Disclaimers.
a. No trademark or patent rights held by Affirmer are waived, abandoned,
surrendered, licensed or otherwise affected by this document.
b. Affirmer offers the Work as-is and makes no representations or
warranties of any kind concerning the Work, express, implied,
statutory or otherwise, including without limitation warranties of
title, merchantability, fitness for a particular purpose, non
infringement, or the absence of latent or other defects, accuracy, or
the present or absence of errors, whether or not discoverable, all to
the greatest extent permissible under applicable law.
c. Affirmer disclaims responsibility for clearing rights of other persons
that may apply to the Work or any use thereof, including without
limitation any person's Copyright and Related Rights in the Work.
Further, Affirmer disclaims responsibility for obtaining any necessary
consents, permissions or other rights required for any use of the
Work.
d. Affirmer understands and acknowledges that Creative Commons is not a
party to this document and has no duty or obligation with respect to
this CC0 or use of the Work.
@react-three/postprocessing@3.0.4 — LICENSE
MIT License
Copyright (c) 2020 react-spring
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
axios@1.11.0 — LICENSE
# Copyright (c) 2014-present Matt Zabriskie & Collaborators
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
web-vitals@2.1.4 — LICENSE
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright 2020 Google LLC
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
BEHIND THE EXAMPLE
이 장면을 만드는 원리
장애 때 반환하는 예제 날씨와 실제 관측값
표시한 대기·진행·완료 상태의 실제 근거를 구분합니다.
- 이 예제에서는
- weatherService는 429·서버 오류·네트워크 실패에서 Demo City의 고정 날씨를 반환하고 serviceUnavailable·rateLimited·requestedLocation을 붙입니다. 400·404의 잘못된 위치는 오류로 남깁니다.
코드와 함께 확인하기
코드에서 찾기
getDemoWeatherDataweatherService.js성공 모양의 응답에 예제 데이터 여부를 별도 필드로 전달합니다.
직접 해보기
위치 오류·요청 제한·네트워크 실패를 각각 주입하고 장면과 텍스트 표시를 비교합니다.
살펴볼 변화예제 날씨가 검색한 도시의 실제 관측값으로 표시되지 않고 오류 종류에 맞는 안내와 재시도가 제공되는지 확인해야 합니다.