respect camera target (#1421)

* respect camera target

* make default planes scale

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/clientSideScene/sceneInfra.ts

@@ -66,6 +66,7 @@ interface ThreeCamValues {
   quaternion: Quaternion
   zoom: number
   isPerspective: boolean
+  target: Vector3
 }
 
 const lastCmdDelay = 50
@@ -123,6 +124,7 @@ const throttledUpdateEngineFov = throttle(
     quaternion: Quaternion
     zoom: number
     fov: number
+    target: Vector3
   }) => {
     const cmd: EngineCommand = {
       type: 'modeling_cmd_req',
@@ -402,12 +404,20 @@ class SceneInfra {
   }, 200)
 
   onCameraChange = () => {
-    this.camera.position.distanceTo(this.controls.target)
+    const scale = getSceneScale(this.camera, this.controls.target)
+    const planesGroup = this.scene.getObjectByName(DEFAULT_PLANES)
+    const axisGroup = this.scene
+      .getObjectByName(AXIS_GROUP)
+      ?.getObjectByName('gridHelper')
+    planesGroup && planesGroup.scale.set(scale, scale, scale)
+    axisGroup?.name === 'gridHelper' && axisGroup.scale.set(scale, scale, scale)
+
     throttledUpdateEngineCamera({
       quaternion: this.camera.quaternion,
       position: this.camera.position,
       zoom: this.camera.zoom,
       isPerspective: this.isPerspective,
+      target: this.controls.target,
     })
     this.deferReactUpdate({
       type:
@@ -733,6 +743,7 @@ class SceneInfra {
       position: newPosition,
       quaternion: this.camera.quaternion,
       zoom: this.camera.zoom,
+      target: this.controls.target,
     })
   }
   getPlaneIntersectPoint = (): {
@@ -958,21 +969,14 @@ class SceneInfra {
       type: DefaultPlane
     ): Mesh => {
       const planeGeometry = new PlaneGeometry(100, 100)
-      const planeEdges = new EdgesGeometry(planeGeometry)
-      const lineMaterial = new LineBasicMaterial({
-        color: defaultPlaneColor(type, 0.45, 1),
-        opacity: 0.9,
-      })
       const planeMaterial = new MeshBasicMaterial({
         color: defaultPlaneColor(type),
         transparent: true,
-        opacity: 0.35,
+        opacity: 0.0,
         side: DoubleSide,
         depthTest: false, // needed to avoid transparency issues
       })
       const plane = new Mesh(planeGeometry, planeMaterial)
-      const edges = new LineSegments(planeEdges, lineMaterial)
-      plane.add(edges)
       plane.rotation.x = rotation.x
       plane.rotation.y = rotation.y
       plane.rotation.z = rotation.z
@@ -980,15 +984,14 @@ class SceneInfra {
       plane.name = type
       return plane
     }
-    const gridHelper = createGridHelper({ size: 100, divisions: 10 })
     const planes = [
       addPlane({ x: 0, y: Math.PI / 2, z: 0 }, YZ_PLANE),
       addPlane({ x: 0, y: 0, z: 0 }, XY_PLANE),
       addPlane({ x: -Math.PI / 2, y: 0, z: 0 }, XZ_PLANE),
-      gridHelper,
     ]
     const planesGroup = new Group()
     planesGroup.userData.type = DEFAULT_PLANES
+    planesGroup.name = DEFAULT_PLANES
     planesGroup.add(...planes)
     planesGroup.traverse((child) => {
       if (child instanceof Mesh) {
@@ -996,6 +999,8 @@ class SceneInfra {
       }
     })
     planesGroup.layers.enable(SKETCH_LAYER)
+    const sceneScale = getSceneScale(this.camera, this.controls.target)
+    planesGroup.scale.set(sceneScale, sceneScale, sceneScale)
     this.scene.add(planesGroup)
   }
   removeDefaultPlanes() {
@@ -1030,6 +1035,7 @@ class SceneInfra {
 export const sceneInfra = new SceneInfra()
 
 function convertThreeCamValuesToEngineCam({
+  target,
   position,
   quaternion,
   zoom,
@@ -1052,7 +1058,7 @@ function convertThreeCamValuesToEngineCam({
   const upVector = new Vector3(0, 1, 0).applyEuler(euler).normalize()
   if (isPerspective) {
     return {
-      center: lookAtVector,
+      center: target,
       up: upVector,
       vantage: position,
     }