Skip to content

Instantly share code, notes, and snippets.

@derickson
Last active August 26, 2016 01:40
Show Gist options
  • Save derickson/334a48eb1f53f6891c59a2c137c180fa to your computer and use it in GitHub Desktop.
Save derickson/334a48eb1f53f6891c59a2c137c180fa to your computer and use it in GitHub Desktop.
A-Frame spectator camera example code
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment