three三维江南水乡3D划船场景代码-html代码-BFW代码库

代码语言：html

所属分类：其他

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

代码描述：三维江南水乡3D划船场景

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

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>烟雨行舟 · 雾锁春江</title>
<style>
  html,body{margin:0;height:100%;overflow:hidden;background:#0c1512;
    font-family:"Songti SC","STSong","KaiTi","STKaiti","Noto Serif SC",serif;-webkit-user-select:none;user-select:none}
  #app{position:fixed;inset:0}
  canvas{display:block}

  /* ---------- 开幕水雾屏 ---------- */
  #veil{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:radial-gradient(130% 100% at 50% 28%,#f6f1e4 0%,#dfeae4 52%,#b7cec8 100%);
    transition:opacity 1.6s ease}
  #veil.gone{opacity:0;pointer-events:none}
  #veil h1{margin:0;font-size:min(46px,9vw);letter-spacing:16px;text-indent:16px;color:#3c5a54;font-weight:600}
  #veil .sub{margin-top:12px;font-size:14px;letter-spacing:6px;color:#6b857f}
  #veil .line{width:120px;height:1px;background:linear-gradient(90deg,transparent,#5f7d76,transparent);margin:22px 0}
  .ring{width:30px;height:30px;border:2px solid rgba(60,90,84,.22);border-top-color:#3c5a54;border-radius:50%;
    animation:spin 1s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* ---------- 界面 ---------- */
  #title{position:fixed;left:26px;top:24px;z-index:10;writing-mode:vertical-rl;color:#33504b;
    text-shadow:0 1px 8px rgba(255,255,255,.55);pointer-events:none}
  #title h1{margin:0;font-size:30px;letter-spacing:12px;font-weight:600}
  #title p{margin:14px 4px 0 0;font-size:12px;letter-spacing:8px;color:#54736d}
  #poem{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:10;color:#3c5a54;
    font-size:14px;letter-spacing:5px;text-shadow:0 1px 8px rgba(255,255,255,.5);
    opacity:0;animation:poem 3s ease 2s forwards;pointer-events:none;white-space:nowrap}
  @keyframes poem{to{opacity:.9}}
  #hint{position:fixed;right:22px;bottom:20px;z-index:10;font-size:11px;letter-spacing:2px;color:#4a6a64;
    text-shadow:0 1px 6px rgba(255,255,255,.5);pointer-events:none;text-align:right;line-height:1.9}
  #btns{position:fixed;right:18px;top:20px;z-index:10;display:flex;flex-direction:column;gap:10px}
  .btn{min-width:64px;padding:9px 12px;border:1px solid rgba(60,90,84,.35);border-radius:10px;
    background:rgba(250,252,250,.42);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    color:#33504b;font-family:inherit;font-size:13px;letter-spacing:3px;cursor:pointer;transition:.25s}
  .btn:hover{background:rgba(250,252,250,.75);transform:translateY(-1px)}
  .btn.on{background:rgba(60,110,95,.82);color:#f2f7ef;border-color:transparent}
  @media (max-width:640px){ #title{left:14px;top:14px} #title h1{font-size:22px} #hint{display:none} }
</style>
</head>
<body>
<div id="app"></div>

<div id="veil">
  <h1>烟雨行舟</h1>
  <div class="sub">雾 锁 春 江 · 乌 篷 旧 梦</div>
  <div class="line"></div>
  <div class="ring"></div>
</div>

<div id="title"><h1>烟雨行舟</h1><p>湖心岛 · 环河</p></div>
<div id="poem">烟销日出不见人，欸乃一声山水绿</div>
<div id="btns">
  <button class="btn" id="camBtn">视 角</button>
  <button class="btn" id="sndBtn">声 音</button>
</div>
<div id="hint">拖动环视 · 滚轮推近<br>V 切换视角 · M 环境音</div>

<script type="importmap">
{ "imports": {
  "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
}}
</script>

<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { Water }       from 'three/addons/objects/Wate.........完整代码请登录后点击上方下载按钮下载查看