three实现可视化三维拖拽城市设计及关键帧动画设计代码
代码语言:html
所属分类:三维
代码描述:three实现可视化三维拖拽城市设计及关键帧动画设计代码
代码标签: 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 .........完整代码请登录后点击上方下载按钮下载查看
网友评论0