Suggestion split screen: Use same lighting setting (#702)

* Suggestion split screen: Use same lighting setting

* Draft

* Done

* Add comment

* Update snapshot

Author: martinRenou

packages/base/src/3dview/mainview.tsx

@@ -260,7 +260,8 @@ export class MainView extends React.Component<IProps, IStates> {
 
       this._scene = new THREE.Scene();
 
-      this._scene.add(new THREE.AmbientLight(0xffffff, 0.5)); // soft white light
+      this._ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // soft white light
+      this._scene.add(this._ambientLight);
 
       this._cameraLight = new THREE.PointLight(0xffffff, 1);
       this._cameraLight.decay = 0;
@@ -313,6 +314,7 @@ export class MainView extends React.Component<IProps, IStates> {
         this._onKeyDown(e);
       });
 
+      // Not enabling damping since it makes the syncing between cameraL and camera trickier
       this._controls = new OrbitControls(
         this._camera,
         this._renderer.domElement
@@ -323,8 +325,6 @@ export class MainView extends React.Component<IProps, IStates> {
         this._scene.position.y,
         this._scene.position.z
       );
-      this._controls.enableDamping = true;
-      this._controls.dampingFactor = 0.15;
 
       this._renderer.domElement.addEventListener('mousedown', e => {
         this._mouseDrag.start.set(e.clientX, e.clientY);
@@ -579,26 +579,33 @@ export class MainView extends React.Component<IProps, IStates> {
     this._renderer.setRenderTarget(null);
     this._renderer.clear();
 
-    if (this._sceneL) {
+    if (this._sceneL && this._cameraL) {
+      this._cameraL.matrixWorld.copy(this._camera.matrixWorld);
+      this._cameraL.matrixWorld.decompose(
+        this._cameraL.position,
+        this._cameraL.quaternion,
+        this._cameraL.scale
+      );
+      this._cameraL.updateProjectionMatrix();
+
       this._renderer.setScissor(
         0,
         0,
         this._sliderPos,
         this._divRef.current?.clientHeight || 0
       );
-      this._renderer.render(this._sceneL, this._camera);
+      this._renderer.render(this._sceneL, this._cameraL);
 
       this._renderer.setScissor(
         this._sliderPos,
         0,
         this._divRef.current?.clientWidth || 0,
         this._divRef.current?.clientHeight || 0
       );
-      this._renderer.render(this._scene, this._camera);
-    } else {
-      this._renderer.render(this._scene, this._camera);
     }
 
+    this._renderer.render(this._scene, this._camera);
+
     this._viewHelper.render(this._renderer);
     this.updateCameraRotation();
   };
@@ -620,6 +627,12 @@ export class MainView extends React.Component<IProps, IStates> {
         this._camera.bottom = this._divRef.current.clientHeight / -2;
       }
       this._camera.updateProjectionMatrix();
+
+      if (this._sceneL && this._cameraL) {
+        this._sceneL.remove(this._cameraL);
+        this._cameraL = this._camera.clone();
+        this._sceneL.add(this._cameraL);
+      }
     }
   };
 
@@ -1693,6 +1706,12 @@ export class MainView extends React.Component<IProps, IStates> {
     this._camera.position.copy(position);
     this._camera.up.copy(up);
 
+    if (this._sceneL && this._cameraL) {
+      this._sceneL.remove(this._cameraL);
+      this._cameraL = this._camera.clone();
+      this._sceneL.add(this._cameraL);
+    }
+
     this._transformControls.camera = this._camera;
     this._clipPlaneTransformControls.camera = this._camera;
 
@@ -1710,16 +1729,16 @@ export class MainView extends React.Component<IProps, IStates> {
       this._sliderPos = (this._divRef.current?.clientWidth ?? 0) / 2;
       this._sceneL = new THREE.Scene();
       this._sceneL.background = SPLITVIEW_BACKGROUND_COLOR;
-      this._sceneL.add(new THREE.AmbientLight(0xffffff, 0.5)); // soft white light
-      const light = new THREE.HemisphereLight(0xffffff, 0x444444, 0.5);
-      this._sceneL.add(light);
-      this._sceneL.add(this._camera);
-      this._sceneL.add(this._meshGroup.clone(true));
+      this._sceneL.add(this._ambientLight.clone()); // soft white light
+      this._cameraL = this._camera.clone();
+      this._sceneL.add(this._cameraL);
+      this._sceneL.add(this._meshGroup.clone());
       this.initSlider(true);
     } else {
       this._renderer.setScissorTest(false);
       this._sceneL?.clear();
       this._sceneL = undefined;
+      this._cameraL = undefined;
       this.initSlider(false);
     }
   }
@@ -2006,6 +2025,7 @@ export class MainView extends React.Component<IProps, IStates> {
   private _currentSelection: { [key: string]: ISelection } | null = null;
 
   private _scene: THREE.Scene; // Threejs scene
+  private _ambientLight: THREE.AmbientLight;
   private _camera: THREE.PerspectiveCamera | THREE.OrthographicCamera; // Threejs camera
   private _cameraLight: THREE.PointLight;
   private _raycaster = new THREE.Raycaster();
@@ -2032,5 +2052,9 @@ export class MainView extends React.Component<IProps, IStates> {
   private _sliderPos = 0;
   private _slideInit = false;
   private _sceneL: THREE.Scene | undefined = undefined;
+  private _cameraL:
+    | THREE.PerspectiveCamera
+    | THREE.OrthographicCamera
+    | undefined = undefined; // Threejs camera
   private _keyDownHandler: (event: KeyboardEvent) => void;
 }