代码语言：html

所属分类：其他

代码由gpt-6 ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：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, maximum-scale=1, user-scalable=no" />
<title>桃花源泛舟 · 江南水乡 3D 沉浸场景</title>
<style>
  :root{color-scheme:dark;--ink:#eaf6ed;--muted:#c2d9d2;--glass:rgba(15,46,45,.48);--line:rgba(233,255,244,.22)}
  *{box-sizing:border-box} html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#a5c9c4;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;color:var(--ink)}
  #scene{position:fixed;inset:0;display:block;width:100%;height:100%;outline:none;touch-action:none}
  .vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(15,43,47,.2),transparent 24%,transparent 62%,rgba(15,36,33,.22)),radial-gradient(ellipse at center,transparent 44%,rgba(15,44,43,.18) 100%)}
  .topbar{position:fixed;left:clamp(18px,4vw,58px);top:clamp(18px,4vh,42px);pointer-events:none;text-shadow:0 2px 18px rgba(6,31,30,.26)}
  .eyebrow{font-size:11px;letter-spacing:.3em;color:#e3f5e8;opacity:.9;margin-bottom:12px;font-weight:600}
  h1{font-family:"STSong","Songti SC","Noto Serif CJK SC",serif;font-size:clamp(32px,4.6vw,62px);font-weight:500;letter-spacing:.12em;margin:0 0 10px;line-height:1.08}
  .subtitle{font-family:"STSong","Songti SC",serif;font-size:clamp(13px,1.5vw,17px);letter-spacing:.18em;color:#f2f9ee;opacity:.9}
  .top-note{position:fixed;right:clamp(18px,3.5vw,48px);top:clamp(18px,3.5vh,38px);padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(21,59,55,.22);backdrop-filter:blur(14px);font-size:11px;letter-spacing:.08em;color:#edf8ef;pointer-events:none}
  .bottom-ui{position:fixed;left:50%;bottom:clamp(18px,4vh,36px);transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--line);border-radius:18px;background:var(--glass);backdrop-filter:blur(18px);box-shadow:0 12px 38px rgba(9,36,34,.18);max-width:calc(100vw - 24px)}
  button{appearance:none;border:1px solid transparent;background:transparent;color:var(--ink);font:inherit;font-size:12px;letter-spacing:.04em;padding:11px 15px;border-radius:11px;white-space:nowrap;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
  button:hover{background:rgba(232,249,235,.13);border-color:rgba(232,249,235,.18)}button:active{transform:translateY(1px)}button.active{background:#d8eadb;color:#173d37;font-weight:700}
  .sep{height:26px;width:1px;background:rgba(230,249,236,.18);margin:0 2px;flex:0 0 1px}
  .help{position:fixed;left:clamp(18px,4vw,58px);bottom:clamp(22px,4.2vh,40px);font-size:11px;line-height:1.9;color:#eef8ec;letter-spacing:.06em;text-shadow:0 1px 12px rgba(5,28,26,.65);pointer-events:none}
  .status{position:fixed;right:clamp(18px,3.5vw,48px);bottom:clamp(22px,4.2vh,40px);font-size:10px;letter.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论