|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<title>GPU Detector</title> |
|
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> |
|
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/libs/stats.min.js"></script> |
|
<style> |
|
#stats { position: absolute; top: 0; left: 0; } |
|
</style> |
|
</head> |
|
<body> |
|
<a-scene> |
|
<a-assets> |
|
<img id="skyTexture" src="https://cdn.aframe.io/a-painter/images/sky.jpg"> |
|
</a-assets> |
|
<a-sky src="#skyTexture"></a-sky> |
|
<a-entity position="0 1.8 4"> |
|
<a-camera></a-camera> |
|
</a-entity> |
|
</a-scene> |
|
<div id="stats"></div> |
|
<script> |
|
var stats = new Stats(); |
|
stats.showPanel(0); |
|
document.getElementById('stats').appendChild(stats.dom); |
|
var renderer = document.querySelector('a-scene').renderer; |
|
var rendererStats = new THREEx.RendererStats(); |
|
rendererStats.domElement.style.position = 'absolute'; |
|
rendererStats.domElement.style.left = '0px'; |
|
rendererStats.domElement.style.bottom = '0px'; |
|
document.body.appendChild(rendererStats.domElement); |
|
function animate() { |
|
stats.begin(); |
|
rendererStats.update(renderer); |
|
stats.end(); |
|
requestAnimationFrame(animate); |
|
} |
|
requestAnimationFrame(animate); |
|
console.log(rendererStats); |
|
</script> |
|
</body> |
|
</html> |
|
|
