three做个三维公园池塘亭子场景代码-html代码-BFW代码库

代码语言：html

所属分类：其他

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

代码描述：三维公园池塘亭子

下面为部分代码预览，完整代码请点击下载或在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>山水公园 · 锦鲤池塘</title>
<style>
  :root { color-scheme: dark; }
  * { box-sizing: border-box; }
  html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0d1d1b; font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; }
  #scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
  .hud { position: fixed; z-index: 3; color: #f4f8ef; background: linear-gradient(135deg, rgba(12,30,27,.78), rgba(18,42,35,.5)); border: 1px solid rgba(233,245,224,.2); box-shadow: 0 14px 45px rgba(0,0,0,.22); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }
  .intro { top: 22px; left: 22px; padding: 17px 20px 16px; border-radius: 17px; width: min(340px, calc(100vw - 44px)); }
  .eyebrow { font-size: 10px; letter-spacing: .24em; color: #abd2b4; text-transform: uppercase; margin-bottom: 7px; }
  h1 { font-size: 22px; margin: 0 0 8px; font-weight: 650; letter-spacing: .04em; }
  .desc { font-size: 12px; line-height: 1.8; color: rgba(239,247,236,.76); }
  .controls { right: 22px; top: 22px; width: 218px; border-radius: 17px; padding: 16px; }
  .controls-title { color: #b5d5b6; font-size: 11px; letter-spacing: .17em; margin-bottom: 11px; }
  .weather-row { display:flex; align-items:center; gap: 10px; margin: 4px 0 13px; }
  #weatherIcon { width: 38px; height: 38px; border-radius: 12px; display:grid; place-items:center; font-size: 20px; background: rgba(210,238,208,.12); border:1px solid rgba(218,241,212,.18); }
  #weatherName { font-size: 15px; font-weight: 650; }
  #weatherHint { font-size: 11px; color: rgba(239,247,236,.62); margin-top: 3px; }
  button { width: 100%; cursor: pointer; border: 1px solid rgba(215,240,209,.35); color: #eff8eb; background: rgba(141,190,142,.2); padding: 10px 12px; border-radius: 10px; font-size: 12px; font-weight: 600; transition: .2s ease; }
  button:hover { background: rgba(156,211,157,.32); transform: translateY(-1px); }
  button:active { transform: translateY(0); }
  .hint { margin-top: 11px; font-size: 10px; line-height: 1.65; color: rgba(239,247,236,.55); }
  .footer { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); padding: 9px 15px; border-radius: 999px; font-size: 11px; letter-spacing: .04em; color: rgba(247,251,240,.78); white-space: nowrap; }
  .dot { display:inline-block; width:6px; height:6px; background:#b6e1b3; border-radius:50%; margin-right:7px; box-shadow:0 0 10px rgba(182,225,179,.8); vertical-align:middle; }
  @media (max-width: 700px) {
    .intro { top: 12px; left: 12px; width: calc(100vw - 24px); padding: 12px 14px; }
    h1 { font-size: 18px; }
    .desc { max-width: 82%; font-size: 11px; }
    .controls { top: auto; bottom: 61px; right: 12px; width: 184px; padding: 12px; }
    .footer { bottom: 13px; font-size: 10px; }
  }
</style>
</head>
<body>
<canvas id="scene"></canvas>
<div class="hud intro">
  <div class="eyebrow">NATURE · SERENITY</div>
  <h1>山水公园 · 锦鲤池塘</h1>
  <div class="desc">青石池岸、层叠假山与中式凉亭相映。锦鲤在清透水面下缓缓游动，天气会随时间自然变化。</div>
</div>
<div class="hud controls">
  <div class="controls-title">实时环境</div>
  <div class="weather-row">
  .........完整代码请登录后点击上方下载按钮下载查看