I’ve at all times been focused on knowledge visualization utilizing Three.js / R3F, and I believed a climate net app can be the proper place to start out. One in every of my favourite open-source libraries, @react-three/drei, already has a bunch of nice instruments like clouds, sky, and stars that match completely into visualizing the climate in 3D.
This tutorial explores learn how to rework API knowledge right into a 3D expertise, the place we add a bit aptitude and enjoyable to climate visualization.
The Know-how Stack
Our climate world is constructed on a basis of a few of my favourite applied sciences:
Climate Parts
The guts of our visualization lies in conditionally displaying a practical solar, moon, and/or clouds based mostly on the climate
outcomes out of your metropolis or a metropolis you seek for, particles that simulate rain or snow, day/night time logic, and a few enjoyable
lighting results throughout a thunderstorm. We’ll begin by constructing these climate elements after which transfer on to displaying
them based mostly on the outcomes of the WeatherAPI name.
Solar + Moon Implementation
Let’s begin easy: we’ll create a solar and moon part that’s only a sphere with a practical texture wrapped
round it. We’ll additionally give it a bit rotation and a few lighting.
// Solar.js and Moon.js Element, a texture wrapped sphere
import React, { useRef } from 'react';
import { useFrame, useLoader } from '@react-three/fiber';
import { Sphere } from '@react-three/drei';
import * as THREE from 'three';
const Solar = () => {
const sunRef = useRef();
const sunTexture = useLoader(THREE.TextureLoader, '/textures/sun_2k.jpg');
useFrame((state) => {
if (sunRef.present) {
sunRef.present.rotation.y = state.clock.getElapsedTime() * 0.1;
}
});
const sunMaterial = new THREE.MeshBasicMaterial({
map: sunTexture,
});
return (
);
};
export default Sun;I grabbed the CC0 texture from here. The moon component is essentially the same; I used this image. The pointLight intensity is low because most of our lighting will come from the sky.
Rain: Instanced Cylinders
Next, let’s create a rain particle effect. To keep things performant, we’re going to use instancedMesh instead of creating a separate mesh component for each rain particle. We’ll render a single geometry (THREE.Object3D for each particle in every frame, we’ll reuse a single dummy object. This saves memory and prevents the overhead of creating and garbage-collecting a large number of temporary objects within the animation loop. We’ll also use the useMemo hook to create and initialize the particles array only once when the component mounts.
// Rain.js - instanced rendering
const Rain = ({ count = 1000 }) => {
const meshRef = useRef();
const dummy = useMemo(() => new THREE.Object3D(), []);
const particles = useMemo(() => {
const temp = [];
for (let i = 0; i < rely; i++) {
temp.push({
x: (Math.random() - 0.5) * 20,
y: Math.random() * 20 + 10,
z: (Math.random() - 0.5) * 20,
pace: Math.random() * 0.1 + 0.05,
});
}
return temp;
}, [count]);
useFrame(() => {
particles.forEach((particle, i) => {
particle.y -= particle.pace;
if (particle.y < -1) {
particle.y = 20; // Reset to high
}
dummy.place.set(particle.x, particle.y, particle.z);
dummy.updateMatrix();
meshRef.present.setMatrixAt(i, dummy.matrix);
});
meshRef.present.instanceMatrix.needsUpdate = true;
});
return (
When a particle reaches a negative Y-axis level, it’s immediately recycled to the top of the scene with a new random horizontal position, creating the illusion of continuous rainfall without constantly creating new objects.
Snow: Physics-Based Tumbling
We’ll use the same basic template for the snow effect, but instead of the particles falling straight down, we’ll give them some drift.
// Snow.js - Realistic drift and tumbling with time-based rotation
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);
// Time-based tumbling rotation for natural snowflake movement
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;
});The horizontal drift uses Math.sin(state.clock.elapsedTime + i), where state.clock.elapsedTime provides a continuously increasing time value and i offsets each particle’s timing. This creates a natural swaying motion in which each snowflake follows its own path. The rotation updates apply small increments to both the X and Y axes, creating the tumbling effect.
Storm System: Multi-Component Weather Events
When a storm rolls in, I wanted to simulate dark, brooding clouds and flashes of lightning. This effect requires combining multiple weather effects simultaneously. We’ll import our rain component, add some clouds, and implement a lightning effect with a pointLight that simulates flashes of lightning coming from inside the clouds.
// Storm.js
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 (
{/* Heavy rain - 1500 particles */}
);
}; The lightning system uses a simple ref-based cooldown mechanism to prevent constant flashing. When lightning triggers, it creates a single bright flash with random positioning. The system uses setTimeout to reset the light intensity after 400ms, creating a realistic lightning effect without complex multi-stage sequences.
Clouds: Drei Cloud
For weather types like cloudy, partly cloudy, overcast, foggy, rainy, snowy, and misty, we’ll pull in our clouds component. I wanted the storm component to have its own clouds because storms should have darker clouds than the conditions above. The clouds component will simply display Drei clouds, and we’ll pull it all together with the sun or moon component in the next section.
const Clouds = ({ intensity = 0.7, speed = 0.1 }) => {
// Determine cloud colors based on weather condition
const getCloudColors = () => {
return {
primary: '#FFFFFF',
secondary: '#F8F8F8',
tertiary: '#F0F0F0',
light: '#FAFAFA',
intensity: intensity
};
};
const colors = getCloudColors();
return (
{/* Large fluffy cloud cluster */}
);
};API-Driven Logic: Putting It All Together
Now that we’ve built our weather components, we need a system to decide which ones to display based on real weather data. The WeatherAPI.com service provides detailed current conditions that we’ll transform into our 3D scene parameters. The API gives us condition text like “Partly cloudy,” “Thunderstorm,” or “Light snow,” but we need to convert these into our component types.
// weatherService.js - Fetching real weather data
const 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 }
);The API request includes time zone information so we can accurately determine day or night for our Sun/Moon system. The days=3 parameter grabs forecast data for our portal feature, while aqi=no&alerts=no keeps the payload lean by excluding data we don’t need.
Converting API Conditions to Component Types
The heart of our system is a simple parsing function that maps hundreds of possible weather descriptions to our manageable set of visual components:
// weatherService.js - Converting weather text to renderable types
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';
}
// ... additional fog and mist conditions
return 'cloudy';
};This string-matching approach handles edge cases gracefully—whether the API returns “Light rain,” “Heavy rain,” or “Patchy light drizzle,” they all map to our rainy type and trigger the appropriate 3D effects. This way, we can reuse our main components without needing a separate component for each weather condition.
Conditional Component Rendering
The magic happens in our WeatherVisualization component, where the parsed weather type determines exactly which 3D components to render:
// WeatherVisualization.js - Bringing weather data to life
const renderWeatherEffect = () => {
if (weatherType === 'sunny') {
if (partlyCloudy) {
return (
<>
{isNight ? This conditional system ensures we only load the particle systems we actually need. A sunny day renders just our Sun component, while a storm loads our complete Storm system with heavy rain, dark clouds, and lightning effects. Each weather type gets its own combination of the components we built earlier, creating distinct visual experiences that match the real weather conditions.
Dynamic Time-of-Day System
Weather isn’t just about conditions—it’s also about timing. Our weather components need to know whether to show the sun or moon, and we need to configure Drei’s Sky component to render the appropriate atmospheric colors for the current time of day. Fortunately, our WeatherAPI response already includes the local time for any location, so we can extract that to drive our day/night logic.
The API provides local time in a simple format that we can parse to determine the current period:
// Scene3D.js - Parsing time from weather API data
const getTimeOfDay = () => currentHour <= 6) return 'night';
if (currentHour >= 6 && currentHour < 8) return 'dawn';
if (currentHour >= 17 && currentHour < 19) return 'dusk';
return 'day';
;This gives us four distinct time periods, each with different lighting and sky configurations. Now we can use these periods to configure Drei’s Sky component, which handles atmospheric scattering and generates realistic sky colors.
Dynamic Sky Configuration
Drei’s Sky component is fantastic because it simulates actual atmospheric physics—we just need to adjust atmospheric parameters for each time period:
// Scene3D.js - Time-responsive Sky configuration
{timeOfDay !== 'night' && (
{
if (timeOfDay === 'dawn') {
return [100, -5, 100]; // Solar under horizon for darker daybreak colours
} else if (timeOfDay === 'nightfall') {
return [-100, -5, 100]; // Solar under horizon for sundown colours
} else { // day
return [100, 20, 100]; // Excessive solar place for vibrant daylight
}
})()}
inclination={(() => {
if (timeOfDay === 'daybreak' || timeOfDay === 'nightfall') {
return 0.6; // Medium inclination for transitional durations
} else { // day
return 0.9; // Excessive inclination for clear daytime sky
}
})()}
turbidity={(() => {
if (timeOfDay === 'daybreak' || timeOfDay === 'nightfall') {
return 8; // Increased turbidity creates heat dawn/sundown colours
} else { // day
return 2; // Decrease turbidity for clear blue sky
}
})()}
/>
)} The magic occurs within the positioning. Throughout daybreak and nightfall, we place the solar just under the horizon (-5 Y place) so Drei’s Sky part generates these heat orange and pink colours we affiliate with dawn and sundown. The turbidity parameter controls atmospheric scattering, with increased values creating extra dramatic shade results throughout transitional durations.
Nighttime: Easy Black Background + Stars
For nighttime, I made a deliberate option to skip Drei’s Sky part totally and use a easy black background as a substitute. The Sky part could be computationally costly, and for nighttime scenes, a pure black backdrop truly seems higher and performs considerably sooner. We complement this with Drei’s Stars part for that genuine nighttime ambiance:
// Scene3D.js - Environment friendly nighttime rendering
{!portalMode && isNight && Drei’s Stars part creates 5,000 particular person stars scattered throughout a 100-unit sphere with practical depth variation. The saturation={0} retains them correctly desaturated for genuine nighttime visibility, whereas the light pace={1} creates delicate motion that simulates the pure movement of celestial our bodies. Stars solely seem throughout nighttime hours (7 PM to six AM) and mechanically disappear at daybreak, making a clean transition again to Drei’s daytime Sky part.
This strategy provides us 4 distinct atmospheric moods—vibrant daylight, heat daybreak colours, golden nightfall tones, and star-filled nights—all pushed mechanically by the true native time from our climate knowledge.
Forecast Portals: Home windows Into Tomorrow’s Climate
Like all good climate app, we don’t wish to simply present present circumstances but in addition what’s coming subsequent. Our API returns a three-day forecast that we rework into three interactive portals hovering within the 3D scene, every one displaying a preview of that day’s climate circumstances. Click on on a portal and also you’re transported into that day’s atmospheric surroundings.
Constructing Portals with MeshPortalMaterial
The portals use Drei’s MeshPortalMaterial, which renders an entire 3D scene to a texture that will get mapped onto a airplane. Every portal turns into a window into its personal climate world:
// ForecastPortals.js - Creating interactive climate portals
const ForecastPortal = ({ place, dayData, index, onEnter }) => {
const materialRef = useRef();
// Rework forecast API knowledge into our climate part format
const portalWeatherData = useMemo(() => ({
present: {
temp_f: dayData.day.maxtemp_f,
situation: dayData.day.situation,
is_day: 1, // Pressure daytime for constant portal lighting
humidity: dayData.day.avghumidity,
wind_mph: dayData.day.maxwind_mph,
},
location: {
localtime: dayData.date + 'T12:00' // Set to midday for optimum lighting
}
}), [dayData]);
return (
{/* Each portal renders a complete weather scene */}
{/* Weather info overlay */}
{formatDay(dayData.date, index)}
{Math.round(dayData.day.maxtemp_f)}° / {Math.round(dayData.day.mintemp_f)}°
{dayData.day.condition.text}
);
};The roundedPlaneGeometry from the maath library gives our portals those smooth, organic edges instead of sharp rectangles. The [2, 2.5, 0.15] parameters create a 2×2.5 unit portal with 0.15 radius corners, offering sufficient rounding to look visually interesting.
Interactive States and Animations
Portals reply to consumer interplay with clean state transitions. The system tracks two main states: inactive and fullscreen:
// ForecastPortals.js - State administration and mix animations
const ForecastPortal = ({ place, dayData, isActive, isFullscreen, onEnter }) => {
const materialRef = useRef();
useFrame(() => {
if (materialRef.present) 0,
targetBlend,
0.1
);
});
// Portal content material and UI parts hidden in fullscreen mode
return (
{!isFullscreen && (
<>
{/* Temperature and condition text only show in preview mode */}
{formatDay(dayData.date, index)}
>
)}
);
};The blend property controls how much the portal takes over your view. At 0 (inactive), you see the portal as a framed window into the weather scene. At 1 (fullscreen), you’re completely transported inside that day’s weather environment. The THREE.MathUtils.lerp function creates smooth transitions between these two states when clicking in and out of portals.
Fullscreen Portal Experience
When you click a portal, it fills your entire view with that day’s weather. Instead of looking at tomorrow’s weather through a window, you’re standing inside it:
// Scene3D.js - Fullscreen portal handling
const handlePortalStateChange = (isPortalActive, dayData) => {
setPortalMode(isPortalActive);
if (isPortalActive && dayData) {
// Create immersive weather environment for the selected day
const portalData = {
current: {
temp_f: dayData.day.maxtemp_f,
condition: dayData.day.condition,
is_day: 1,
humidity: dayData.day.avghumidity,
},
location: { localtime: dayData.date + 'T12:00' }
};
setPortalWeatherData(portalData);
}
};In fullscreen mode, the portal weather data drives the entire scene: the Sky component, lighting, and all weather effects now represent that forecasted day. You can orbit around inside tomorrow’s storm or bask in the gentle sunlight of the day after. When you exit (click outside the portal), the system smoothly transitions back to the current weather conditions.
The key insight is that each portal runs our same WeatherVisualization component but with forecast data instead of current conditions. The portalMode={true} prop optimizes the components for smaller render targets—fewer particles, simpler clouds, but the same conditional logic we built earlier.
Now that we’ve introduced portals, we need to update our weather components to support this optimization. Going back to our conditional rendering examples, we add the portalMode prop:
// WeatherVisualization.js - Updated with portal support
if (weatherType === 'rainy') {
return (
<>
And our Clouds component is updated to render fewer, simpler clouds in portal mode:
// Clouds.js - Portal optimization
const Clouds = ({ intensity = 0.7, speed = 0.1, portalMode = false }) => {
if (portalMode) {
return (
{/* Only 2 centered clouds for portal preview */}
);
}
// Full cloud system for main scene (6+ detailed clouds)
return {/* ... full cloud configuration ... */} ;
};This dramatically reduces both particle counts (87.5% fewer rain particles) and cloud complexity (a 67% reduction from 6 detailed clouds to 2 centered clouds), ensuring smooth performance when multiple portals show weather effects simultaneously.
Integration with Scene3D
The portals are positioned and managed in our main Scene3D component, where they complement the current weather visualization:
// Scene3D.js - Portal integration
<>
{/* Current weather in the main scene */}
When you click a portal, the entire scene transitions to fullscreen mode, showing that day’s weather in complete detail. The portal system tracks active states and handles smooth transitions between preview and immersive modes, creating a seamless way to explore future weather conditions alongside the current atmospheric environment.
The portals transform static forecast numbers into explorable 3D environments. Instead of reading “Tomorrow: 75°, Partly Cloudy,” you see and feel the gentle drift of cumulus clouds with warm sunlight filtering through.
Adding Cinematic Lens Flares
Our Sun component looks great, but to really make it feel cinematic, I wanted to implement a subtle lens flare effect. For this, I’m using the R3F-Ultimate-Lens-Flare library (shoutout to Anderson Mancini), which I installed manually by following the repository’s instructions. While lens flares typically work best with distant sun objects rather than our close-up approach, I still think it adds a nice cinematic touch to the scene.
The lens flare system needs to be smart about when to appear. Just like our weather components, it should only show when it makes meteorological sense:
// Scene3D.js - Conditional lens flare rendering
const PostProcessingEffects = ({ showLensFlare }) => {
if (!showLensFlare) return null;
return (
);
};The key parameters create a realistic lens flare effect: glareSize and flareSize both at 1.68 give prominent but not overwhelming flares, while ghostScale={0.03} adds subtle lens reflection artifacts. The haloScale={3.88} creates that large atmospheric glow around the sun.
The lens flare connects to our weather system through a visibility function that determines when the sun should be visible:
// weatherService.js - When should we show lens flares?
export const shouldShowSun = (weatherData) => {
if (!weatherData?.current?.condition) return true;
const condition = weatherData.current.condition.text.toLowerCase();
// Hide lens flare when weather obscures the sun
if (condition.includes('overcast') ||
condition.includes('rain') ||
condition.includes('storm') ||
condition.includes('snow')) {
return false;
}
return true; // Show for clear, sunny, partly cloudy conditions
};
// Scene3D.js - Combining weather and time conditions
const showLensFlare = useMemo(() => , [isNight, weatherData]);This creates practical habits the place lens flares solely seem throughout daytime clear climate. Throughout storms, the solar (and its lens flare) is hidden by clouds, identical to in actual life.
Efficiency Optimizations
Since we’re rendering hundreds of particles, a number of cloud techniques, and interactive portals—generally concurrently—it may get costly. As talked about above, all our particle techniques use instanced rendering to attract hundreds of raindrops or snowflakes in single GPU calls. Conditional rendering ensures we solely load the climate results we really want: no rain particles throughout sunny climate, no lens flares throughout storms. Nonetheless, there’s nonetheless a whole lot of room for optimization. Essentially the most vital enchancment comes from our portal system’s adaptive rendering. We already mentioned lowering the variety of clouds in portals above, however when a number of forecast portals present precipitation concurrently, we dramatically cut back particle counts.
// WeatherVisualization.js - Good particle scaling
{weatherType === 'wet' && This prevents the less-than-ideal situation of rendering 4 × 800 = 3,200 rain particles when all portals present rain. As a substitute, we get 800 + (3 × 100) = 1,100 whole particles whereas sustaining the visible impact.
API Reliability and Caching
Past 3D efficiency, we’d like the app to work reliably even when the climate API is sluggish, down, or rate-limited. The system implements good caching and swish degradation to maintain the expertise clean.
Clever Caching
Somewhat than hitting the API for each request, we cache climate responses for 10 minutes:
// api/climate.js - Easy however efficient caching
const cache = new Map();
const CACHE_DURATION = 10 * 60 * 1000; // 10 minutes
const cacheKey = `climate:${location.toLowerCase()}`;
const cachedData = cache.get(cacheKey);
if (cachedData && Date.now() - cachedData.timestamp < CACHE_DURATION) {
return res.json({ ...cachedData.knowledge, cached: true });
}This provides customers immediate responses for not too long ago searched places and retains the app responsive throughout API slowdowns.
Fee Limiting and Fallback
When customers exceed our 15 requests per hour restrict, the system easily switches to demo knowledge as a substitute of displaying errors:
// weatherService.js - Swish degradation
if (error.response?.standing === 429) {
console.log('Too many requests');
return getDemoWeatherData(location);
}The demo knowledge consists of time-aware day/night time detection, so even the fallback expertise exhibits correct lighting and sky colours based mostly on the consumer’s native time.
Future Enhancements
There’s loads of room to develop this climate world. Including correct moon phases would carry one other layer of realism to nighttime scenes—proper now our moon is perpetually full. Wind results might animate vegetation or create drifting fog patterns, utilizing the wind pace knowledge we’re already fetching however not but visualizing. Efficiency-wise, the present optimizations deal with most situations effectively, however there’s nonetheless room for enchancment, particularly when all forecast portals present precipitation concurrently.
Conclusion
Constructing this 3D climate visualization mixed React Three Fiber with real-time meteorological knowledge to create one thing past a standard climate app. By leveraging Drei’s ready-made elements alongside customized particle techniques, we’ve remodeled API responses into explorable atmospheric environments.
The technical basis combines a number of key approaches:
- Instanced rendering for particle techniques that preserve 60fps whereas simulating hundreds of raindrops
- Conditional part loading that solely renders the climate results presently wanted
- Portal-based scene composition utilizing MeshPortalMaterial for forecast previews
- Time-aware atmospheric rendering with Drei’s Sky part responding to native dawn and sundown
- Good caching and fallback techniques that maintain the expertise responsive throughout API limitations
This was one thing I at all times wished to construct, and I had a ton of enjoyable bringing it to life!
![How Conversion Funnels Create a Higher Buyer Journey [+ Tips to Optimize Yours]](https://blog.aimactgrow.com/wp-content/uploads/2025/03/Conversion20Funnel-120x86.png)
