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 移动 · 鼠标观.........完整代码请登录后点击上方下载按钮下载查看