Dynamic Weather Sphere

Dynamic Weather Sphere

Description: The following code uses real-time weather data from OpenWeatherMap.org and uses it to display the temperature and update a sphere based on the temperature. This works due to ZCubes' native support for technologies like jQuery and AJAX.

(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();