adjust xr-iframe api formatting and add THREE animation loop

Author: vyrnix9582046173

_posts/development-guide/2019-09-05-xr-iframe-api.md

@@ -35,25 +35,54 @@ This page will cover how to create and manipulate reality tabs (`xr-iframe`).
 
 ## Child xr-iframe creation
 
+// Create WebGL renderer and define layers
+
 ```js
- // Create WebGL renderer and define layers
  const renderer = new THREE.WebGLRenderer({
  antialias: true,
  });
  document.body.appendChild(renderer.domElement);
  const layers = [renderer.domElement];
+```
 
-...
+Enter xr
 
- // Request WebXR session and assign session layers
+```js
+const _enterXr = async () => {
  const session = await navigator.xr.requestSession({
  exclusive: true,
  });
  session.layers = layers;
 
-...
+ session.requestAnimationFrame((timestamp, frame) => {
+ renderer.vr.setSession(session, {
+ frameOfReferenceType: 'stage',
+ });
+
+ const pose = frame.getViewerPose();
+ const viewport = session.baseLayer.getViewport(pose.views[0]);
+ const height = viewport.height;
+ const fullWidth = (() => {
+ let result = 0;
+ for (let i = 0; i < pose.views.length; i++) {
+ result += session.baseLayer.getViewport(pose.views[i]).width;
+ }
+ return result;
+ })();
+ renderer.setSize(fullWidth, height);
+ renderer.setPixelRatio(1);
+
+ renderer.setAnimationLoop(null);
 
- // Create xr-iframe, define src attribute, and push to layers
+ renderer.vr.enabled = true;
+ renderer.vr.setSession(session);
+ renderer.vr.setAnimationLoop(animate);
+ });
+};
+```
+
+Create xr-iframe, define src attribute, and push to layers
+```js
  xrIframe = document.createElement('xr-iframe');
  xrIframe.src = 'childschild.html';
  layers.push(xrIframe);