Major Issues with SVG Rendering

[seveibar]

• Do not default to side or top views, this is a huge problem and it's driving me nuts how it's getting around. Default to the same angled view where the camera is at (5,5,5) or (10,10,10) like the regular 3d viewer
• The axis is wrong, use scene.up and camera.up to make it so the Z AXIS IS UP. We treat the Z axis as being up for PCBs (not the Y axis!!!)
• We aren't using react-three-fiber for rendering? This means none of the existing components are being used (see below, looks like we're going to rip it out)
• Do not default to isometric (orthographic)!!!! I have no idea how this is even in the codebase because it's a niche option that should NOT be a default

This is an example of a function that creates an orthographic or perspective camera depending on properties

import * as THREE from "three"

export const createCamera = (options: {
  perspective?:
    | "angled"
    | "top"
    | "front"
    | "side"
    | "isometric-angled"
    | "isometric-top"
    | "isometric-front"
    | "isometric-side"
  camera?: {
    position: {
      x: number
      y: number
      z: number
    }
    lookAt?: {
      x: number
      y: number
      z: number
    }
  }
  screenSize: {
    width: number
    height: number
  }
  zoom?: number
}): THREE.Camera => {
  if (options.perspective?.includes("isometric")) {
    const camera = new THREE.OrthographicCamera()
    // Set camera properties
    const aspect = options.screenSize.width / options.screenSize.height
    const frustumSize = 100
    const halfFrustumSize = frustumSize / 2 / (options.zoom ?? 1)

    // Set camera properties
    camera.left = -halfFrustumSize * aspect
    camera.right = halfFrustumSize * aspect
    camera.top = halfFrustumSize
    camera.bottom = -halfFrustumSize
    camera.near = -1000
    camera.far = 1000

    const position = options.camera?.position ?? { x: 0, y: 0, z: 100 }
    camera.position.set(position.x, position.y, position.z)

    const lookAt = options.camera?.lookAt ?? { x: 0, y: 0, z: 0 }
    camera.lookAt(new THREE.Vector3(lookAt.x, lookAt.y, lookAt.z))
    // Set camera up vector
    camera.up.set(0, 0, 1)
    camera.updateProjectionMatrix()

    return camera
  }

  const camera = new THREE.PerspectiveCamera()

  const position = options.camera?.position ?? { x: 10, y: 10, z: 10 }
  camera.position.set(position.x, position.y, position.z)

  const lookAt = options.camera?.lookAt ?? { x: 0, y: 0, z: 0 }
  camera.lookAt(new THREE.Vector3(lookAt.x, lookAt.y, lookAt.z))
  camera.up.set(0, 0, 1)

  camera.updateProjectionMatrix()

  return camera
}

CC @imrishabh18

[seveibar]

@DrSensor @imrishabh18 it seems like you guys are leaning towards ripping out react-three-fiber in favor of a more vanilla threejs implementation (e.g. via #149 )

This is fine by me, I'm annoyed that we even had react-three-fiber to start with but i think it mostly makes sense to rip it out since they don't have great custom renderer support.

I think if we're going so far as to rip out react-three-fiber we can also make it so the 3d-viewer isn't react-dependent at all because it's not going to be used for anything (?) except maybe tooltips which are trivial.