three.js VR场景

在 three.js 中创建 VR 场景可以通过 WebVR API 来实现，具体步骤如下：

1. 创建场景、相机、渲染器等 three.js 常规组件。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });

2. 创建 WebVRManager 对象，并将渲染器和相机作为参数传入。

const vrManager = new WebVRManager(renderer, camera);

3. 创建 VR 控制器，可以使用 `THREE.VRControls` 或 `THREE.PointerLockControls` 等控制器。

const vrControls = new THREE.VRControls(camera);

4. 创建 VR UI 元素，例如 VR 按钮，可以使用 `THREE.VRButton` 类。

document.body.appendChild(THREE.VRButton.createButton(renderer));

5. 在渲染循环中，更新 VR 控制器和 VR 管理器。

function animate() {
  renderer.setAnimationLoop(animate);
  vrControls.update();
  vrManager.render(scene, camera);
}

6. 启用 VR 模式，使用 `vrManager.enterVR()` 方法进入 VR 模式。

button.onclick = () => {
  vrManager.enterVR();
};

需要注意的是，创建 VR 场景需要浏览器支持 WebVR API，需要在支持 WebVR 的浏览器中运行才能看到 VR 效果。另外，为了实现更好的 VR 效果，可以使用 VR 标准的 VR 设备，例如 Oculus Rift、HTC Vive 等。