Transform a React VR CLI project into an OVRUI project.
To get started npm install -g react-vr-cli for the React VR CLI to make new projects.
Then react-vr init PROJECT_NAME to create a project directory with all of the React VR code.
From here you can copy the below files into the root and they will automatically reference the node_modules versions of THREE and OVRUI.
| html { | |
| user-select: none; | |
| } | |
| body { | |
| margin: 0; | |
| overflow: hidden; | |
| } |
| function initScene(player, scene, guiSys) { | |
| // Initial Scene setup, we build a single UX panel | |
| let helloUIView = new OVRUI.UIView(guiSys); | |
| helloUIView.setFrame(0, 0, 2, 1); | |
| helloUIView.setLocalPosition([-1, 1, -3]); | |
| helloUIView.setIsInteractable(false); | |
| helloUIView.setText("Hello"); | |
| guiSys.add(helloUIView); | |
| return function () { | |
| // Per frame work | |
| }; | |
| } | |
| // If we are running in Chrome use some defaults that are closer to our projection | |
| // in the Gear VR. This helps us understand where we have wasted pixels and also | |
| // how many actual pixels we are working with. | |
| // Turn off anti-aliasing and make content work well by tweaking textures and geometry. | |
| // This saves a lot of resources on your average mobile platform. | |
| let ovrPlayerOptions = { | |
| antialias: false | |
| }; | |
| if (/vrmono\=1/.test(location.search) || window.VRDisplay === undefined) { | |
| // Set up a single eye buffer. These are the recommended sizes for a single eye on Gear VR | |
| const playerWidth = 1024; | |
| const playerHeight = 1024; | |
| // Tell the player to use these sizes. Note, if you resize your window, these sometimes get | |
| // reset. This is a known issue in the OVRUI.Player that will likely be fixed in a future release. | |
| ovrPlayerOptions.width = playerWidth; | |
| ovrPlayerOptions.height = playerHeight; | |
| // We have to create our own camera otherwise the player will make one that doesn't match our specs. | |
| // We want 90 degree FOV for the Gear VR | |
| const gearFov = 90; | |
| // We want an aspect ratio of 1:1 to match our player width and height | |
| const aspectRatio = playerWidth / playerHeight; | |
| // To match the WebVR specification defaults we use spec values for depthNear and depthFar | |
| const depthNear = 0.01; | |
| const depthFar = 10000.0; | |
| // Configure the camera and pass it in through player options. | |
| ovrPlayerOptions.camera = new THREE.PerspectiveCamera(gearFov, aspectRatio, depthNear, depthFar); | |
| // This is a trick to enable the "left eye" specific layer in THREE.js in case we want to use | |
| // stereo images for the environment. | |
| ovrPlayerOptions.camera.layers.enable(1); | |
| } | |
| var player = new OVRUI.Player(ovrPlayerOptions); | |
| // Our THREE.js scene is our basis for holding the OVRUI GUI. For the GUI | |
| // we configure an auto-hiding cursor which is user friendly. | |
| var scene = new THREE.Scene(); | |
| var guiSys = new OVRUI.GuiSys(scene, { | |
| cursorEnabled: true, | |
| cursorAutoHide: true, | |
| }); | |
| // Initialize the scene and retrieve the frame animation function. | |
| var frame = initScene(player, scene, guiSys); | |
| var render = function() { | |
| player.requestAnimationFrame(render); | |
| // We have to advance our input frame for the | |
| player.frame(); | |
| // Passing a glRenderer enables mouse events to work when on a desktop browser. | |
| guiSys.frame(player.camera, player.glRenderer); | |
| // This is our frame advance function where we can do animations. | |
| frame(); | |
| // Have the player render the current scene state. | |
| player.render(scene); | |
| }; | |
| player.requestAnimationFrame(render); |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>OVRUI Bootstrap</title> | |
| <!-- Three.js is the baseline WebGL run-time for the rest of the system --> | |
| <script src="node_modules\three\build\three.js"></script> | |
| <!-- OVRUI.js is the Oculus branded player and deals with input handling and our view system --> | |
| <script src="node_modules\ovrui\dist\ovrui.js"></script> | |
| <!-- Fix up the viewport for panning --> | |
| <link rel="stylesheet" type="text/css" href="default.css" /> | |
| </head> | |
| <body> | |
| <!-- Provides initialization code for kick starting the Player in OVRUI.js --> | |
| <script src="experience.js"></script> | |
| </body> | |
| </html> |