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" />
<title>篮球场沙盘 · Isometric Basketball Court</title>
<style>
  html, body {
    margin: 0; padding: 0; width: 100%; height: 100%;
    overflow: hidden; background: #FFFFFF;
    -webkit-font-smoothing: antialiased;
  }
  #stage { position: fixed; inset: 0; }
  canvas { display: block; }
  .card {
    position: fixed; left: 26px; top: 24px; pointer-events: none; user-select: none;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
                 "Microsoft YaHei", system-ui, sans-serif;
    color: #9AA7B8;
  }
  .card h1 {
    margin: 0 0 6px; font-size: 15px; font-weight: 700;
    letter-spacing: .26em; color: #56657A; text-transform: uppercase;
  }
  .card p {
    margin: 0; font-size: 11px; letter-spacing: .18em; color: #BEC8D6;
  }
  .card .bar {
    width: 34px; height: 3px; border-radius: 2px; margin-bottom: 10px;
    background: linear-gradient(90deg, #FF6B4A 0 40%, #FFC24B 40% 70%, #7FB3E8 70% 100%);
  }
</style>
</head>
<body>

<div id="stage"></div>

<div class="card">
  <div class="bar"></div>
  <h1>Basketball Diorama</h1>
  <p>等距沙盘 · ISOMETRIC VOXEL SANDBOX</p>
</div>

<!-- Three.js via CDN (importmap + ES Module)，并注册备用 CDN 以应对网络抖动 -->
<script type="importmap">
{
  "imports": {
    "three":         "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
    "three-unpkg":   "https://unpkg.com/three@0.160.0/build/three.module.js",
    "three-esmsh":   "https://esm.sh/three@0.160.0"
  }
}
</script>

<script type="module">
/* ------------------------------------------------------------------
 * Three.js 加载：优先使用 importmap 指向的 jsdelivr，
 * 若网络抖动则自动回退到 unpkg / esm.sh，保证离线或 CDN 异常时仍可运行
 * ---------------------------------------------------------------- */
async function loadThree() {
  const sources = [
    'three',        // importmap → jsdelivr（主源）
    'three-unpkg',  // 备用源 1
    'three-esmsh'   // 备用源 2
  ];
  let lastErr = null;
  for (const src of sources) {
    for (let attempt = 0; attempt < 2; attempt++) {
      try {
        return await import(src);
      } catch (err) {
        lastErr = err;
        await new Promise(r => setTimeout(r, 300));
      }
    }
  }
  throw lastErr;
}
const THREE = await loadThree();

/* ============================================================
 *  0. 全局配置
 * ============================================================ */
const CFG = {
  // 球场尺寸（1 单位 ≈ 1 米，角色略作夸张以增强沙盘感）
  halfLen: 14.0,      // 半场长（X 轴）
  halfWid: 7.5,       // 半场宽（Z 轴）
  lineInset: 0.18,    // 标线内缩
  keyHalf: 2.45,      // 罚球区半宽
  keyDepth: 5.8,      // 罚球区深度
  ftRadius: 1.8,      // 罚球圈 / 中圈半径
  r3: 6.75,           // 三分弧半径
  cornerZ: 6.6,       // 底角三分线距边线
  hoopX: 12.245,      // 篮圈中心距底线
  boardX: 12.62,      // 篮板位置
  poleX: 14.9,        // 支架立柱
  rimY: 3.05,         // 篮圈高度
  boardY: 3.45,       // 篮板中心高度
  baseW: 36.0,        // 沙盘底座
  baseD: 22.0,
  baseH: 1.2,
  slabH: 0.36,        // 木地板厚度
  spin: 0.045         // 整体自转角速度 (rad/s)
};

const HALF_L = CFG.halfLen, HALF_W = CFG.halfWid;
const BX = HALF_L - CFG.lineInset;       // 底线线位置
const BZ = HALF_W - CFG.lineInset;       // 边线线位置
const FT_X = BX - CFG.keyDepth;          // 罚球线位置
const CORNER_T = Math.asin(CFG.cornerZ / CFG.r3);   // 三分弧端点角度
const FLOOR_Y = 0.39;                    // 角色脚底所在高度
const LINE_Y  = 0.404;                   // 标线中心高度

// 诊断信息（供自动化校验）
const DIAG = { ready: false, frames: 0, errors: [], objects: 0 };
window.__diorama = DIAG;
window.addEventListener('error', (e) => DIAG.errors.push(String(e.message)));

/* ============================================================
 *  1. 渲染器 / 场景 / 相机 / 灯光
 * ============================================================ */
const stage = document.getElementById('stage');

const renderer = new THREE.WebGLR.........完整代码请登录后点击上方下载按钮下载查看