代码语言：html

所属分类：三维

代码描述：three实现三维苏州园林沙盘模型场景体验代码

代码标签： 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>
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;600&display=swap" rel="stylesheet">
<style>
  :root{ --ink:#2e312c; --paper:#edeae1; --cinnabar:#a03d2c; }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html,body{ height:100%; overflow:hidden; background:var(--paper); }
  body{ font-family:'Noto Serif SC', serif; color:var(--ink); }
  #app{ position:fixed; inset:0; }
  #app canvas{ display:block; }

  /* 遮罩 */
  #veil{ position:fixed; inset:0; background:var(--paper); z-index:60; display:grid; place-items:center;
    transition:opacity 1.2s ease; }
  #veil.gone{ opacity:0; pointer-events:none; }
  #veil span{ font-family:'Ma Shan Zheng'; font-size:22px; letter-spacing:.5em; opacity:.45; }

  /* 标题 */
  .brand{ position:fixed; top:26px; left:26px; z-index:20; display:flex; gap:14px; align-items:flex-start;
    opacity:0; transform:translateY(-8px); transition:all 1.2s ease .3s; pointer-events:none; }
  .brand.in{ opacity:1; transform:none; }
  .brand h1{ writing-mode:vertical-rl; font-family:'Ma Shan Zheng', serif; font-weight:400;
    font-size:46px; letter-spacing:.18em; line-height:1; color:var(--ink); }
  .brand .sub{ writing-mode:vertical-rl; font-size:12px; letter-spacing:.42em; opacity:.62; margin-top:6px; }
  .brand .seal{ width:32px; height:32px; margin-top:auto; background:var(--cinnabar); color:#f4eee0;
    font-family:'Ma Shan Zheng'; font-size:20px; display:grid; place-items:center; border-radius:3px;
    transform:rotate(-4deg); box-shadow:0 2px 8px rgba(0,0,0,.25); }

  /* 工具栏 */
  .toolbar{ position:fixed; top:26px; right:26px; z-index:20; display:flex; flex-direction:column; gap:10px;
    opacity:0; transition:opacity 1.2s ease .5s; }
  .toolbar.in{ opacity:1; }
  .toolbar button{ width:42px; height:42px; border-radius:50%; border:1px solid rgba(46,49,44,.25);
    background:rgba(245,243,236,.85); backdrop-filter:blur(6px); color:var(--ink); cursor:pointer;
    display:grid; place-items:center; transition:all .25s; }
  .toolbar button:hover{ border-color:var(--cinnabar); color:var(--cinnabar); transform:translateY(-2px); }
  .toolbar button.on{ background:var(--cinnabar); border-color:var(--cinnabar); color:#f4eee0; }
  .toolbar svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6;
    stroke-linecap:round; stroke-linejoin:round; }

  /* 景点名录 */
  .roster{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:20;
    display:flex; align-items:center; background:rgba(245,243,236,.88); backdrop-filter:blur(8px);
    border:1px solid rgba(46,49,44,.18); border-radius:4px; padding:0 14px; max-width:92vw; overflow-x:auto;
    opacity:0; transition:opacity 1.2s ease .7s; }
  .roster.in{ opacity:1; }
  .roster .r-label{ font-size:11px; letter-spacing:.3em; opacity:.55; padding:12px 12px 12px 2px;
    border-right:1px solid rgba(46,49,44,.18); white-space:nowrap; }
  .roster button{ border:none; background:none; font-family:inherit; font-size:13px; letter-spacing:.12em;
    color:var(--ink); padding:13px 13px; cursor:pointer; white-space:nowrap; position:relative; transition:color .2s; }
  .roster button + button::before{ content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
    width:1px; height:12px; background:rgba(46,49,44,.25); }
  .roster button:hover{ color:var(--cinnabar); }
  .roster button.on{ color:var(--cinnabar); }
  .roster button.on::after{ content:''; position:absolute; left:13px; right:13px; bottom:8px; height:2px;
    background:var(--cinnabar); }

  /* 悬浮提示 */
  #tip{ position:fixed; left:0; top:0; z-index:30; pointer-events:none; background:rgba(40,42,38,.92);
    color:#f0ece0; padding:9px 14px 10px; border-radius:3px; border-left:3px solid var(--cinnabar);
    opacity:0; transition:opacity .18s; max-width:220px; }
  #tip.show{ opacity:1; }
  #tip b{ display:block; font-family:'Ma Shan Zheng'; font-weight:400; font-size:17px; letter-spacing:.1em; }
  #tip span{ display:block; font-size:11px; opacity:.65; letter-spacing:.2em; margin-top:2px; }

  /* 信息面板 */
  #panel{ position:fixed; top:0; right:0; height:100%; width:340px; max-width:88vw; z-index:25;
    background:rgba(246,244,237,.96); backdrop-filter:blur(10px); border-left:1px solid rgba(46,49,44,.15);
    box-shadow:-18px 0 50px rgba(30,32,28,.18); padding:56.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论