three实现三维体育中心足球场体育馆场景代码-html代码-BFW代码库

three实现三维体育中心足球场体育馆场景代码

代码语言：html

所属分类：三维

代码描述：three实现三维体育中心足球场体育馆场景代码

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

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Three.js 椭圆形精致足球场（昼夜/雨雪切换）</title>
  <style>
    html, body { margin:0; height:100%; overflow:hidden; background:#000; font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; }
    #c { position: fixed; inset: 0; display:block; }

    .ui{
      position: fixed; left: 14px; top: 14px; z-index: 10;
      background: rgba(0,0,0,0.45); color:#fff;
      padding: 12px 12px; border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.12);
      backdrop-filter: blur(6px);
      min-width: 260px;
      user-select: none;
    }
    .ui .title{ font-weight: 800; letter-spacing: .2px; }
    .ui .row{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; align-items:center; }
    select, button{
      cursor:pointer;
      background: rgba(255,255,255,0.10);
      color:#fff;
      border: 1px solid rgba(255,255,255,0.22);
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 13px;
      outline: none;
    }
    button.active{ background: rgba(66,165,245,0.35); border-color: rgba(66,165,245,0.75); }
    .ui .tip{ margin-top:10px; font-size:12px; color: rgba(255,255,255,0.78); line-height:1.35; }
    .kbd{ opacity:.85; font-weight:700; }
  </style>
</head>

<body>
<canvas id="c"></canvas>

<div class="ui">
  <div class="title">椭圆形精致足球场</div>

  <div class="row">
    <div style="font-size:13px; opacity:.9; min-width:56px;">天气：</div>
    <select id="weatherSel" style="flex:1; min-width:140px;">
      <option value="clear" selected>晴天</option>
      <option value="rain">下雨</option>
      <option value="snow">下雪</option>
    </select>
  </div>

  <div class="row">
    <div style="font-size:13px; opacity:.9; min-width:56px;">昼夜：</div>
    <button id="btnDay" class="active" type="button">白天</button>
    <button id="btnNight" type="button">夜晚</button>
  </div>

  <div class="tip">
    <div>• 椭圆球场：用“标准足球场线位”映射到椭圆边界，线条更合理</div>
    <div>• 鼠标左键旋转 / 右键拖拽 / 滚轮缩放（OrbitControls）</div>
  </div>
</div>
   <script type="importmap">
{
 "imports":{
    "three":"//repo.bfw.wiki/bfwrepo/js/module/three/build/164/three.module.js",
    "three/addons/":"//repo.bfw.wiki/bfwrepo/js/module/three/examples/164/jsm/"
 }
}
</script>

<script type="module">

    import * as THREE from 'three';
  
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

  const canvas = document.getElementById('c');

  // -------------------- Scene / Renderer / Camera --------------------
  const scene = new THREE.Scene();
.........完整代码请登录后点击上方下载按钮下载查看