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>Three.js Nature Scene (Refactored)</title>
<style>
body { margin: 0; overflow: hidden; background-color: #121212; font-family: 'Inter', sans-serif; }
#canvas-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
/* UI Styles */
#ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; display: flex; flex-direction: column; align-items: flex-end; padding: 24px; box-sizing: border-box; }
.btn { pointer-events: auto; width: 44px; height: 44px; border-radius: 50%; background: #1E1E1E; border: 1px solid #333; color: #E0E0E0; cursor: pointer; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 8px rgba(0,0,0,0.3); transition: all 0.2s ease; margin-bottom: 12px; font-size: 20px; }
.btn:hover { transform: scale(1.1); background: #282828; }
.btn:active { transform: scale(0.95); }
#settings-panel { pointer-events: auto; background: rgba(30, 30, 30, 0.85); backdrop-filter: blur(10px); border: 1px solid #333; border-radius: 12px; padding: 20px; width: 280px; color: #E0E0E0; box-shadow: 0 8px 16px rgba(0,0,0,0.5); transform: translateX(150%); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); position: absolute; top: 80px; right: 80px; }
#settings-panel.open { transform: translateX(0); }
.setting-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 14px; }
.toggle-btn { background: transparent; border: 1px solid #555; color: #aaa; padding: 4px 12px; border-radius: 6px; cursor: pointer; transition: 0.2s; }
.toggle-btn.active { background: #448AFF.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0