three实现三维人间和云上天宫南天门凌霄殿场景漫游体验代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维人间和云上天宫南天门凌霄殿场景漫游体验代码

下面为部分代码预览，完整代码请点击下载或在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>
  html,body{margin:0;height:100%;overflow:hidden;background:#0b1026;
    font-family:"Kaiti SC","STKaiti","KaiTi","Noto Serif SC",serif;}
  #app{position:fixed;inset:0;}
  canvas{display:block;}
  .ui{position:fixed;z-index:10;color:#f5e3b3;user-select:none;}
  #startOverlay{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:radial-gradient(1100px 650px at 50% 28%,rgba(88,48,12,.45),rgba(8,10,26,.94)),
               linear-gradient(#1a2140,#0b1026);
    text-align:center;transition:opacity .9s;}
  #startOverlay.hide{opacity:0;pointer-events:none;}
  .bigTitle{font-size:80px;letter-spacing:22px;margin:0;font-weight:700;
    background:linear-gradient(#ffe9a8,#f0c05a 55%,#b9832e);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    text-shadow:0 0 40px rgba(240,190,80,.25);}
  .subTitle{font-size:22px;letter-spacing:10px;color:#d8c391;margin:14px 0 4px;}
  .desc{max-width:660px;font-size:15px;line-height:1.9;color:#bfae8d;margin:18px 24px;}
  .btnRow{display:flex;gap:26px;margin-top:10px;}
  .btn{cursor:pointer;font-size:20px;letter-spacing:6px;padding:13px 40px;color:#ffe9b0;
    background:linear-gradient(rgba(120,60,20,.55),rgba(60,25,8,.65));
    border:1px solid #c9963c;border-radius:6px;transition:.25s;font-family:inherit;}
  .btn:hover{background:linear-gradient(rgba(180,100,30,.7),rgba(90,40,12,.8));
    box-shadow:0 0 24px rgba(230,180,80,.35);transform:translateY(-2px);}
  .keys{margin-top:26px;font-size:13px;color:#8f8267;letter-spacing:2px;line-height:2;}
  #placeName{top:7%;left:50%;transform:translateX(-50%);font-size:42px;letter-spacing:16px;
    color:#ffe9b0;text-shadow:0 0 26px rgba(255,200,90,.55),0 2px 6px rgba(0,0,0,.5);
    opacity:0;transition:opacity .6s;pointer-events:none;white-space:nowrap;}
  #hudTL{top:14px;left:16px;font-size:13px;color:#d9c69b;background:rgba(15,12,20,.42);
    padding:8px 14px;border:1px solid rgba(201,150,60,.5);border-radius:6px;line-height:1.9;
    display:none;backdrop-filter:blur(3px);}
  #hudTR{top:14px;right:16px;display:none;gap:10px;}
  .mini{cursor:pointer;font-size:13px;letter-spacing:2px;padding:7px 14px;color:#ffe9b0;
    background:rgba(30,20,10,.55);border:1px solid rgba(201,150,60,.55);border-radius:5px;font-family:inherit;}
  .mini:hover{background:rgba(90,50,15,.75);}
  #crosshair{top:50%;left:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
    background:rgba(255,235,180,.9);box-shadow:0 0 8px rgba(255,220,140,.9);display:none;pointer-events:none;}
  #resumeHint{inset:0;display:none;align-items:center;justify-content:center;background:rgba(8,8,16,.45);cursor:pointer;}
  #resumeHint div{font-size:24px;letter-spacing:6px;color:#ffe9b0;padding:22px 46px;
    border:1px solid #c9963c;background:rgba(30,18,8,.8);border-radius:8px;}
  #helpPanel{top:50%;left:50%;transform:translate(-50%,-50%);display:none;width:460px;
    background:rgba(16,12,22,.92);border:1px solid #c9963c;border-radius:10px;padding:26px 32px;}
  #helpPanel h3{margin:0 0 14px;letter-spacing:8px;color:#ffe1a0;text-align:center;font-size:24px;}
  #helpPanel table{width:100%;border-collapse:collapse;font-size:14px;color:#d9c69b;}
  #helpPanel td{padding:6px 4px;border-bottom:1px dashed rgba(201,150,60,.25);}
  #helpPanel td:first-child{color:#ffd98a;width:130px;}
  #err{inset:0;display:none;align-items:center;justify-content:center;color:#ffb0a0;font-size:16px;text-align:center;line-height:2;}
</style>
</head>
<body>
<div id="app"></div>

<div class="ui" id="startOverlay">
  <div class="bigTitle">天 上 人 间</div>
  <div class="subTitle">《西游记》· 天宫与人间 三维漫游</div>
  <div class="desc">
    祥云之上，白玉为阶，金阙映日——南天门内，凌霄宝殿重檐耀金。<br>
    云海之下，则是人间：群山叠翠，镜湖如拭， Rivers 入海，青瓦古镇宝塔凌云，帆船出没于沧波。<br>
    你可穿云而下，一落凡尘山海之间；亦可扶摇直上，重返九霄宫阙。
    正是：“天上一日，人间一年。”
  </div>
  <div class="btnRow">
    <div class="btn" id="btnTour">开 始 游 览</div>
    <div class="btn" id="btnFree">自 由 漫 游</div>
  </div>
  <div class="keys">自动游览：天宫→穿云南下→人间山海→重返天庭 ｜ 自由漫游：W/S A/D 移动 · 空格/C 升降 · Shift 加速 · T 切换游览</div>
</div>

<div class="ui" id="placeName"></div>
<div class="ui" id="hudTL">
  <b id="modeLabel" style="color:#ffd98a">自动游览</b><br>
  W/S 前进后退 · A/D 平移<br>空格 上升 · C 下降 · Shift 加速<br>
  可穿越云层下凡人间，亦可直上九霄<br>T 切换自动游览 · H 帮助
</div>
<div class="ui" id="hudTR" style="display:none&quo.........完整代码请登录后点击上方下载按钮下载查看