three实现三维篮球场沙盘展示代码-html代码-BFW代码库

three实现三维篮球场沙盘展示代码

代码语言：html

所属分类：其他

代码由glm-5.3-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.0">
<title>等距篮球场沙盘 · Three.js</title>
<style>
  html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #ffffff; }
  canvas { display: block; opacity: 0; transition: opacity .6s ease; }
  canvas.ready { opacity: 1; }
  #loading {
    position: fixed; inset: 0; display: flex; flex-direction: column; gap: 14px;
    align-items: center; justify-content: center; background: #ffffff;
    color: #98a2b3; font: 14px/1.8 -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    letter-spacing: 2px; transition: opacity .5s ease; z-index: 10;
  }
  #loading .dot { width: 34px; height: 34px; border: 3px solid #ececF2; border-top-color: #ff8b77; border-radius: 50%; animation: spin .9s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
</style>
</head>
<body>
<div id="loading"><div class="dot"></div>正在加载 Three.js（CDN）…</div>

<script type="module">
/* =====================================================================
 * 0. 通过 CDN 引入 Three.js（ES Module，多源依次回退，确保可运行）
 * ===================================================================== */
const CDNS = [
  'https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.min.js',
  'https://unpkg.com/three@0.160.0/build/three.module.min.js',
  'https://registry.npmmirror.com/three/0.160.0/files/build/three.module.min.js',
];
let THREE = null;
for (const url of CDNS) {
  try { THREE = await import(url); break; }
  catch (e) { console.warn('CDN 加载失败，尝试下一个源：', url); }
}
if (!THREE) {
  document.getElementById('loading').innerHTML =
    'Three.js 加载失败：请检查网络连接（页面需要访问 CDN）';
  throw new Error('所有 Three.js CDN 均不可用');
}

/* =====================================================================
 * 1. 基础常量与调色板（明亮柔和的马卡龙色系 + 少量高饱和点缀）
 * ===================================================================== */
const COURT_L = 30, COURT_W = 16;        // 球场标线区域（长 × 宽）
const PLINTH_L = 40, PLINTH_W = 24;      // 沙盘底座
const GRASS_TOP = 0.12;                  // 草坪层顶面高度
const FLOOR_TOP = 0.36;                  // 木地板顶面高度
const RIM_Y = 3.8;                       // 篮筐高度
const HOOP_X = 13.35;                    // 篮筐中心 X
const LINE_W = 0.14, LINE_H = 0.05;      // 直线标线尺寸
const ARC_H = 0.055;                     // 弧线略高，避免交叉处 z-fighting

const C = {
  grass: 0xD6E9C4,  grassSide: 0xC4DDB2,                 // 草坪（嫩豆绿）
  plinthSide: 0xEBDCC0, plinthTop: 0xF2E7D2,             // 底座（奶油色）
  wood: 0xF2D8A7,  woodSide: 0xDFBB86, seam: 0xE9CD9C,   // 木地板（浅枫木）
  line: 0xFFFFFF,                                        // 标线（纯白）
  keyE: 0xFFCFC2,   keyW: 0xC2EAE1,   center: 0xFCE7A4,  // 油漆区（珊瑚/薄荷/奶油黄）
  pole: 0x93A3B5,   poleDark: 0x6E7B8E,                   // 支架（雾灰蓝）
  board: 0xFBFBF7,  boardEdge:.........完整代码请登录后点击上方下载按钮下载查看