three实现三维中国龙遨游云海控制飞行代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码由minimax-m3.1-flash ai生成，可能有错误，仅供参考：点击查看提示词
代码描述：三维中国龙遨游云海
下面为部分代码预览，完整代码请点击下载或在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" />
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ctext y='26' font-size='26'%3E%F0%9F%90%8D%3C/text%3E%3C/svg%3E" />
<title>云海神龙 · Chinese Dragon over the Cloud Sea</title>
<style>
  :root{
    --gold:#e9c882; --gold-dim:#b8924f; --ink:#060a12; --paper:#e8eef7;
    --panel:rgba(10,16,26,.46); --line:rgba(233,200,130,.26);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;height:100%;background:#05080f;overflow:hidden;
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
    color:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    -webkit-tap-highlight-color:transparent;}
  #app{position:fixed;inset:0;}
  canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;}
  canvas.dragging{cursor:grabbing;}

  /* ---------- loading ---------- */
  #loader{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:26px;
    background:radial-gradient(120% 90% at 50% 42%,#16243c 0%,#0a1220 45%,#05080f 100%);
    transition:opacity .9s ease,visibility .9s ease;}
  #loader.hide{opacity:0;visibility:hidden;}
  .lg-title{font-size:min(9.5vw,58px);letter-spacing:.42em;text-indent:.42em;font-weight:300;
    color:#f3e7cd;text-shadow:0 0 34px rgba(233,200,130,.45),0 0 90px rgba(120,170,255,.22);}
  .lg-sub{font-size:12px;letter-spacing:.34em;text-indent:.34em;color:rgba(200,215,235,.5);text-transform:uppercase;}
  .lg-bar{width:min(56vw,320px);height:1px;background:rgba(233,200,130,.16);position:relative;overflow:hidden;}
  .lg-bar i{position:absolute;left:0;top:-1px;height:3px;width:0%;
    background:linear-gradient(90deg,rgba(233,200,130,0),var(--gold));transition:width .35s ease;
    box-shadow:0 0 14px rgba(233,200,130,.85);}
  .lg-msg{font-size:11.5px;letter-spacing:.2em;color:rgba(200,215,235,.42);min-height:16px;}

  /* ---------- hud ---------- */
  .hud{position:fixed;z-index:20;pointer-events:none;user-select:none;
    text-shadow:0 1px 10px rgba(0,0,0,.65);}
  #brand{top:22px;left:24px;}
  #brand .t{font-size:17px;letter-spacing:.3em;color:#f0e4cb;font-weight:300;}
  #brand .s{margin-top:6px;font-size:10px;letter-spacing:.22em;color:rgba(190,210,235,.42);}
  #stats{top:22px;right:24px;text-align:right;font-variant-numeric:tabular-nums;}
  #stats .row{display:flex;justify-content:flex-end;gap:10px;font-size:11.5px;letter-spacing:.12em;
    color:rgba(205,220,240,.72);margin-bottom:5px;}
  #stats .row b{font-weight:500;color:var(--gold);min-width:74px;text-align:right;display:inline-block;}
  #help{bottom:20px;left:24px;max-width:min(46vw,430px);}
  #help .k{display:flex;gap:10px;font-size:11.5px;line-height:1.85;color:rgba(200,215,235,.62);}
  #help .k kbd{display:inline-block;min-width:20px;padding:1px 6px;border:1px solid var(--line);
    border-radius:4px;font:11px/1.6 ui-monospace,Menlo,monospace;color:var(--gold);background:rgba(255,255,255,.03);}
  #help .ttl{font-size:10px;letter-spacing:.26em;color:rgba(233,200,130,.55);margin-bottom:8px;}
  #brand .sep{width:46px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);margin:9px 0 2px;}

  #toggle{position:fixed;right:24px;bottom:20px;z-index:21;pointer-events:auto;cursor:pointer;
    font-size:10.5px;letter-spacing:.2em;color:rgba(210,225,245,.62);padding:8px 14px;
    border:1px solid var(--line);border-radius:2px;background:var(--panel);backdrop-filter:blur(6px);
    transition:.25s;}
  #toggle:hover{color:var(--gold);border-color:rgba(233,200,130,.55);}
  .hidden{display:none !important;}

  #pad{position:fixed;right:22px;bottom:86px;z-index:22;display:none;
    grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:8px;}
  #pad button{appearance:none;border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(6px);
    color:var(--gold);border-radius:8px;font-size:16px;pointer-events:auto;cursor:pointer;}
  #pad button:active{background:rgba(233,200,130,.28);}
  #pad .u{grid-column:2;grid-row:1;} #pad .l{grid-column:1;grid-row:2;}
  #pad .d{grid-column:2;grid-row:2;} #pad .r{grid-column:3;grid-row:2;}
  #pad .b{grid-column:3;grid-row:1;}
  @media (pointer:coarse){ #pad{display:grid;} }

  #alert{position:fixed;inset:auto 0 0 0;z-index:40;text-align:center;padding:14px;
    background:rgba(60,10,10,.8);color:#ffd9d9;font-size:13px;letter-spacing:.08em;display:none;}
</style>
</head>
<body>
<div id="app"><canvas id="c"></canvas></div>

<div id="loader">
  <div class="lg-title">云海神龙</div>
  <div class="lg-sub">Chinese Dragon over the Cloud Sea</div>
  <div class="lg-bar"><i id="loadbar"></i></div>
  <div class="lg-msg" id="loadmsg">正在唤醒云海…</div>
</div>

<div class="hud" id="brand">
  <div class="t">云海神龙</div>
  <div class="sep"></div>
  <div class="s">DRAGON&nbsp;·&nbsp;CLOUD&nbsp;SEA&nbsp;·&nbsp;WEBGL</div>
</div>

<div class="hud" id="stats">
  <div class="row"><span>高度 ALT</span><b id="sAlt">0 m</b></div>
  <div class="row"><span>速度 SPD</span><b id="sSpd">0 km/h</b></div>
  <div class="row"><span>帧率 FPS</span><b id="sFps">--</b></div>
  <div class="row"><span>画质 QLT</span><b id="sQ">HIGH</b></div>
</div>

<div class="hud" id="help">
  <div class="ttl">操 作 说 明 / CONTROLS</div>
  <div class="k"><kbd>W</kbd><kbd>S</kbd><span>抬头爬升 / 俯冲下降</span></div>
  <div class="k"><kbd>A</kbd><kbd>D</kbd><span>左转 / 右转</span></div>
  <div class="k"><kbd>Shift</kbd><span>加速冲刺</span></div>
  <div class="k"><kbd>Space</kbd><span>减速悬停</span></div>
  <div class="k"><kbd>拖动</kbd><span>旋转视角 · 滚轮缩放</span></div>
</div>

<div id="pad">
  <button class="u" data-k="KeyW">▲</button>
  <button class="b" data-k="ShiftLeft">⚡</button>
  <button class="l" data-k="KeyA">◀</button>
  <button class="d" data-k="KeyS">▼</button>
  <button class="r" data-k="KeyD">▶</button>
</div>
<div id="toggle">画质 / QUALITY</div>
<div id="alert"></div>

<script type="module">
/* =====================================================================
   云海神龙 — 实时渲染的中国龙
   0) 依赖装载（三套 CDN 回退）  1) GLSL 库
   ===================================================================== */

const loadEl = document.getElementById('loadbar');
const msgEl = document.getElementById('loadmsg');
const setProgress = (p, m) => { loadEl.style.width = (p * 100).toFixed(0) + '%'; if (m) msgEl.textContent = m; };
const yieldFrame = () => new Promise(r => requestAnimationFrame(() => setTimeout(r, 0)));

const CDN = [
  'https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js',
  'https://unpkg.com/three@0.160.0/build/three.module.js',
  'https://esm.sh/three@0.160.0'
];
let THREE = null, cdnErr = null;
for (const url of CDN) {
  try { THREE = await import(url); break; } catch (e) { cdnErr = e; }
}
if (!THREE) {
  document.getElementById('alert').style.display = 'block';
  document.getElementById('alert').textContent = '无法加载 three.js 库，请检查网络连接后刷新页面。';
  document.getElementById('loader').classList.add('hide');
  throw cdnErr;
}
setProgress(0.05, '正在唤醒云海…');

/* =====================================================================
   GLSL 公共片段
   ===================================================================== */
const GLSL_SKY = /* glsl */`
uniform vec3 uSunDir;
uniform vec3 uSunCol;
uniform vec3 uZenith;
uniform vec3 uHorizon;
uniform vec3 uGround;

vec3 skyRadiance(vec3 dir){
  float h = dir.y;
  vec3 col = mix(uHorizon, uZenith, pow(clamp(h,0.0,1.0), 0.42));
  col = mix(uGround, col, smoothstep(-0.22, 0.015, h));
  float cosT = dot(dir, uSunDir);
  float mie = pow(max(cosT,0.0), 13.0)*0.40 + pow(max(cosT,0.0), 3.5)*0.11;
  float disc = smoothstep(0.99978, 0.99992, cosT);
  col += uSunCol * (mie*1.05 + disc*95.0);
  float hz = exp(-abs(h)*7.0);
  col += uSunCol * hz * pow(max(cosT,0.0), 2.5) * 0.22;
  // 极轻微的高空冷色偏移
  col += uZenith * 0.06 * pow(clamp(h,0.0,1.0), 3.0);
  return col;
}
`;

const GLSL_HASH = /* glsl */`
float hash21(vec2 p){ p = fract(p*vec2(123.34,456.21)); p += dot(p,p+45.32); return fract(p.x*p.y); }
float vnoise2(vec2 x){
  vec2 i = floor(x), f = fract(x);
  f = f*f*(3.0-2.0*f);
  float a = hash21(i), b = hash21(i+vec2(1,0)), c = hash21(i+vec2(0,1)), d = hash21(i+vec2(1,1));
  return mix(mix(a,b,f.x), mix(c,d,f.x), f.y);
}
float fbm2(vec2 p, int oct){
  float s=0.0, a=0.5;
  for(int i=0;i<8;i++){ if(i>=oct) break; s += a*vnoise2(p); p = p*2.03 + 17.1; a *= 0.5; }
  return s;
}
`;

/* 体积云 raymarch —— 云海主角.........完整代码请登录后点击上方下载按钮下载查看