代码语言：html

所属分类：其他

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

代码描述：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,maximum-scale=1,user-scalable=no" />
<title>山脚古寺 · Three.js 沉浸场景</title>
<style>
  :root { color-scheme: dark; --glass: rgba(18,25,27,.72); --line: rgba(255,255,255,.15); --gold: #e8c989; }
  * { box-sizing: border-box; }
  html,body { margin:0; width:100%; height:100%; overflow:hidden; background:#11191c; font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; }
  #scene { position:fixed; inset:0; width:100%; height:100%; display:block; outline:none; }
  .panel { position:fixed; z-index:5; color:#f5f4ef; background:var(--glass); border:1px solid var(--line); box-shadow:0 12px 40px rgba(0,0,0,.26); backdrop-filter: blur(16px); -webkit-backdrop-filter:blur(16px); }
  #leftPanel { top:18px; left:18px; width:min(340px,calc(100vw - 36px)); border-radius:18px; padding:17px 17px 15px; }
  .eyebrow { color:#c7b58c; font-size:10px; letter-spacing:3px; margin-bottom:7px; }
  h1 { margin:0; font-size:21px; letter-spacing:1px; font-weight:650; }
  .subtitle { color:#c5cdca; font-size:11px; margin-top:5px; }
  .status { display:flex; align-items:center; gap:8px; margin:15px 0 12px; }
  .status-chip { border:1px solid rgba(232,201,137,.3); color:#f0d7a1; border-radius:999px; font-size:11px; padding:5px 9px; background:rgba(232,201,137,.08); }
  .status-text { color:#d2d9d5; font-size:11px; }
  .section-title { display:flex; justify-content:space-between; align-items:center; color:#bdc8c4; font-size:11px; margin:12px 0 8px; }
  #clock { font-size:20px; font-variant-numeric:tabular-nums; color:#fff3d6; font-weight:650; letter-spacing:1px; }
  input[type=range] { width:100%; accent-color:#d7b876; cursor:pointer; }
  .range-labels { display:flex; justify-content:space-between; color:#9eaaa6; font-size:10px; margin-top:-1px; }
  .button-row { display:flex; flex-wrap:wrap; gap:7px; }
  button { font:inherit; cursor:pointer; color:#e8ebe8; border:1px solid rgba(255,255,255,.17); background:rgba(255,255,255,.065); border-radius:10px; padding:8px 10px; font-size:11px; transition:background .18s,border-color .18s,transform .18s; }
  button:hover { background:rgba(232,201,137,.17); border-color:rgba(232,201,137,.55); }
  button:active { transform:scale(.98); }
  button.primary { background:rgba(190,148,76,.23); border-color:rgba(232,201,137,.4); color:#ffe9b8; }
  .weather-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
  .weather-grid button { padding:8px 4px; }
  .weather-grid button.active { background:rgba(232,201,137,.2); color:#ffe8b1; border-color:rgba(232,201,137,.6); }
  .divider { height:1px; background:var(--line); margin:13px 0; }
  #help { right:18px; bottom:18px; max-width:min(400px,calc(100vw - 36px)); border-radius:14px; padding:10px 13px; font-size:11px; line-height:1.65; color:#d0d8d4; }
  #help b { color:#f5e0b0; font-weight:600; }
  #loading { position:fixed; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; background:radial-gradient(ellipse at 50% 40%,#344543,#11191b 70%); color:#efe4c9; transition:opacity .6s; pointer-events:none; }
  #loading .logo { font-size:25px; letter-spacing:5px; }
  #loading .sub { font-size:12px; color:#b5c0b9; letter-spacing:2px; }
  #loading .bar { height:2px; width:150px; background:rgba(255,255,255,.12); overflow:hidden; border-radius:3px; }
  #loading .bar:after { content:""; display:block; width:45%; height:100%; background:#d5b574; animation:load 1.3s ease-in-out infinite; }
  @keyframes load { from{transform:translateX(-100%)} to{transform:translateX(330%)} }
  #hintToast { position:fixed; z-index:10; bottom:88px; left:50%; transform:translateX(-50%); border-radius:999px; padding:8px 14px; color:#f7ecd3; font-size:11px; background:rgba(15,22,23,.78); border:1px solid rgba(255,255,255,.16); opacity:0; transition:opacity .25s; pointer-events:none; }
  @media (max-width:600px) { #leftPanel{top:10px;left:10px;padding:13px;width:calc(100vw - 20px);max-height:55vh;overflow:auto} h1{font-size:18px} #help{right:10px;bottom:10px;font-size:10px} .status{margin:10px 0} .divider{margin:10px 0} }
</style>
</head>
<body>
<canvas id="scene" aria-label="三维山脚古寺场景"></canvas>
<div id="loading"><div class="logo">山脚古寺</div><d.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论