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"/>
<title>溪畔水车村 · Three.js 三维村庄</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;600;900&display=swap" rel="stylesheet">
<style>
  :root{ --ink:#2a2622; --paper:rgba(250,245,233,.92); --accent:#c2452d; }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%;overflow:hidden;background:#0e1a16;font-family:'Noto Serif SC',serif}
  #scene{position:fixed;inset:0}
  #scene canvas{display:block;cursor:grab}
  #scene canvas:active{cursor:grabbing}
  .vignette{position:fixed;inset:0;pointer-events:none;
    background:radial-gradient(ellipse at 50% 42%, transparent 55%, rgba(10,18,14,.4) 100%)}
  .hud{position:fixed;inset:0;pointer-events:none;color:var(--ink);user-select:none}
  .hud>div{opacity:0;transform:translateY(12px);transition:opacity .9s ease,transform .9s ease}
  body.ready .hud>div{opacity:1;transform:none}
  .title-block{transition-delay:.15s}.poem{transition-delay:.4s}.panel{transition-delay:.6s}.hint{transition-delay:.8s}

  .title-block{position:absolute;top:26px;left:24px;display:flex;gap:16px;align-items:flex-start}
  .title-main{writing-mode:vertical-rl;font-family:'Ma Shan Zheng',cursive;font-size:58px;
    color:#f8f3e6;letter-spacing:12px;line-height:1;
    text-shadow:0 2px 6px rgba(15,25,20,.55),0 0 30px rgba(15,25,20,.35)}
  .title-side{display:flex;gap:10px;padding-top:6px}
  .seal{width:38px;height:38px;background:var(--accent);color:#f8f3e6;font-family:'Ma Shan Zheng';
    font-size:24px;display:grid;place-items:center;border-radius:5px;transform:rotate(-4deg);
    box-shadow:0 3px 10px rgba(0,0,0,.3)}
  .title-sub{writing-mode:vertical-rl;font-size:12px;letter-spacing:6px;padding-top:4px;
    color:rgba(248,243,230,.9);text-shadow:0 1px 4px rgba(15,25,20,.6)}

  .poem{position:absolute;top:30px;right:28px;writing-mode:vertical-rl;display:flex;gap:16px;
    font-weight:600;font-size:16px;letter-spacing:10px;color:rgba(248,243,230,.88);
    text-shadow:0 1px 5px rgba(15,25,20,.6)}
  .poem .src{font-size:11px;letter-spacing:4px;color:rgba(248,243,230,.55)}

  .panel{pointer-events:auto;position:absolute;left:24px;bottom:24px;width:242px;
    background:var(--paper);border:1px solid rgba(74,62,48,.28);border-radius:10px;
    padding:14px 16px 12px;box-shadow:0 10px 34px rgba(10,15,10,.32)}
  .panel-row{display:flex;justify-content:space-between;align-items:center;
    font-size:13px;font-weight:600;letter-spacing:2px;margin-bottom:8px}
  #speedVal{color:var(--accent);font-weight:900}
  input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;
    background:linear-gradient(90deg,var(--accent) var(--val,36%),rgba(74,62,48,.25) var(--val,36%));
    outline:none;margin:2px 0 12px;cursor:pointer}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
    background:#f7f2e4;border:2.5px solid var(--accent);box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .2s}
  input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.25)}
  input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
    background:#f7f2e4;border:2.5px solid var(--accent)}
  .btns{margin:0 0 8px;gap:8px}
  .seg{display:flex;border:1px solid rgba(74,62,48,.4);border-radius:6px;overflow:hidden}
  .seg button{border:none;border-radius:0}
  .seg button+button{border-left:1px solid rgba(74,62,48,.3)}
  button{font-family:inherit;font-size:13px;font-weight:600;letter-spacing:2px;padding:6px 13px;
    background:transparent;color:var(--ink);cursor:pointer;border:1px solid rgba(74,62,48,.4);
    border-radius:6px;transition:all .22s}
  button:hover{background:rgba(194,69,45,.12);transform:translateY(-1px)}
  button.on{background:var(--ink);color:#f2ecdc;border-color:var(--ink)}
  #btnDusk.on{background:#3a4a74;border-color:#3a4a74}
  .tip{font-size:11px;color:rgba(74,62,48,.65);letter-spacing:1px}

  .hint{position:absolute;right:24px;bottom:24px;font-size:12px;letter-spacing:2px;color:#3a332a;
    background:rgba(250,245,233,.82);padding:7px 13px;border-radius:6px;border:1px solid rgba(74,62,48,.2)}

  #veil{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:18px;transition:opacity .9s ease;
    background:radial-gradient(1200px 700px at 50% 30%, #f7f2e3, #ece4cf 70%, #e0d5ba)}
  #veil.hide{opacity:0;pointer-events:none}
  .veil-title{font-family:'Ma Shan Zheng',cursive;font-size:72px;color:var(--ink);letter-spacing:16px;padding-left:16px}
  .........完整代码请登录后点击上方下载按钮下载查看