Imported "ThreeJS + WebVR" Boilerplate

static/js/vrstats.js

@@ -0,0 +1,61 @@
+export default class VRStats extends THREE.Group {
+    constructor(renderer) {
+        super();
+        this.renderer = renderer
+        const can = document.createElement('canvas')
+        can.width = 256
+        can.height = 128
+        this.canvas = can
+        const c = can.getContext('2d')
+        c.fillStyle = '#00ffff'
+        c.fillRect(0,0,can.width,can.height)
+        const ctex = new THREE.CanvasTexture(can)
+        const mesh = new THREE.Mesh(
+            new THREE.PlaneGeometry(1,0.5),
+            // new THREE.BoxGeometry(1,0.5,0.1),
+            new THREE.MeshBasicMaterial({map:ctex})
+        )
+        mesh.position.z = -3
+        mesh.position.y = 1.5
+        mesh.material.depthTest = false
+        mesh.material.depthWrite = false
+        mesh.renderOrder = 1000
+        this.add(mesh)
+        this.cmesh = mesh
+
+        this.last = 0
+        this.lastFrame = 0
+        this.customProps = {}
+    }
+
+    update(time) {
+        if(time - this.last > 300) {
+            // console.log("updating",this.rendereer.info)
+            // console.log(`stats calls:`,this.renderer.info)
+
+            const fps = ((this.renderer.info.render.frame - this.lastFrame)*1000)/(time-this.last)
+            // console.log(fps)
+
+            const c = this.canvas.getContext('2d')
+            c.fillStyle = 'white'
+            c.fillRect(0, 0, this.canvas.width, this.canvas.height)
+            c.fillStyle = 'black'
+            c.font = '16pt sans-serif'
+            c.fillText(`calls: ${this.renderer.info.render.calls}`, 3, 20)
+            c.fillText(`tris : ${this.renderer.info.render.triangles}`, 3, 40)
+            c.fillText(`fps : ${fps.toFixed(2)}`,3,60)
+            Object.keys(this.customProps).forEach((key,i) => {
+                const val = this.customProps[key]
+                c.fillText(`${key} : ${val}`,3,80+i*20)
+            })
+            this.cmesh.material.map.needsUpdate = true
+            this.last = time
+            this.lastFrame = this.renderer.info.render.frame
+        }
+    }
+
+    setProperty(name, value) {
+        this.customProps[name] = value
+    }
+
+}