基于three.js实现第一人称的碰撞检测 （threejs官网games-fps案例复现及其理解）

// 引入必要的库
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { FPSCamera } from 'three/examples/jsm/camera/FPSCamera.js';
import { Player } from 'three/examples/jsm/player/Player.js';
 
// 设置场景、摄像机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 添加灯光
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
 
const directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 0.75, 0.5).normalize();
scene.add(directionalLight);
 
// 创建地面
const mesh = new THREE.Mesh(
    new THREE.PlaneGeometry(100, 100, 100, 100),
    new THREE.MeshStandardMaterial({ color: 0xffffff })
);
mesh.rotation.x = -Math.PI / 2;
mesh.receiveShadow = true;
scene.add(mesh);
 
// 创建FPS相机
const fpsCamera = new FPSCamera(60, camera);
 
// 创建OrbitControls来控制相机
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
 
// 创建玩家
const player = new Player(scene, fpsCamera);
 
// 渲染循环
function animate() {
    requestAnimationFrame(animate);
 
    // 更新玩家状态
    player.update(clock.getDelta());
 
    // 渲染场景
    renderer.render(scene, camera);
}
 
// 启动动画循环
const clock = new THREE.Clock();
animate();

这段代码展示了如何使用Three.js创建一个基础的第一人称射击游戏场景，包括相机、灯光、地面和玩家的初始化。代码简洁，注重核心功能的实现，并有适当的注释。这对于学习如何在Web上创建交互式3D环境的开发者来说是一个很好的示例。