derickson/spectator.html

## spectator.html
<html>
  <head>
    <script src="../dist/aframe.min.js"></script>
    <script>

      AFRAME.registerComponent('spectator',{
        'schema': {
          canvas: {
            type: 'string',
            default: ''
          },
          // desired FPS of spectator dislay
          fps: {
            type: 'number',
            default: '30.0'
          }
        },
        'init': function() {
          var targetEl = document.querySelector(this.data.canvas)

          this.counter = 0;
          this.renderer = new THREE.WebGLRenderer( { antialias: true } );

          this.renderer.setPixelRatio( window.devicePixelRatio );
          this.renderer.setSize( targetEl.offsetWidth, targetEl.offsetHeight );

          // creates spectator canvas
          targetEl.appendChild(this.renderer.domElement);
        },
        'tick': function(time, timeDelta) {


          var loopFPS = 1000.0 / timeDelta;
          var hmdIsXFasterThanDesiredFPS = loopFPS / this.data.fps;
          var renderEveryNthFrame = Math.round(hmdIsXFasterThanDesiredFPS);

          if(this.counter % renderEveryNthFrame === 0){
            this.render(timeDelta);
          }
          this.counter += 1;
        },
        'render': function(){
          this.renderer.render( this.el.sceneEl.object3D , this.el.object3DMap.camera );
        }
      });

    </script>


  </head>
  <body>
    <table style="border-style:solid;">
      <tr>
        <th><h1>HMD Scene</h1></th>
        <th><h1>Spectator Camera</h1></th>
      </tr>
      <tr>
        <td style="border-style:solid;">
          <div style="height:300px; width:400px;">

            <a-scene embedded>

              <a-sphere
                position="0 1.25 -1"
                radius="1.25"
                color="#EF2D5E">
                <a-animation
                  attribute="scale"
                  duration="2000"
                  to="1.3 1.3 1.3"
                  direction="alternate"
                  repeat="indefinite">
                </a-animation>
              </a-sphere>

              <a-box
                position="-1 0.5 1"
                rotation="0 45 0"
                width="1" height="1" depth="1"
                color="#4CC3D9"></a-box>
              <a-cylinder
                position="1 0.75 1"
                radius="0.5" height="1.5"
                color="#FFC65D"></a-cylinder>

              <a-plane
                rotation="-90 0 0"
                width="4" height="4"
                color="#7BC8A4"></a-plane>

              <a-sky color="#ECECEC"></a-sky>


              <a-entity id="primaryCamera" position="0 0 3.8">
                <a-camera></a-camera>
              </a-entity>


              <a-entity id="secondaryCamera" position="2 1.8 4.8" rotation="-20 45 0">
                <a-camera spectator="canvas:#spectatorDiv;" active="false">
                </a-camera>
              </a-entity>


            </a-scene>
          </div>
        </td>
        <td style="border-style:solid;">
          <div id="spectatorDiv" style="height:300px; width:400px;">
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>
	<html>
	<head>
	<script src="../dist/aframe.min.js"></script>
	<script>

	AFRAME.registerComponent('spectator',{
	'schema': {
	canvas: {
	type: 'string',
	default: ''
	},
	// desired FPS of spectator dislay
	fps: {
	type: 'number',
	default: '30.0'
	}
	},
	'init': function() {
	var targetEl = document.querySelector(this.data.canvas)

	this.counter = 0;
	this.renderer = new THREE.WebGLRenderer( { antialias: true } );

	this.renderer.setPixelRatio( window.devicePixelRatio );
	this.renderer.setSize( targetEl.offsetWidth, targetEl.offsetHeight );

	// creates spectator canvas
	targetEl.appendChild(this.renderer.domElement);
	},
	'tick': function(time, timeDelta) {



	var loopFPS = 1000.0 / timeDelta;
	var hmdIsXFasterThanDesiredFPS = loopFPS / this.data.fps;
	var renderEveryNthFrame = Math.round(hmdIsXFasterThanDesiredFPS);

	if(this.counter % renderEveryNthFrame === 0){
	this.render(timeDelta);
	}
	this.counter += 1;
	},
	'render': function(){
	this.renderer.render( this.el.sceneEl.object3D , this.el.object3DMap.camera );
	}
	});

	</script>


	</head>
	<body>
	<table style="border-style:solid;">
	<tr>
	<th><h1>HMD Scene</h1></th>
	<th><h1>Spectator Camera</h1></th>
	</tr>
	<tr>
	<td style="border-style:solid;">
	<div style="height:300px; width:400px;">

	<a-scene embedded>

	<a-sphere
	position="0 1.25 -1"
	radius="1.25"
	color="#EF2D5E">
	<a-animation
	attribute="scale"
	duration="2000"
	to="1.3 1.3 1.3"
	direction="alternate"
	repeat="indefinite">
	</a-animation>
	</a-sphere>

	<a-box
	position="-1 0.5 1"
	rotation="0 45 0"
	width="1" height="1" depth="1"
	color="#4CC3D9"></a-box>
	<a-cylinder
	position="1 0.75 1"
	radius="0.5" height="1.5"
	color="#FFC65D"></a-cylinder>

	<a-plane
	rotation="-90 0 0"
	width="4" height="4"
	color="#7BC8A4"></a-plane>

	<a-sky color="#ECECEC"></a-sky>


	<a-entity id="primaryCamera" position="0 0 3.8">
	<a-camera></a-camera>
	</a-entity>


	<a-entity id="secondaryCamera" position="2 1.8 4.8" rotation="-20 45 0">
	<a-camera spectator="canvas:#spectatorDiv;" active="false">
	</a-camera>
	</a-entity>


	</a-scene>
	</div>
	</td>
	<td style="border-style:solid;">
	<div id="spectatorDiv" style="height:300px; width:400px;">
	</div>
	</td>
	</tr>
	</table>
	</body>
	</html>