代码语言：html

所属分类：其他

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

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

代码标签： three 三维 江南 水乡 3D 划船 场景 代码

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

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>桃花源 · 划船 | Three.js</title>
<style>
  html,body{margin:0;height:100%;overflow:hidden;background:#0d1a1a;font-family:"Kaiti SC","STKaiti","KaiTi",serif;}
  #app{position:fixed;inset:0;}
  .vignette{position:fixed;inset:0;pointer-events:none;
    background:radial-gradient(ellipse at center,transparent 52%,rgba(70,40,50,.28) 100%);}
  #title{position:fixed;top:26px;right:30px;writing-mode:vertical-rl;color:#7c4a58;
    font-size:30px;letter-spacing:10px;text-shadow:0 1px 8px rgba(255,255,255,.75);pointer-events:none;}
  #poem{position:fixed;left:28px;bottom:24px;color:#6d5a52;font-size:14px;letter-spacing:3px;
    text-shadow:0 1px 6px rgba(255,255,255,.7);pointer-events:none;}
  #hint{position:fixed;bottom:24px;right:30px;color:#8a7a70;font-size:12px;letter-spacing:2px;pointer-events:none;}
  .btns{position:fixed;top:26px;left:26px;display:flex;gap:10px;}
  .btns button{cursor:pointer;border:1px solid rgba(124,74,88,.45);background:rgba(255,250,246,.55);
    color:#7c4a58;padding:7px 14px;font-size:13px;letter-spacing:3px;border-radius:20px;backdrop-filter:blur(6px);}
  .btns button:hover{background:rgba(255,255,255,.85);}
  #fade{position:fixed;inset:0;background:#f6efe9;transition:opacity 2s ease;pointer-events:none;}
</style>
</head>
<body>
<div id="app"></div>
<div class="vignette"></div>
<div id="title">桃花源 · 泛舟</div>
<div id="poem">雾漫春溪花影深 &nbsp;·&nbsp; 一橹摇碎满河云</div>
<div id="hint">拖拽 环视 · 滚轮 远近 · 双击 复位</div>
<div class="btns">
  <button id="btnView">切换机位</button>
  <button id="btnSound">水声：关</button>
</div>
<div id="fade"></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 { Reflector } from 'three/addons/objects/Reflector.js';

/* ---------------- 基础工具 ---------------- */
const FOG_D = 0.013, SPAN = 2.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论