three实现可视化三维拖拽城市设计及关键帧动画设计代码-html代码-BFW代码库

代码语言：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 城市可视化建造师 (Three.js)</title>
  <style>
    body { margin: 0; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background:#111; color:#fff; }
    canvas { display:block; }
    .panel {
      position:absolute; top:10px; padding:15px; background:rgba(0,0,0,.7);
      border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,.5); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
    }
    #controls-panel { left:10px; width:260px; }
    #model-library { left:290px; width:220px; max-height: calc(100vh - 20px); overflow-y: auto; }
    #camera-controls { right:10px; width:150px; }
    .control-group { margin-bottom:15px; }
    .control-group label { display:block; margin-bottom:5px; font-size:14px; font-weight:bold; }
    .control-group input[type=range] { width:100%; cursor:pointer; }
    .model-item {
      padding:10px; margin-bottom:10px; background:rgba(255,255,255,.1); border-radius:5px; text-align:left;
      cursor:grab; user-select:none; transition:background .2s; display:flex; gap:8px; align-items:center;
    }
    .model-item:hover { background:rgba(255,255,255,.2); }
    .model-item:active { cursor:grabbing; }
    .camera-btn {
      display:block; width:100%; padding:8px; margin-bottom:5px; border:none; background:#444; color:#fff;
      border-radius:4px; cursor:pointer; transition:background .2s;
    }
    .camera-btn:hover { background:#555; }
    .camera-btn.active { background:#007bff; }
    .info {
      position:absolute; bottom:10px; left:10px; font-size:12px; color:#aaa; background:rgba(0,0,0,.5); padding:5px; border-radius:3px;
    }
    .group-title{ font-size:12px; color:#bbb; margin:6px 0 2px 0; border-bottom:1px dashed rgba(255,255,255,.15) }
    /* 播放按钮 */
    #play-toggle {
      position: absolute; right: 12px; bottom: 12px; width: 56px; height: 56px; border-radius: 50%;
      background: rgba(0,0,0,.75); border: 1px solid rgba(255,255,255,.15);
      display:flex; align-items:center; justify-content:center; cursor:pointer; user-select:none;
      box-shadow: 0 6px 20px rgba(0,0,0,.45); font-size: 20px;
    }
    #play-toggle:hover { background: rgba(0,0,0,.85); }
    #import-file { display:none; }

    /* 模式选项卡 */
    #mode-tabs {
      left: 50%; transform: translateX(-50%);
      display: flex; gap: 8px; align-items: center; top: 10px;
    }
    #mode-tabs .tab {
      border: none; background: #333; color: #fff; padding: 8px 12px; border-radius: 6px; cursor: pointer;
    }
    #mode-tabs .tab.active { background: #007bff; }
    #mode-tabs .auto-key {
      margin-left: 8px; font-size: 12px; color: #ccc; display: flex; gap: 6px; align-items: center; background: rgba(255,255,255,.06);
      padding: 6px 8px; border-radius: 6px;
    }

    /* 时间线面板（动画模式可见） */
    #timeline-panel {
      top:unset;
      z-index:1111;
      position: absolute; left: 10px; right: 90px; bottom: 10px; display: none;
      padding: 12px; background: rgba(0,0,0,.7); border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.5);
    }
    .timeline-header { display:flex; justify-content: space-between; align-items: center; font-size: 12px; margin-bottom: 8px; }
    .timeline-header .left { display:flex; gap:10px; align-items:center; }
    .timeline-header .right { display:flex; gap:10px; align-items:center; color:#ccc; }
    #set-key-btn { background:#007bff; color:#fff; border:none; padding: 4px 10px; border-radius:4px; cursor:pointer; }
    #set-key-btn:hover { background:#0056b3; }
    #timeline-track { position: relative; height: 16px; background: rgba(255,255,255,.08); border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
    .key-marker { position: absolute; top: 0; width: 2px; height: 100%; background: #ffd200; transform: translateX(-1px); }
    .scene-key-marker { position: absolute; top: 2px; bottom: 2px; width: 8px; height: auto; background: #0cf; border-radius: 2px; transform: translateX(-4px); }
    #timeline-slider { width: 100%; }

    /* 滚动条样式（WebKit） */
    #model-library::-webkit-scrollbar { width: 8px; }
    #model-library::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 4px; }
    #model-library::-webkit-scrollbar-track { background: rgba(255,255,255,.05); }
  </style>
</head>
<body>
  <!-- 模式选项卡 -->
  <div id="mode-tabs" class="panel">
    <button id="design-tab" class="tab active">设计模式</button>
    <button id="animate-tab" class="tab">动画模式</button>
    <label class="auto-key" title="在动画模式下，拖动物体或调整光照后松手自动为整个场景记录关键帧">
      <input type="checkbox" id="auto-key" checked> 自动关键帧
    </label>
  </div>

  <div id="controls-panel" class="panel">
    <h4>场景控制</h4>
    <div class="control-group">
      <label for="time-slider">时间 (白昼/黑夜)</label>
      <input type="range" id="time-slider" min="0" max="100" value="50">
    </div>
    <div class="control-group">
      <label for="sun-angle-slider">太阳角度</label>
      <input type="range" id="sun-angle-slider" min="0" max="360" value="45">
    </div>
    <div class="control-group">
      <label for="sun-intensity-slider">太阳强度</label>
      <input type="range" id="sun-intensity-slider" min="0" max="3" value="1.2" step="0.1">
    </div>
    <div class="control-group">
      <label>变换模式 (W/E/R)</label>
      <button class="camera-btn" id="translate-btn">移动 (W)</button>
      <button class="camera-btn" id="rotate-btn">旋转 (E)</button>
      <button class="camera-btn" id="scale-btn">缩放 (R)</button>
    </div>
  </div>

  <div id="model-library" class="panel">
    <h4>模型库</h4>
    <div class="group-title">导入</div>
    <div class="model-item" id="import-model-btn" draggable="false">📤 导入本地模型 (GLB/GLTF)</div>
    <input id="import-file" type="file" accept=".glb,.gltf" multiple>

    <div class="group-title">建筑/自然</div>
    <div class="model-item" draggable="true" data-type="building">🏢 高楼（带窗）</div>
    <div class="model-item" draggable="true" data-type="tree">🌳 树木</div>
    <div class="model-item" draggable="true" data-type="river">💧 河流</div>

    <div class="group-title">道路</div>
    <div class="model-item" draggable="true" data-type="road">🛣️ 直线道路（带标线）</div>
    <div class="model-item" draggable="true" data-type="sidewalk">🧱 人行道</div>
    <div class="model-item" draggable="true" data-type="crosswalk">⛔ 斑马线</div>

    <div class="group-title">城市设施</div>
    <div class="model-item" draggable="true" data-type="streetlight">💡 路灯</div>
    <div class="model-item" draggable="true" data-type="trafficlight">🚦 红绿灯</div>
    <div class="model-item" draggable="true" data-type="bench">🪑 长椅</div>
    <div class="model-item" draggable="true" data-type="billboard">🪧 广告牌</div>
    <div class="model-item" draggable="true" data-type="busstop">🚌 公交站台</div>
    <div class="model-item" draggable="true" data-type="fountain">⛲ 喷泉</div>

    <div class="group-title">车辆</div>
    <div class="model-item" draggable="true" data-type="car">🚗 汽车</div>
  </div>

  <div id="camera-controls" class="panel">
    <h4>视角切换</h4>
    <button class="camera-btn active" id="perspective-cam-btn">自由视角</button>
    <button class="camera-btn" id="top-cam-btn">俯瞰视角</button>
  </div>

  <!-- 时间线（动画模式显示） -->
  <div id="timeline-panel" class="panel">
    <div class="timeline-header">
      <div class="left">
        <span>时间线</span>
        <button id="set-key-btn" title="为当前帧记录整个场景（所有物体+光照）的关键帧">📌 记录场景帧</button>
      </div>
      <div class="right">
        <span id="frame-readout">帧: 0 .........完整代码请登录后点击上方下载按钮下载查看