three.js 如何創(chuàng)建VR內(nèi)容

本指南簡要介紹了使用three.js來制作的基于Web的VR應(yīng)用程序的基本組件。

工作流程

首先，你需要將VRButton.js 包含到你的項目中。

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

VRButton.createButton()做了兩件重要的事情：首先，它創(chuàng)建了一個按鈕，指示了VR的兼容性； 此外，若用戶激活了這個按鈕，則它將開啟一個VR會話。 你所要做的唯一一件事情，便是把下面的這一行代碼加入到你的應(yīng)用程序里。

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

接下來，你需要告訴你的WebGLRenderer實例來啟用XR渲染。

renderer.xr.enabled = true;

最后，你需要調(diào)整你的動畫循環(huán)，因為在這里我們不能使用我們所熟知的 window.requestAnimationFrame()函數(shù)來更新場景。對于VR項目來說，我們使用的是setAnimationLoop。 簡短的示例代碼如下：

renderer.setAnimationLoop( function () {

	renderer.render( scene, camera );

} );

接下來的步驟

請查看官方示例中與WebVR相關(guān)的示例，了解這一工作流程的實際使用、運行情況。

WebXR / VR / ballshooter
WebXR / VR / cubes
WebXR / VR / dragging
WebXR / VR / paint
WebXR / VR / panorama_depth
WebXR / VR / panorama
WebXR / VR / rollercoaster
WebXR / VR / sandbox
WebXR / VR / sculpt
WebXR / VR / video