如何基于three.js原生创建VR内容

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

let scene = new THREE.scene();
let camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
camera.position.z =5;
camera.lookAt(scene.position);
let light = new THREE.PointLight(0xffffff,1,100);
light.position.set(0,0,10);

let renderer = new THREE.WebGLRenderer();
renderer.resize(window.innerWidth,window.innerHeight);
renderer.setClearColor(0xffffff,1);
document.body.appendChild(renderer.domElement);

renderer.xr.enabled = true;
document.body.appendChild(VRButton.createButton(renderer));

let btn1 = new THREE.BoxGeometry(4,2,0.5);
let mat1 = new THREE.MeshBasicMaterial({ color : 0x00ff00 });
let mesh1 = new THREE.mesh(btn1,mat1);
scene.add(mesh1);

// let geometry = new THREE.PlaneGeometry(10,10);
// 2D
// function animate(){
//   requestAnimationFrame(animate);
//   renderer.render(scene,camera);
// }
// animate();
renderer.setAnimationLoop(function(){
  renderer.render(scene,camera);
})