three实现江边城市cbd中心高楼大厦日出日落时间变换三维风景代码-html代码-BFW代码库

three实现江边城市cbd中心高楼大厦日出日落时间变换三维风景代码

代码语言：html

所属分类：三维

代码描述：three实现江边城市cbd中心高楼大厦日出日落时间变换三维风景代码

代码标签： three 江边城市 cbd 中心高楼大厦日出日落时间变换三维风景代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>Three.js · 河畔CBD日夜切换</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <style>
        :root{
            --glass:#0b152acc;--border:#1d2a46;--text:#e5e7eb;--muted:#94a3b8;--accent:#22d3ee;
        }
        html,body{height:100%;margin:0;background:#0b1022;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;overflow:hidden}
        #ui{
            position:fixed;left:12px;top:12px;z-index:10;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
            background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:10px 12px;backdrop-filter:blur(8px);
            box-shadow:0 10px 30px #0009, inset 0 1px 0 #ffffff10
        }
        button,select,input[type=range]{
            background:#0b152a;border:1px solid #223053;color:#e5e7eb;border-radius:10px;padding:8px 12px;cursor:pointer;transition:.2s
        }
        button.primary{background:linear-gradient(180deg,#1f3b74,#1b3364);border-color:#2b478a}
        button:hover,select:hover,input:hover{border-color:#34508c}
        .chip{display:inline-flex;gap:6px;align-items:center;border:1px solid #223053;background:#0b152a;border-radius:999px;padding:4px 10px}
        #footer{
            position:fixed;right:12px;bottom:12px;color:#94a3b8;background:#0b152a80;border:1px solid #223053;border-radius:10px;padding:6px 10px;font-size:12px;z-index:9
        }
    </style>
</head>
<body>
    <div id="ui">
        <button id="btnDay" class="primary">白天</button>
        <button id="btnNight">夜晚</button>
        <label style="margin-left:6px">自动</label>
        <select id="auto">
            <option value="off" selected>关闭</option>
            <option value="slow">慢速</option>
            <option value="normal">正常</option>
            <option value="fast">快速</option>
        </select>
       .........完整代码请登录后点击上方下载按钮下载查看