fix: WebComponent ViewCube updated to support edge and corner hotspots

 - We now merged the webgl ViewCube with the WebComponent ViewCube.

Author: phtaylor

src/Handles/ViewCube.ts

@@ -243,205 +243,23 @@ class ViewCube extends TreeItem {
     }
   }
 
-  bindToViewport(renderer: GLRenderer, viewport: GLViewport, pixelOffset = 200, screenSpaceCoord: number[] = [1, 1]) {
-    renderer.addTreeItem(this)
-    this.viewport = viewport
-    const camera = this.viewport.getCamera()
-
-    const updateXfo = () => {
-      const focalDistance = camera.focalDistanceParam.value
-      const xfo = new Xfo()
-
-      const pos = new Vec3()
-      const fov = camera.fovParam.value
-      const viewHeightPersp = Math.tan(fov * 0.5) * focalDistance
-
-      // @ts-ignore
-      const viewHeightOrth = camera.viewHeight * 0.5
-      const halfViewHeight = MathFunctions.lerp(viewHeightPersp, viewHeightOrth, camera.isOrthographicParam.value)
-
-      const width = viewport.getWidth() / window.devicePixelRatio
-      const height = viewport.getHeight() / window.devicePixelRatio
-      const aspectRatio = width / height
-      const halfViewWidth = halfViewHeight * aspectRatio
-
-      const margin = pixelOffset * (halfViewHeight / height)
-      pos.set(
-        (halfViewWidth - margin) * screenSpaceCoord[0],
-        (halfViewHeight - margin) * screenSpaceCoord[1],
-        -focalDistance
-      )
-
-      // normalize the hight so it is the same size on all screen resolutions.
-      // the 60 is just a magic number to make the view cube a nice size with a 1.0
-      // size parameter.
-      const sc = (halfViewHeight * 2.0) / (height / 50)
-
-      xfo.tr = camera.globalXfoParam.value.transformVec3(pos)
-      xfo.sc.set(sc, sc, sc)
-      this.globalXfoParam.value = xfo
-    }
-
-    updateXfo()
-    camera.on('projectionParamChanged', updateXfo)
-    camera.globalXfoParam.on('valueChanged', updateXfo)
-    viewport.on('resized', updateXfo)
-  }
-
-  // ///////////////////////////////////
-  // Mouse events
-
-  alignToVector(normal: Vec3, duration = 400) {
-    const camera = this.viewport.getCamera()
-
-    const target = camera.getTargetPosition()
-    const dist = camera.getFocalDistance()
-
-    const startXfo = camera.globalXfoParam.value
-    const startUp = startXfo.ori.getYaxis()
-    startUp.subtractInPlace(normal.scale(startUp.dot(normal)))
-
-    const endUp = new Vec3()
-    const calcUpVector = () => {
-      if (Math.abs(startUp.x) > Math.abs(startUp.y) && Math.abs(startUp.x) > Math.abs(startUp.z)) {
-        if (startUp.x > 0) endUp.x = 1
-        else endUp.x = -1
-      } else if (Math.abs(startUp.y) > Math.abs(startUp.x) && Math.abs(startUp.y) > Math.abs(startUp.z)) {
-        if (startUp.y > 0) endUp.y = 1
-        else endUp.y = -1
-      } else if (Math.abs(startUp.z) > Math.abs(startUp.x) && Math.abs(startUp.z) > Math.abs(startUp.y)) {
-        if (startUp.z > 0) endUp.z = 1
-        else endUp.z = -1
-      } else {
-        console.warn('Invalid Starting Camera Xfo')
-        endUp.z = 1
-      }
-    }
-
-    let manipulator = this.viewport.getManipulator()
-    if (manipulator instanceof ToolManager) {
-      const toolManager: ToolManager = manipulator
-      if ('CameraManipulator' in toolManager.tools) {
-        manipulator = toolManager.tools['CameraManipulator']
-      } else {
-        for (let key in toolManager.tools) {
-          if (toolManager.tools[key] instanceof CameraManipulator) {
-            manipulator = toolManager.tools[key]
-            break
-          }
-        }
-      }
-    }
-    if (manipulator instanceof CameraManipulator) {
-      if (manipulator.defaultManipulationState == CameraManipulator.MANIPULATION_MODES.turntable) {
-        if (normal.approxEqual(new Vec3(0, 0, 1)) || normal.approxEqual(new Vec3(0, 0, -1))) {
-          calcUpVector()
-        } else {
-          endUp.z = 1
-        }
-      } else {
-        calcUpVector()
-      }
-    } else {
-      calcUpVector()
-    }
-
-    // Calculate the target orientation of the camera.
-    const endOri = new Quat()
-    endOri.setFromDirectionAndUpvector(normal, endUp)
-    endOri.alignWith(startXfo.ori)
-
-    // const endOrtho = 0 //this.viewport. ? 0 : 1
-    // if (endOrtho > 0.5 && startOrtho < 0.5) {
-    //   // IF we are transitioning to an orthographic projection, we match the orthographic
-    //   // view height with the current perspective projection height at the target distance.
-    //   // This keeps the framing consistent as we change the camera.
-    //   //@ts-ignore
-    //   camera.viewHeight = Math.sin(camera.fovParam.value * 0.5) * dist * 2
-    // }
-
-    // ////////////////////////////////////////////////////
-    // Now blend the camera from the starting values to the end values.
-
-    const count = Math.round(duration / 20) // each step is 20ms
-    let id
-    let i = 1
-    const applyMovement = () => {
-      const lerpValue = MathFunctions.smoothStep(0, 1, i / count)
-
-      // interpolate the orientation between the start and the end ones.
-      const xfo = new Xfo()
-      xfo.ori = startXfo.ori.slerp(endOri, lerpValue).normalize()
-
-      // Move the camera back away from the new target using the orientation.
-      const newDir = xfo.ori.getZaxis().negate()
-      xfo.tr = target.subtract(newDir.scale(dist))
-
-      camera.globalXfoParam.setValue(xfo)
-
-      i++
-      if (i <= count) {
-        id = setTimeout(applyMovement, 20)
-      } else {
-        // This event tells the viewport to re-render the picking buffer.
-        camera.emit('movementFinished')
-      }
-    }
-    applyMovement()
-  }
-
-  /**
-   * Event fired when a pointing device button is pressed while the pointer is over the handle element.
-   *
-   * @param event - The event param.
-   */
-  onPointerDown(event: ZeaPointerEvent): void {
-    event.stopPropagation()
-  }
-
-  /**
-   * Event fired when a pointing device is moved while the cursor's hotspot is over the handle.
-   *
-   * @param event - The event param.
-   */
-  onPointerMove(event: ZeaPointerEvent): void {
-    event.stopPropagation()
+  setFaceColor(faceColor: Color, faceHighlightColor: Color): void {
+    this.normalMaterial.baseColorParam.value = faceColor
+    this.highlightedMaterial.baseColorParam.value = faceHighlightColor
   }
 
-  /**
-   * Event fired when a pointing device is moved while the cursor's hotspot is over the handle.
-   *
-   * @param event - The event param.
-   */
   onPointerEnter(event: ZeaPointerEvent): void {
     event.stopPropagation()
 
     this.highlightedGeom = event.intersectionData!.geomItem as GeomItem
     this.highlightedGeom.materialParam.value = this.highlightedMaterial
   }
 
-  /**
-   * Event fired when a pointing device is moved while the cursor's hotspot is over the handle.
-   *
-   * @param event - The event param.
-   */
   onPointerLeave(event: ZeaPointerEvent): void {
     event.stopPropagation()
 
     this.highlightedGeom.materialParam.value = this.normalMaterial
   }
-
-  /**
-   * Event fired when a pointing device button is released while the pointer is over the handle.
-   *
-   * @param event - The event param.
-   */
-  onPointerClick(event: ZeaPointerEvent): void {
-    const geomItem = event.intersectionData!.geomItem
-    const vec = geomItem.globalXfoParam.value.ori.rotateVec3(new Vec3(0, 0, 1))
-    this.alignToVector(vec)
-    event.stopPropagation()
-  }
 }
 
 export { ViewCube }

src/Handles/index.ts

@@ -6,6 +6,5 @@ export * from './ArcSlider.js'
 export * from './ScreenSpaceMovementHandle.js'
 export * from './XfoHandle'
 export * from './AxisTripod'
-export * from './ViewCube'
 
 export * from './Shaders/HandleMaterial'