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-color: #111; color: #fff; } canvas { display: block; } .panel { position: absolute; top: 10px; padding: 15px; background-color: rgba(0, 0, 0, 0.7); border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } #controls-panel { left: 10px; width: 250px; } #model-library { left: 280px; width: 150px; } #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-color: rgba(255, 255, 255, 0.1); border-radius: 5px; text-align: center; cursor: grab; user-select: none; transition: background-color 0.2s; } .model-item:hover { background-color: rgba(255, 255, 255, 0.2); } .model-item:active { cursor: grabbing; } .camera-btn { display: block; width: 100%; padding: 8px; margin-bottom: 5px; border: none; background-color: #444; color: white; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; } .camera-btn:hover { background-color: #555; } .camera-btn.active { background-color: #007bff; } .info { position: absolute; bottom: 10px; left: 10px; font-size: 12px; color: #aaa; background-color: rgba(0,0,0,0.5); padding: 5px; border-radius: 3px; } </style> </head> <body> <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&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0