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>北京天坛 · 三维漫游 Temple of Heaven 3D</title>
<style>
  * { margin:0; padding:0; box-sizing:border-box; }
  html,body { width:100%; height:100%; overflow:hidden; background:#0b1016;
    font-family:"Noto Serif SC","Songti SC","Microsoft YaHei",serif; }
  canvas { display:block; }

  #vignette { position:fixed; inset:0; pointer-events:none;
    background:radial-gradient(ellipse at center, transparent 55%, rgba(5,10,18,.45) 100%); z-index:5; }

  /* ---------- 开始菜单 ---------- */
  #overlay { position:fixed; inset:0; z-index:50; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center; cursor:pointer;
    background:linear-gradient(180deg, rgba(8,14,24,.55) 0%, rgba(8,14,24,.25) 40%, rgba(8,14,24,.6) 100%);
    color:#f3ead6; transition:opacity .6s; }
  #overlay.hidden { opacity:0; pointer-events:none; }
  #overlay .seal { width:64px; height:64px; border:3px solid #c9a24a; border-radius:10px;
    display:flex; align-items:center; justify-content:center; font-size:34px; color:#e8c86a;
    letter-spacing:0; margin-bottom:22px; background:rgba(120,30,20,.35);
    box-shadow:0 0 30px rgba(201,162,74,.35); }
  #overlay h1 { font-size:52px; font-weight:700; letter-spacing:14px; text-indent:14px;
    color:#f5ecd8; text-shadow:0 2px 18px rgba(0,0,0,.6); }
  #overlay .en { margin-top:8px; font-size:13px; letter-spacing:6px; color:#c9b98a; font-family:Georgia,serif; }
  #overlay .sub { margin-top:26px; font-size:15px; line-height:2; color:#e6dcc2; }
  #overlay .keys { margin-top:20px; display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
  #overlay .keys span { border:1px solid rgba(232,200,106,.55); border-radius:6px; padding:5px 12px;
    font-size:13px; color:#ead9a8; background:rgba(20,26,36,.5); }
  #overlay .start { margin-top:34px; font-size:18px; letter-spacing:6px; color:#0e1420;
    background:linear-gradient(180deg,#ecd28a,#c9a24a); padding:13px 46px; border-radius:40px;
    box-shadow:0 6px 26px rgba(201,162,74,.45); animation:pulse 2s infinite; }
  @keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
  #overlay .tip { margin-top:16px; font-size:12px; color:#9aa4b5; }

  /* ---------- HUD ---------- */
  #hud { position:fixed; top:14px; left:16px; z-index:20; color:#e9dfc4; font-size:12.5px;
    line-height:1.9; text-shadow:0 1px 4px rgba(0,0,0,.8); pointer-events:none;
    background:rgba(10,14,22,.42); padding:10px 14px; border-radius:10px;
    border:1px solid rgba(201,162,74,.25); backdrop-filter:blur(4px); }
  #hud b { color:#e8c86a; }
  #mode { color:#8fd0ff; }

  #crosshair { position:fixed; left:50%; top:50%; z-index:15; width:6px; height:6px;
    margin:-3px 0 0 -3px; border-radius:50%; background:rgba(255,255,255,.85);
    box-shadow:0 0 6px rgba(0,0,0,.7); pointer-events:none; display:none; }

  #zone { position:fixed; left:16px; bottom:18px; z-index:20; max-width:400px;
    color:#f0e7cf; background:rgba(12,16,24,.62); border:1px solid rgba(201,162,74,.35);
    border-left:4px solid #c9a24a; border-radius:8px; padding:12px 16px;
    backdrop-filter:blur(5px); opacity:0; transform:translateY(8px);
    transition:opacity .5s, transform .5s; pointer-events:none; }
  #zone.show { opacity:1; transform:translateY(0); }
  #zone h3 { font-size:17px; letter-spacing:3px; color:#e8c86a; margin-bottom:5px; }
  #zone p { font-size:12.5px; line-height:1.8; color:#ddd3ba; }

  #minimap { position:fixed; right:16px; bottom:16px; z-index:20; width:168px; height:200px;
    border:1px solid rgba(201,162,74,.4); border-radius:10px; background:rgba(8,12,18,.55);
    backdrop-filter:blur(3px); pointer-events:none; }
</style>
</head>
<body>

<div id="vignette"></div>
<div id="crosshair"></div>

<div id="hud">
  <b>北京 · 天坛</b>　Temple of H.........完整代码请登录后点击上方下载按钮下载查看