three实现一个三维场景带音效射击示例代码-html代码-BFW代码库

three实现一个三维场景带音效射击示例代码

代码语言：html

所属分类：三维

代码描述：three实现一个三维场景带音效射击示例代码

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

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>Three.js FPS Demo</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<style>
  html,body{margin:0;height:100%;background:#0b0e13;overflow:hidden;font-family:system-ui,Segoe UI,Roboto}
  #overlay{
    position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
    color:#d9e3ff;background:radial-gradient(1200px 800px at 70% 20%,#0f1423 0%,#090c16 60%,#05070c 100%);
    cursor:pointer;user-select:none
  }
  #overlay .card{
    text-align:center;padding:22px 28px;border-radius:14px;background:rgba(255,255,255,.04);
    backdrop-filter: blur(6px);box-shadow:0 20px 60px rgba(0,0,0,.4)
  }
  #overlay h1{margin:0 0 10px;font-size:20px}
  #overlay p{margin:6px 0;opacity:.8}
  #hud{
    position:fixed;left:16px;top:12px;color:#a9b7ff;font-size:14px;line-height:1.25;pointer-events:none
  }
  #crosshair{
    position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none
  }
  #crosshair::before,#crosshair::after{
    content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:18px;height:2px;background:#cfe1ff;border-radius:2px;box-shadow:0 0 8px rgba(120,180,255,.7)
  }
  #crosshair::after{transform:translate(-50%,-50%) rotate(90deg)}
  canvas{display:block}
</style>
</head>
<body>
<div id="overlay">
  <div class="card">
    <h1>FPS 射击 Demo</h1>
    <p>W/A/S/D 移动 · 鼠标观察 · Space 跳跃 · Shift 冲刺</p>
    <p>左键射击目标方块，看看你能得多少分！</p>
    <p style="opacity:.7">点击任意位置开始</p>
  </div>
</div>
<div id="hud">Score: <span id="score">0</span><br/>Ammo: ∞</div>
<div id="crosshair"></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 { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
let prevTime = performance.now();
let scene, camera, renderer, controls;
let listener, audioCtx;
let moveForward=false, moveBackward=false, moveLeft=false, moveRight=false, canJump=false, sprint=false;
let velocity = new THREE.Vector3();
let direction = new THREE.Vector3();
let scor.........完整代码请登录后点击上方下载按钮下载查看