如何创建 VR 内容

本指南简要介绍如何使用 three.js 构建一个基于 Web 的 VR 应用， 以及其中最基础的组成部分。

工作流程

首先，在项目中引入 [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/webxr/VRButton.js VRButton.js]。

import { VRButton } from 'three/addons/webxr/VRButton.js';

*VRButton.createButton()* 会做两件重要的事：它会创建一个用于指示 VR 兼容性的按钮；此外，如果用户点击该按钮，它会发起 VR 会话。 你只需要在应用中添加下面这行代码。

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

接下来，需要在 `WebGLRenderer` 实例上启用 XR 渲染。

renderer.xr.enabled = true;

最后，要调整动画循环。VR 场景中不再使用常见的 *window.requestAnimationFrame()*，而是使用 `renderer.setAnimationLoop()`。 最小示例代码如下：

renderer.setAnimationLoop( function () {

  renderer.render( scene, camera );

} );

下一步

可以查看官方 WebXR 示例，了解上述流程在实际项目中的用法。

[example:webxr_xr_ballshooter WebXR / XR / ballshooter]
[example:webxr_xr_cubes WebXR / XR / cubes]
[example:webxr_xr_dragging WebXR / XR / dragging]
[example:webxr_xr_paint WebXR / XR / paint]
[example:webxr_xr_sculpt WebXR / XR / sculpt]
[example:webxr_vr_panorama_depth WebXR / VR / panorama_depth]
[example:webxr_vr_panorama WebXR / VR / panorama]
[example:webxr_vr_rollercoaster WebXR / VR / rollercoaster]
[example:webxr_vr_sandbox WebXR / VR / sandbox]
[example:webxr_vr_video WebXR / VR / video]