three实现三维皇宫紫禁城建筑场景代码-html代码-BFW代码库

three实现三维皇宫紫禁城建筑场景代码

代码语言：html

所属分类：三维

代码描述：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">
<title>紫禁城 3D 场景</title>
<style>
  html, body { margin:0; padding:0; overflow:hidden; width:100%; height:100%; background:#000; }
  #canvas-container { position:fixed; top:0; left:0; width:100%; height:100%; }
  #canvas-container canvas { display:block; }

  #ui { position:fixed; top:0; left:0; width:100%; pointer-events:none;
        font-family:"Microsoft YaHei","PingFang SC",sans-serif; z-index:10; }
  #title-panel {
    position:absolute; top:16px; left:16px; color:#fff8e7;
    text-shadow:0 2px 6px rgba(0,0,0,0.7); pointer-events:none;
  }
  #title-panel h1 { margin:0 0 4px 0; font-size:22px; letter-spacing:2px; }
  #title-panel p { margin:0; font-size:12px; opacity:0.85; }

  #control-panel {
    position:absolute; top:16px; right:16px; background:rgba(20,15,10,0.65);
    border:1px solid rgba(255,215,0,0.35); border-radius:10px; padding:12px 14px;
    color:#f5e9c8; font-size:13px; pointer-events:auto; backdrop-filter: blur(4px);
    min-width:150px;
  }
  #control-panel label { display:flex; align-items:center; gap:6px; margin-bottom:8px; cursor:pointer; }
  #control-panel .view-buttons { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
  #control-panel button {
    background:#7c1f1f; color:#f5e9c8; border:1px solid #e7b932; border-radius:6px;
    padding:5px 8px; font-size:12px; cursor:pointer; flex:1 1 40%;
  }
  #control-panel button:hover { background:#a52a2a; }

  #loading {
    position:fixed; inset:0; background:#0a1128; color:#e7b932;
    display:flex; align-items:center; justify-content:center; font-size:18px;
    z-index:100; letter-spacing:3px; font-family:"Microsoft YaHei",sans-serif;
    transition:opacity .6s ease;
  }
</style>
</head>
<body>

<div id="loading">正在营造紫禁城 …</div>

<div id="ui">
  <div id="title-panel">
    <h1>紫禁城 · 三维场景</h1>
    <p>左键拖拽旋转 ・ 滚轮缩放 ・ 右键拖拽平移</p>
  </div>
  <div id="control-panel">
    <label><input type="checkbox" id="chkLabel" checked> 显示建筑标签</label>
    <label><input type="checkbox" id="chkRotate"> 自动环绕旋转</label>
    <label><input type="checkbox" id="chkNight"> 夜景模式</label>
    <div class="view-buttons&.........完整代码请登录后点击上方下载按钮下载查看