three实现三维建筑沙盘展示代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由gpt-6 ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：three实现三维建筑沙盘展示代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="theme-color" content="#202c32">
<title>大唐长安城 · 建筑三维沙盘</title>

<style>
  :root {
    color-scheme: dark;
    --panel: rgba(27, 37, 42, 0.92);
    --line: rgba(226, 215, 184, 0.24);
    --text: #e9e4d7;
    --muted: #a9b5b1;
    --gold: #d6b77b;
  }
  * { box-sizing: border-box; }
  html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: #202c32;
    color: var(--text);
    font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  }
  #app {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 36%, #53655e 0%, #303f40 55%, #202b31 100%);
  }
  #viewport {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    outline: none;
  }
  .topbar {
    position: absolute;
    z-index: 5;
    top: 20px;
    left: 24px;
    right: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    pointer-events: none;
  }
  .brand {
    max-width: 480px;
    padding: 16px 20px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: linear-gradient(135deg, rgba(24,35,39,.88), rgba(34,43,43,.65));
    box-shadow: 0 12px 42px rgba(0,0,0,.12);
    backdrop-filter: blur(12px);
  }
  .brand .eyebrow {
    color: var(--gold);
    letter-spacing: .24em;
    font-size: 10px;
    font-weight: 800;
  }
  .brand h1 {
    margin: 7px 0 5px;
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: .12em;
  }
  .brand p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .06em;
  }
  .stats {
    margin-top: 2px;
    display: flex;
    gap: 10px;
  }
  .stat {
    min-width: 94px;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: rgba(26,37,42,.76);
    backdrop-filter: blur(9px);
    text-align: center;
  }
  .stat span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    letter-spacing: .1em;
  }
  .stat strong {
    display: block;
    margin-top: 4px;
    color: var(--gold);
    font-size: 15px;
    font-weight: 750;
  }
  .bottom-bar {
    position: absolute;
    z-index: 5;
    left: 24px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100% - 48px);
    padding: 10px 15px;
    border: 1px solid var(--line);
    border-radius: 4px;
    color: #d9ded6;
    background: rgba(25,36,40,.82);
    backdrop-filter: blur(10px);
    font-size: 11px;
    letter-spacing: .025em;
    pointer-events: none;
  }
  .status-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #97c4a0;
    box-shadow: 0 0 10px rgba(151,196,160,.5);
  }
  .load-error {
    position: absolute;
    z-index: 20;
    top: 50%;
    left: 50%;
    width: min(440px, calc(100% - 36px));
    padding: 22px;
    transform: translate(-50%,-50%);
    color: #f0e6d1;
    border: 1px solid rgba(240,230,209,.2);
    background: #253236;
    line-height: 1.8;
    font-size: 13px;
    box-shadow: 0 24px 70px #0005;
  }
  .load-error strong { color: #e4c38a; }
  .hidden { display: none !important; }

  .lil-gui {
    --background-color: rgba(27, 37, 42, 0.94);
    --text-color: #e4e3d9;
    --title-background-color: #303d40;
    --title-text-color: #e0c18b;
    --widget-color: #465951;
    --hover-color: #5b7667;
    --focus-color: #9aaf90;
    --number-color: #e3c38a;
    --string-color: #b7d5bc;
    --font-size: 11px;
    --input-font-size: 11px;
    --name-width: 52%;
    --padding: 6px;
    --spacing: 5px;
    z-index: 10 !important;
    border: 1px solid rgba(226,215,184,.16);
    box-shadow: 0 16px 44px rgba(0,0,0,.2);
  }
  .lil-gui .title { letter-spacing: .04em; }
  @media (max-width: 700px) {
    .topbar { top: 10px; left: 10px; right: 10px; gap: 6px; }
    .brand { padding: 11px 12px; max-width: min(66vw, 330px); }
    .brand .eyebrow { font-size: 8px; }
    .brand h1 { font-size: 21px; letter-spacing: .07em; }
    .brand p { font-size: 10px; }
    .stats { gap: 5px; }
    .stat { min-width: 60px; padding: 8px 6px; }
    .stat span { font-size: 9px; }
    .stat strong { font-size: 12px; }
    .bottom-bar { left: 10px; bottom: 10px; padding: 8px 10px; font-size: 10px; }
    .lil-gui { max-width: 220px; --width: 220px; }
  }
  @media (max-width: 410px) {
    .stats { display: none; }
    .brand { max-width: 88vw; }
  }
</style>

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/",
    "lil-gui": "https://cdn.jsdelivr.net/npm/lil-gui@0.20.0/dist/lil-gui.esm.min.js"
  }
}
</script>
</head>

<body>
<div id="app">
  <canvas id="viewport" aria-label="大唐长安城三维建筑沙盘"></canvas>

  <header class="topbar">
    <div class="brand">
      <div class="eyebrow">TANG DYNASTY · ARCHITECTURAL STUDY</div>
      <h1>大唐长安城</h1>
      <p>朱墙黛瓦 · 规整街巷 · 盛世都城沙盘</p>
    </div>
    <div class="stats">
      <div class="stat">
        <span>建筑层数</span>
        <strong id="statFloors">05 层</strong>
      </div>
      <div class="stat">
        <span>光照模式</span>
        <strong id="statLighting">日间</strong>
      </div>
      <div class="stat">
        <span>场景状态</span>
        <strong id="statReady">已就绪</strong>
      </div>
    </div>
  </header>

  <div class="bottom-bar">
    <span class="status-dot"></span>
    <span>拖拽旋转 · 滚轮缩放 · 右键平移 · 右侧面板调节建筑与光照</span>
  </div>

  <div id="loadError" class="load-error hidden">
    <strong>三维场景未能初始化</strong>
    <div id="loadErrorText"></div>
    请使用最新版 Chrome 或 Edge，并确认网络可以访问 Three.js CDN。部分浏览器使用本地文件时可能需要通过本地 HTTP 服务打开。
  </div>
</div>

<script type="module">
import * as THREE from "three";
import { OrbitControls } from "three/ad.........完整代码请登录后点击上方下载按钮下载查看