script.js

import * as THREE from "https://unpkg.com/three@0.160.0/build/three.module.js";

let scene, camera, renderer;
let cube;
let windSpeed = 0; // m/s
let targetRotSpeed = 0.01; // base rotation

window.addEventListener("load", () => {
  init();
  animate();

  document.getElementById("searchBtn").addEventListener("click", () => {
    const city = document.getElementById("cityInput").value;
    getWeather(city);
  });
});

function init() {
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xf3efe6);

  camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    100
  );
  camera.position.z = 3;

  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  const geometry = new THREE.BoxGeometry();

  // 用同一个材质，后面动态改 color/roughness/metalness
  const material = new THREE.MeshStandardMaterial({
    color: 0x00aa00,
    roughness: 0.8,
    metalness: 0.0,
  });

  cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  const light = new THREE.DirectionalLight(0xffffff, 1);
  light.position.set(5, 5, 5);
  scene.add(light);

  const amb = new THREE.AmbientLight(0xffffff, 0.35);
  scene.add(amb);

  window.addEventListener("resize", onResize);
}

function onResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

async function getWeather(city) {
  try {
    const clean = city.trim();
    if (!clean) {
      alert("Please enter a city name.");
      return;
    }

    document.getElementById("weatherInfo").innerText = "Loading...";

    // 1) geocoding
    const geoUrl =
      `https://geocoding-api.open-meteo.com/v1/search` +
      `?name=${encodeURIComponent(clean)}` +
      `&count=1&language=en&format=json`;

    const geoRes = await fetch(geoUrl);
    const geoData = await geoRes.json();

    if (!geoData.results || geoData.results.length === 0) {
      document.getElementById("weatherInfo").innerText =
        `City not found: "${clean}" (try English name, e.g. "Anchorage")`;
      return;
    }

    const { latitude, longitude, name, country } = geoData.results[0];

    // 2) weather: 多要几个参数，才能驱动“雕塑”
    const weatherUrl =
      `https://api.open-meteo.com/v1/forecast` +
      `?latitude=${latitude}&longitude=${longitude}` +
      `&current=temperature_2m,weather_code,wind_speed_10m,precipitation`;

    const weatherRes = await fetch(weatherUrl);
    const weatherData = await weatherRes.json();

    const cur = weatherData.current;
    const temp = cur.temperature_2m;
    const code = cur.weather_code;
    const wind = cur.wind_speed_10m ?? 0;
    const prcp = cur.precipitation ?? 0;

    document.getElementById("weatherInfo").innerText =
      `${name}${country ? ", " + country : ""}: ${temp}°C | wind ${wind} m/s | precip ${prcp} mm (code ${code})`;

    updateFromWeather({ temp, code, wind, prcp });
  } catch (err) {
    console.error(err);
    document.getElementById("weatherInfo").innerText =
      "Network/API error. Open console to see details.";
  }
}

function updateFromWeather({ temp, code, wind, prcp }) {
  // 1) 风 → 动起来
  windSpeed = wind;
  targetRotSpeed = 0.01 + clamp(windSpeed, 0, 25) * 0.002;

  // 2) 选择“色系”（palette）
  // 返回一组颜色：cold / mid / hot（同一主题下：冷->中->热）
  const palette = pickPaletteByCode(code);

  // 3) 温度 → 在 cold-mid-hot 之间插值
  // -20~35 映射到 0~1
  const t = clamp01((temp + 20) / 55);

  // 0~0.5: cold->mid, 0.5~1: mid->hot
  let baseColor;
  if (t < 0.5) {
    baseColor = lerpColor(palette.cold, palette.mid, t / 0.5);
  } else {
    baseColor = lerpColor(palette.mid, palette.hot, (t - 0.5) / 0.5);
  }

  // 4) 降水 → “湿感”：roughness 降、specular 更明显（metalness略加）
  // prcp 0~5mm 映射 0~1
  const wet = clamp01(prcp / 5);

  cube.material.color.set(baseColor);

  // 雪：更粉、更散；雨：更湿、更亮；云：更哑光
  const isSnow = code >= 71 && code <= 77;
  const isRain = code >= 61 && code <= 67;
  const isCloud = code === 1 || code === 2 || code === 3;

  if (isSnow) {
    cube.material.roughness = 0.95;
    cube.material.metalness = 0.0;
  } else if (isRain) {
    cube.material.roughness = lerp(0.55, 0.12, wet);
    cube.material.metalness = lerp(0.02, 0.10, wet);
  } else if (isCloud) {
    cube.material.roughness = 0.85;
    cube.material.metalness = 0.0;
  } else {
    cube.material.roughness = 0.75;
    cube.material.metalness = 0.0;
  }

  // 5) emissive 做“氛围”偏色：冷更蓝、热更红
  const coldGlow = { r: 0.05, g: 0.08, b: 0.18 };
  const hotGlow  = { r: 0.20, g: 0.08, b: 0.05 };
  const glow = lerpColor(coldGlow, hotGlow, t);

  cube.material.emissive.setRGB(glow.r, glow.g, glow.b);
  cube.material.emissiveIntensity = 0.35;
}

// --- palette by weather code ---
function pickPaletteByCode(code) {
  // 你要的：深红浅红/深绿浅绿/深蓝浅蓝/灰
  const palettes = {
    sun:  { cold:{r:0.10,g:0.55,b:0.18}, mid:{r:0.20,g:0.75,b:0.30}, hot:{r:0.65,g:0.10,b:0.10} }, // 绿->红
    rain: { cold:{r:0.10,g:0.20,b:0.55}, mid:{r:0.20,g:0.35,b:0.85}, hot:{r:0.35,g:0.55,b:0.95} }, // 深蓝->浅蓝
    snow: { cold:{r:0.60,g:0.60,b:0.62}, mid:{r:0.85,g:0.85,b:0.88}, hot:{r:0.95,g:0.95,b:0.98} }, // 深灰->浅灰->近白
    cloud:{ cold:{r:0.25,g:0.25,b:0.28}, mid:{r:0.45,g:0.45,b:0.48}, hot:{r:0.70,g:0.70,b:0.72} }, // 灰阶
  };

  const isSnow = code >= 71 && code <= 77;
  const isRain = code >= 61 && code <= 67;
  const isCloud = code === 1 || code === 2 || code === 3;

  if (isSnow) return palettes.snow;
  if (isRain) return palettes.rain;
  if (isCloud) return palettes.cloud;
  return palettes.sun; // default: 晴/其他
}

// --- color utils (object {r,g,b} in 0~1) ---
function lerpColor(a, b, t) {
  return {
    r: lerp(a.r, b.r, t),
    g: lerp(a.g, b.g, t),
    b: lerp(a.b, b.b, t),
  };
}


function animate() {
  requestAnimationFrame(animate);

  if (cube) {
    // 主旋转受风影响
    cube.rotation.y += targetRotSpeed;

    // 风的“摆动感”
    const sway = Math.min(windSpeed, 20) * 0.01;
    cube.rotation.x = Math.sin(Date.now() * 0.001) * sway;
    cube.rotation.z = Math.cos(Date.now() * 0.0012) * sway;
  }

  renderer.render(scene, camera);
}

/* ---------- utils ---------- */
function clamp(v, a, b) {
  return Math.max(a, Math.min(b, v));
}
function clamp01(v) {
  return clamp(v, 0, 1);
}
function lerp(a, b, t) {
  return a + (b - a) * t;
}