three三维上海中心大厦cbd建筑集群场景天气昼夜切换代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three三维上海中心大厦cbd建筑集群场景天气昼夜切换代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Three.js 上海市中心摩天大厦场景</title>
  <style>
    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    html,
    body {
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      font-family: Arial, "Microsoft YaHei", sans-serif;
      background: #0b1220;
      color: #eef6ff;
    }

    canvas {
      display: block;
    }

    #ui {
      position: fixed;
      left: 16px;
      top: 16px;
      z-index: 10;
      width: min(380px, calc(100vw - 32px));
      padding: 16px 18px;
      border-radius: 18px;
      background: rgba(8, 15, 28, 0.66);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 18px 45px rgba(0, 0, 0, 0.26);
      backdrop-filter: blur(10px);
    }

    #ui h1 {
      margin: 0 0 8px;
      font-size: 24px;
      line-height: 1.2;
      letter-spacing: 1px;
      color: #f8fbff;
    }

    #ui .desc {
      font-size: 13px;
      line-height: 1.8;
      color: #cbd5e1;
      margin-bottom: 14px;
    }

    .group {
      margin-bottom: 12px;
    }

    .group .label {
      font-size: 13px;
      color: #93c5fd;
      margin-bottom: 8px;
    }

    .buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    button {
      appearance: none;
      border: 0;
      padding: 9px 14px;
      border-radius: 12px;
      cursor: pointer;
      color: #eaf4ff;
      font-size: 13px;
      font-weight: 700;
      background: linear-gradient(180deg, rgba(43, 58, 86, 0.95), rgba(21, 32, 49, 0.95));
      border: 1px solid rgba(255, 255, 255, 0.10);
      transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
    }

    button:hover {
      transform: translateY(-1px);
    }

    button.active {
      background: linear-gradient(180deg, #58a6ff, #2563eb);
      box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
    }

    #ui .tips {
      margin-top: 10px;
      font-size: 12px;
      line-height: 1.75;
      color: #94a3b8;
    }

    #badge {
      position: fixed;
      right: 16px;
      top: 16px;
      z-index: 10;
      padding: 12px 14px;
      border-radius: 16px;
      background: rgba(8, 15, 28, 0.62);
      border: 1px solid rgba(255,255,255,0.1);
      backdrop-filter: blur(10px);
      box-shadow: 0 14px 36px rgba(0,0,0,0.22);
      min-width: 210px;
    }

    #badge .line1 {
      font-size: 14px;
      color: #93c5fd;
      margin-bottom: 6px;
    }

    #badge .line2 {
      font-size: 20px;
      font-weight: 800;
      color: #f8fbff;
      margin-bottom: 4px;
    }

    #badge .line3 {
      font-size: 13px;
      line-height: 1.7;
      color: #cbd5e1;
    }

    @media (max-width: 700px) {
      #ui,
      #badge {
        width: calc(100vw - 24px);
      }

      #ui {
        left: 12px;
        top: 12px;
      }

      #badge {
        right: 12px;
        top: auto;
        bottom: 12px;
      }
    }
  </style>
</head>
<body>
  <div id="ui">
    <h1>上海市中心摩天大厦场景</h1>
    <div class="desc">
      含上海塔、环球金融中心、金茂大厦、东方明珠的风格化城市天际线。<br />
      鼠标拖动旋转，滚轮缩放，右键平移。
    </div>

    <div class="group">
      <div class="label">昼夜切换</div>
      <div class="buttons">
        <button class="active" data-time="day" type="button">白昼</button>
        <button data-time="sunset" type="button">黄昏</button>
        <button data-time="night" type="button">夜景</button>
      </div>
    </div>

    <div class="group">
      <div class="label">天气切换</div>
      <div class="buttons">
        <button class="active" data-weather="sunny" type="button">晴天</button>
        <button data-weather="cloudy" type="button">多云</button>
        <button data-weather="rain" type="button">下雨</button>
        <button data-weather="fog" type="button">雾天</button>
      </div>
    </div>

    <div class="tips">
      场景会同步切换天空、光照、楼宇灯光、河面反射、云层、雨效、雾效与夜空星光。
    </div>
  </div>

  <div id="badge">
    <div class="line1" id="modeText">当前模式</div>
    <div class="line2" id="titleText">白昼 · 晴天</div>
    <div class="line3">黄浦江畔风格化都市群楼，带动态车流、云层、天气与昼夜变化。</div>
  </div>
      <script type="importmap">
{
 "imports":{
    "three":"//repo.bfw.wiki/bfwrepo/js/module/three/build/164/three.module.js",
    "three/addons/":"//repo.bfw.wiki/bfwrepo/js/module/three/examples/164/jsm/"
 }
}
</script>

<script type="module">

    import * as THREE from 'three';

    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

    const timeButtons = Array.from(document.querySelectorAll("[data-time]"));
    const weatherButtons = Array.from(document.querySelectorAll("[data-weather]"));
    const titleText = document.getElementById("titleText");

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(58, window.innerWidth / window.innerHeight, 0.1, 500);
    camera.position.set(42, 28, 58);

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
    renderer.outputColorSpace = THREE.SRGBColorSpace;
    renderer.shadowMap.enabled = true;
    rendere.........完整代码请登录后点击上方下载按钮下载查看