Fix darkened camera view

The recent Three.js relies on WebGL for sRGB - Linear color
space conversion. But it does in shader for video textures
for a performance reason.

camera-tool sets isVideoTexture = true for the screen render
target texture to update the render target only when the screens
are in view as hack. But this hack causes a wrong color space
conversion and the camera views are darkened.

This commit resolves the problem by removing the hack and
rewriting it more properly.

src/components/camera-tool.js

@@ -127,9 +127,8 @@ AFRAME.registerComponent("camera-tool", {
     });
     material.toneMapped = false;
 
-    // Bit of a hack here to only update the renderTarget when the screens are in view
-    material.map.isVideoTexture = true;
-    material.map.update = () => {
+    // Only update the renderTarget when the screens are in view
+    const onBeforeRender = () => {
       if (this.showCameraViewfinder) {
         this.viewfinderInViewThisFrame = true;
       }
@@ -195,12 +194,14 @@ AFRAME.registerComponent("camera-tool", {
       this.screen = new THREE.Mesh(geometry, material);
       this.screen.rotation.set(0, Math.PI, 0);
       this.screen.position.set(0, 0, -0.042);
+      this.screen.onBeforeRender = onBeforeRender;
       this.screen.matrixNeedsUpdate = true;
       this.el.setObject3D("screen", this.screen);
 
       this.selfieScreen = new THREE.Mesh(geometry, material);
       this.selfieScreen.position.set(0, 0.4, 0);
       this.selfieScreen.scale.set(-2, 2, 2);
+      this.selfieScreen.onBeforeRender = onBeforeRender;
       this.selfieScreen.matrixNeedsUpdate = true;
       this.el.setObject3D("selfieScreen", this.selfieScreen);