代码语言：html

所属分类：其他

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

代码描述：三维建筑沙盘

代码标签： three 三维 建筑 沙盘 代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>大唐长安城 · 程序化沙盘</title>
<style>
  html,body{margin:0;padding:0;overflow:hidden;background:#0e1218;font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;color:#e9e4d6;}
  #app{position:fixed;inset:0;}
  #hint{position:fixed;left:14px;bottom:12px;font-size:12px;color:rgba(233,228,214,.55);letter-spacing:1px;pointer-events:none;text-shadow:0 1px 2px #000;z-index:10;}
  #title{position:fixed;right:14px;bottom:12px;font-size:11px;color:rgba(233,228,214,.4);letter-spacing:2px;z-index:10;}
  .lil-gui{--background-color:#1a1f29;--widget-color:#2a3240;--focus-color:#b93d2f;--hover-color:#3a4455;--font-family:"PingFang SC","Microsoft YaHei",sans-serif;--font-size:11px;--text-color:#e9e4d6;--title-text-color:#e9c889;--title-background-color:#2a1a14;}
</style>
</head>
<body>
<div id="app"></div>
<div id="hint">左键旋转 · 滚轮缩放 · 右键平移</div>
<div id="title">大唐长安城 · 建筑沙盘</div>

<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/"
  }
}
</script>

<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
import GUI from 'https://cdn.jsdelivr.net/npm/lil-gui@0.20.0/+esm';

/* =========================================================
 * 1. CONFIG — 全部可调参数集中于此
 * ========================================================= */
const CONFIG = {
  // 沙盘底座
  base: { width: 40, depth: 30, height: 1.4, cornerR: 1.2, color: 0x3a2e24 },
  // 宫殿建筑群（唐代风格参数）
  building: {
    mainHallWidth: 14,
    mainHallDepth: 7,
    mainHallHeight: 5.2,
    mainRoofHeight: 3.4,
    sideHallWidth: 6,
    sideHallDepth: 5,
    sideHallHeight: 3.8,
    sideRoofHeight: 2.4,
    gateWidth: 8,
    gateDepth: 4,
    gateHeight: 4.2,
    gateRoofHeight: 2.8,
    pillarCountMain: 9,        // 面阔（开间数+1 立柱）
    pillarCountSide: 5,
    tierCount: 2,              // 大殿台基层级
    platformHeight: 0.9,
    pillarRadius: 0.28,
    wallColor: 0xe6ddc4,
    pillarColor: 0xb93d2f,     // 朱红
    roofColor: 0x2a2a2e,       // 黛瓦
    woodColor: 0x7a5a3a,
    eaveColor: 0xc2924d,       // 斗拱/檐口金饰
    latticeEmissive: 0.0,      // 夜景发光强度
    nightAmbient: 1.0,         // 夜景环境亮度比例
  },
  // 灯光
  sun: { azimuth: 215, elevation: 42, intensity: 2.4, color: 0xfff2d6 },
  ambient: { sky: 0xb9c8d8, ground: 0x3a3428, intensity: 0.55 },
  // 场景
  scene: {
    bgColor: 0x.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论