three.js加载VR

以下是使用Three.js加载VR的步骤：

1. 首先需要在HTML文件中引入Three.js库和WebVR Polyfill库，代码如下：

   <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.min.js"></script>
   <script src="https://cdn.bootcdn.net/ajax/libs/webvr-polyfill/0.10.3/webvr-polyfill.min.js"></script>

2. 接着，需要创建一个WebGL渲染器和一个场景，代码如下：

   var renderer = new THREE.WebGLRenderer();
   var scene = new THREE.Scene();

3. 然后，需要创建一个透视相机和一个立方体几何体，并将其添加到场景中，代码如下：

   var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
   var geometry = new THREE.BoxGeometry();
   var cube = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 0x00ff00 }));
   scene.add(cube);

4. 接下来，需要设置相机的位置和渲染器的大小，并将渲染器的DOM元素添加到页面中，代码如下：

   camera.position.z = 5;
   renderer.setSize(window.innerWidth, window.innerHeight);
   document.body.appendChild(renderer.domElement);

5. 最后，需要使用WebVR Polyfill库来启用WebVR，并在渲染循环中更新立方体的旋转角度，代码如下：

   var vrDisplay, vrControls;
   navigator.getVRDisplays().then(function (displays) {
       if (displays.length > 0) {
           vrDisplay = displays[0];
           vrControls = new THREE.VRControls(camera);
           vrDisplay.requestAnimationFrame(animate);
       }
   });

   function animate() {
       vrDisplay.requestAnimationFrame(animate);
       cube.rotation.x += 0.01;
       cube.rotation.y += 0.01;
       vrControls.update();
       renderer.render(scene, camera);
   }

运行代码后，就可以在VR设备上查看旋转的立方体了。