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