DigiTec/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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.

  
## default.css
html {
    user-select: none;
}
body {
    margin: 0;
    overflow: hidden;
}

## experience.js
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);

## ovrui_bootstrap.html
<!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>
	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>