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

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

工作流程

首先，你需要將VRButton.js 包含到你的項(xiàng)目中。

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

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

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

接下來(lái)，你需要告訴你的WebGLRenderer實(shí)例來(lái)啟用XR渲染。

renderer.xr.enabled = true;

最后，你需要調(diào)整你的動(dòng)畫(huà)循環(huán)，因?yàn)樵谶@里我們不能使用我們所熟知的 window.requestAnimationFrame()函數(shù)來(lái)更新場(chǎng)景。對(duì)于VR項(xiàng)目來(lái)說(shuō)，我們使用的是setAnimationLoop。 簡(jiǎn)短的示例代碼如下：

renderer.setAnimationLoop( function () {

	renderer.render( scene, camera );

} );

接下來(lái)的步驟

請(qǐng)查看官方示例中與WebVR相關(guān)的示例，了解這一工作流程的實(shí)際使用、運(yù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