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

代码语言：html

所属分类：其他

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

代码描述：三维建筑沙盘

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>大唐長安 · 三维沙盘</title>
<style>
  :root { color-scheme: dark; }
  html, body {
    margin: 0; padding: 0; height: 100%; overflow: hidden;
    background: #0d1014;
    -webkit-tap-highlight-color: transparent;
  }
  #app { position: fixed; inset: 0; }
  #app canvas { display: block; }

  #title {
    position: fixed; left: 20px; top: 16px;
    font: 600 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    color: rgba(238, 232, 218, 0.78);
    letter-spacing: 0.28em;
    pointer-events: none;
    user-select: none;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  }
  #title small {
    display: block;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.22em;
    color: rgba(200, 190, 170, 0.42);
    margin-top: 2px;
  }
  #hint {
    position: fixed; left: 20px; bottom: 14px;
    font: 12px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    color: rgba(222, 224, 228, 0.5);
    letter-spacing: 0.06em;
    pointer-events: none;
    user-select: none;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
  }
</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.19.2/dist/lil-gui.esm.js"
  }
}
</script>
</head>
<body>

<div id="app"></div>
<div id="title">大唐長安<small>CHANG'AN · ARCHITECTURAL MODEL</small></div>
<div id="hint">拖拽旋转 &nbsp;·&nbsp; 滚轮缩放 &nbsp;·&nbsp; 右键平移</div>

<script type="module">
/* ============================================================================
 * 大唐长安城 · 程序化建筑三维沙盘
 * ----------------------------------------------------------------------------
 * 1. CONFIG      2. 工具函数      3. 材质库      4. 场景构建
 * 5. 交互与 GUI  6. 主循环        7. 事件绑定与启动
 * ==========================================================================*/

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
import GUI from 'lil-gui';

/* ============================================================================
 * 1. CONFIG —— 全部可调参数集中于此
 * ==========================================================================*/
const CONFIG = {
  /* --- 沙盘底座 --- */
  base: {
    size: 100,          // 底座边长
    cornerRadius: 5,    // 圆角半径
    height: 7,          // 底座厚度
    bevel: 0.8          // 倒角尺寸
  },

  /* --- 建筑主体（楼阁式主殿） --- */
  building: {
    floors: 8,          // 总层数
    floorHeight: 6.5,   // 标准层高
    towerW: 22,         // 塔楼平面宽（X）
    towerD: 22,         // 塔楼平面深（Z）
    segments: 3,        // 收分段数
    setback: 2.0,       // 每段收进量
    levelInset: 0.12,   // 每层微收进量
    podiumH: 5,         // 台基高度
    podium.........完整代码请登录后点击上方下载按钮下载查看