feat(troika-3d): expose some new props for scene background and color…

… management

New props exposed:
- background -> scene.background
- environment -> scene.environment (default envMap)
- outputEncoding -> renderer.outputEncoding
- toneMapping -> renderer.toneMapping

packages/troika-3d/src/facade/Scene3DFacade.js

@@ -26,6 +26,13 @@ class Scene3DFacade extends Object3DFacade {
     super(parent, scene)
   }
 
+  afterUpdate () {
+    let scene = this.threeObject
+    scene.background = this.background || null
+    scene.environment = this.environment || null
+    super.afterUpdate()
+  }
+
   describeChildren() {
     // Add root instancing manager
     let children = {

packages/troika-3d/src/facade/World3DFacade.js

@@ -1,5 +1,5 @@
 import { WorldBaseFacade, utils } from 'troika-core'
-import {WebGLRenderer, Raycaster, Color, Vector2, Vector3} from 'three'
+import { WebGLRenderer, Raycaster, Color, Vector2, Vector3, LinearEncoding, NoToneMapping } from 'three'
 import Scene3DFacade from './Scene3DFacade.js'
 import {PerspectiveCamera3DFacade} from './Camera3DFacade.js'
 import {BoundingSphereOctree} from '../BoundingSphereOctree.js'
@@ -49,10 +49,13 @@ class World3DFacade extends WorldBaseFacade {
     }
 
     if (backgroundColor !== this._bgColor) {
-      this._threeRenderer.setClearColor(new Color(backgroundColor || 0), backgroundColor != null ? 1 : 0)
+      renderer.setClearColor(new Color(backgroundColor || 0), backgroundColor != null ? 1 : 0)
       this._bgColor = backgroundColor
     }
 
+    renderer.outputEncoding = this.outputEncoding || LinearEncoding
+    renderer.toneMapping = this.toneMapping || NoToneMapping
+
     // Update render canvas size
     this._updateDrawingBufferSize(width, height, this.pixelRatio || window.devicePixelRatio || 1)
 
@@ -90,6 +93,8 @@ class World3DFacade extends WorldBaseFacade {
       lights: this.lights,
       objects: this.objects,
       fog: this.fog,
+      background: this.background,
+      environment: this.environment,
       onClick: this.onBackgroundClick ? this._onBgClick : null
     }
   }

packages/troika-3d/src/react/Canvas3D.js

@@ -28,6 +28,10 @@ class Canvas3D extends ReactCanvasBase {
             antialias: props.antialias,
             rendererClass: props.rendererClass,
             backgroundColor: props.backgroundColor,
+            background: props.background,
+            environment: props.environment,
+            outputEncoding: props.outputEncoding,
+            toneMapping: props.toneMapping,
             shadows: props.shadows,
             camera: props.camera,
             lights: props.lights,
@@ -49,6 +53,10 @@ Canvas3D.displayName = 'Canvas3D'
 Canvas3D.propTypes = utils.assignIf(
   {
     backgroundColor: T.any,
+    background: T.any,
+    environment: T.any,
+    outputEncoding: T.number,
+    toneMapping: T.number,
     lights: T.array,
     camera: T.object,
     objects: T.oneOfType([T.array, T.object]).isRequired,