Dynamic Weather Sphere

Dynamic Weather Sphere

Description: This weather sphere uses JavaScript jQuery/AJAX to fetch real-time weather data from the OpenWeatherMap API and render a 3D scene based on ZCubes' `RENDER3D()` function. The `fetchWeather()` function sends an AJAX request and retrieves temperature and weather conditions for a given city. Once the data is received, `displayWeather()` maps the weather condition (like "Clear" or "Rain") to a texture image, then uses `RENDER3D()` to create a 3D sphere with that texture and a temperature label as 3D text.

The `RENDER3D()` function follows a tabular structure where the first row defines column names (such as "type", "coordinates", "fill", etc.), and each following row describes a 3D object.

London example

Minneapolis example

Xiayi example

(Note: To run this code, you need your own API key from OpenWeatherMap.)

const api_key = "";

function fetchWeather(city) {
  const url = `https://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(city)}&appid=${api_key}&units=metric`;

  return new Promise((resolve, reject) => {
    $.ajax({
      url: url,
      method: "GET",
      success: function(data) {
        resolve(data);
      },
      error: function(error) {
        reject(error);
      }
    });
  });
}

function displayWeather(data) {
  if (!data) return;
  const temp = data.main.temp;
  let tempr = temp.toString(); 
  const description = data.weather[0].main;
  const city_name = data.name;
  
  const weatherTextures = {
    "Clear": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRRhrFFyI_ZsQxhtPPloslzBSIvQVTknnWnxg&s",
    "Clouds": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSQiHiLG5-_rbp2DB8M7QqUJkoF8SU7Bql4xQ&s",
    "Rain": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSt_N3mgajhyeHZ15XcG0_VdnybnmYlb0E-qQ&s",
    "Drizzle": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSt_N3mgajhyeHZ15XcG0_VdnybnmYlb0E-qQ&",
    "Thunderstorm": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSt_N3mgajhyeHZ15XcG0_VdnybnmYlb0E-qQ&",
    "Snow": "https://hips.hearstapps.com/countryliving/assets/16/49/gettyimages-85786660-1.jpg",
  };

  const textureURL = weatherTextures[description] || "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRRhrFFyI_ZsQxhtPPloslzBSIvQVTknnWnxg&s";

  RENDER3D([
    ["type", "settings", "coordinates", "size", "stroke", "fill", "helper", "material"],
    ["sphere", "", [1, 3, 3], [5, 20, 20], "black", textureURL, false, "phong"],
    ["text", temp.toString(), [100, 100, 100], [5, 2, 20], 0x00ff00, 0x00ff00, true, "backgroundreflection"]
  ]);
}

async function run() {
  const data = await fetchWeather("Minneapolis");
  displayWeather(data);
}

run();

See more:

• Learn more about APIs in the Z^3 Code Editor
• Array.jq() to learn more about Jquery in Z^3 Code Editor.
• More examples using Render3D()