three.js摄像头第一人称并且能够选择物体

three.js是一个基于WebGL的JavaScript库，用于创建动态、交互式的3D图形。在使用first-person perspective（第一人称视角）的摄像头设置中，通常涉及到场景管理、摄像机控制以及用户交互。以下是创建一个基本的第一人称视角，并让用户选择物体的步骤：

1. **初始化**: 首先，你需要创建一个Three.js场景、相机、渲染器，以及一些可选的交互元素如OrbitControls（用于鼠标或触摸移动）。

import * as THREE from 'three';
// ...

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 1.6, 3); // 设置初始位置

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const controls = new THREE.OrbitControls(camera, renderer.domElement);

2. **添加几何体和材质**: 创建一个或多个3D模型（如THREE.BoxGeometry或THREE.CubeMesh）并给予它们材质。

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({color: 0x44aa88}); // 绿色

const object = new THREE.Mesh(geometry, material);
scene.add(object);

3. **事件监听**: 添加事件监听让用户选择物体。你可以使用raycasting（射线投射）技术检测鼠标点击，然后找到被点击的对象。

function onPointerMove(event) {
    const raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(event.clientX, event.clientY, camera);
    const intersects = raycaster.intersectObjects(scene.children);
    
    if (intersects.length > 0) {
        console.log('Clicked on:', intersects.object);
    }
}

window.addEventListener('mousemove', onPointerMove);

**相关问题--:**
1. 怎么让three.js的物体响应鼠标点击？
2. 如何在three.js中实现自定义的第一人称摄像机控制器？
3. 如何改进这个例子以支持触摸设备？