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

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

代码语言：html

所属分类：其他

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

代码描述：三维篮球场沙盘展示

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>篮球场沙盘 · Isometric Voxel</title>
<style>
  html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: #ffffff;
  }
  canvas { display: block; }
</style>
</head>
<body>

<!-- ============ Three.js CDN (importmap) ============ -->
<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.161.0/build/three.module.js"
  }
}
</script>

<script type="module">
import * as THREE from 'three';

/* ============================================================
   0. 全局尺寸常量
   ============================================================ */
const COURT_W   = 28;    // 球场长度 (x)
const COURT_D   = 15;    // 球场宽度 (z)
const FLOOR_TOP = 0.25;  // 球场地面顶面高度
const LINE_Y    = 0.25;  // 标线高度
const RIM_X     = 12.425;// 篮筐中心距场地中心距离
const BOARD_X   = 12.575;// 篮板位置
const POLE_X    = 13.6;  // 篮球架立柱位置

/* ============================================================
   1. 场景 / 相机 / 渲染器
   ============================================================ */
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.setClearColor(0xffffff, 1);
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);   // 纯白背景，无渐变无雾

// —— 正交等距相机（azimuth 45°, elevation 35.264°）——
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 400);
camera.position.set(50, 50, 50);
camera.lookAt(0, 1.5, 0);

/** 根据窗口尺寸自适应正交视锥（保证整块沙盘可见） */
function.........完整代码请登录后点击上方下载按钮下载查看