Type Alias ViewerSettings

Type declaration

• axes: Partial<AxesSettings>

  Axes gizmo options

• background: { color: THREE.Color }

  Rendering background options

  • color: THREE.Color

    Color of the cavas background Default: THREE.Color('#96999f')

• camera: {
      allowedMovement: THREE.Vector3;
      allowedRotation: THREE.Vector2;
      controls: {
          moveSpeed: number;
          orbit: boolean;
          orbitSpeed: number;
          rotateSpeed: number;
          scrollSpeed: number;
      };
      far: number;
      forward: THREE.Vector3;
      fov: number;
      gizmo: {
          color: THREE.Color;
          enable: boolean;
          opacity: number;
          opacityAlways: number;
          size: number;
      };
      near: number;
      orthographic: boolean;
      zoom: number;
  }

  Three.js camera related options

  • allowedMovement: THREE.Vector3

    Vector3 of 0 or 1 to enable/disable movement along each axis Default: THREE.Vector3(1, 1, 1)

  • allowedRotation: THREE.Vector2

    Vector2 of 0 or 1 to enable/disable rotation around x or y. Default: THREE.Vector2(1, 1)

  • controls: {
        moveSpeed: number;
        orbit: boolean;
        orbitSpeed: number;
        rotateSpeed: number;
        scrollSpeed: number;
    }

    Camera controls related options

    • moveSpeed: number

      Camera movement speed factor Default: 1

    • orbit: boolean

      Set true to start in orbit mode.

      Camera has two modes: First person and orbit

      First person allows to moves the camera around freely

      Orbit rotates the camera around a focus point

      Default: true

    • orbitSpeed: number

      Camera orbit rotation speed factor. Default: 1

    • rotateSpeed: number

      Camera rotation speed factor Default: 1

    • scrollSpeed: number

      Camera movement speed factor on mouse scroll Default: 1 Range: [0.1, 10]

  • far: number

    Far clipping plane distance Default: 15000

  • forward: THREE.Vector3

    Initial forward vector of the camera THREE.Vector3(1, -1, 1)

  • fov: number

    Fov angle in degrees Default: 50

  • gizmo: {
        color: THREE.Color;
        enable: boolean;
        opacity: number;
        opacityAlways: number;
        size: number;
    }

    Camera gizmo related options

    • color: THREE.Color

      Color of camera gizmo. Default: THREE.Color(255, 255, 255)

    • enable: boolean

      Enables/Disables camera gizmo. Default: true

    • opacity: number

      Opacity of the camera gizmo. Default: 0.5

    • opacityAlways: number

      Opacity of the camera gizmo when behind objects. Default: 0.125

    • size: number

      Size of camera gizmo. Default: 0.01

  • near: number

    Near clipping plane distance Default: 0.01

  • orthographic: boolean

    Start with orthographic camera Default: false

  • zoom: number

    Camera zoom level Default: 1

• canvas: { id: string | undefined; resizeDelay: number }

  Webgl canvas related options

  • id: string | undefined

    Canvas dom model id. If none provided a new canvas will be created Default: undefined.

  • resizeDelay: number

    Limits how often canvas will be resized if window is resized in ms. Default: 200

• materials: {
      ghost: { color: THREE.Color; opacity: number };
      highlight: { color: THREE.Color; opacity: number };
      outline: {
          antialias: boolean;
          blur: number;
          color: THREE.Color;
          falloff: number;
          intensity: number;
      };
      section: {
          strokeColor: THREE.Color;
          strokeFalloff: number;
          strokeWidth: number;
      };
      standard: { color: THREE.Color };
  }

  Object highlight on click options

  • ghost: { color: THREE.Color; opacity: number }

    Ghost material options

    • color: THREE.Color

      Ghost material color Default: rgb(78, 82, 92)

    • opacity: number

      Ghost material opacity Default: 0.08

  • highlight: { color: THREE.Color; opacity: number }

    Highlight on hover options

    • color: THREE.Color

      Highlight color Default: rgb(106, 210, 255)

    • opacity: number

      Highlight opacity Default: 0.5

  • outline: {
        antialias: boolean;
        blur: number;
        color: THREE.Color;
        falloff: number;
        intensity: number;
    }

    Selection outline options

    • antialias: boolean

      Enable antialiasing for the outline. Default: false

    • blur: number

      Selection outline blur. Default: 2

    • color: THREE.Color

      Selection outline color. Default: rgb(0, 255, 255)

    • falloff: number

      Selection outline falloff. Default: 3

    • intensity: number

      Selection outline intensity. Default: 3

  • section: { strokeColor: THREE.Color; strokeFalloff: number; strokeWidth: number }

    Section box intersection highlight options

    • strokeColor: THREE.Color

      Intersection highlight stroke color. Default: rgb(246, 246, 246)

    • strokeFalloff: number

      Intersection highlight stroke falloff. Default: 0.75

    • strokeWidth: number

      Intersection highlight stroke width. Default: 0.01

  • standard: { color: THREE.Color }

    Default color of standard material

• rendering: { onDemand: boolean }

  • onDemand: boolean

    Enable on-demand rendering which wait for changes before rendering to the canvas. Default: true

• skybox: {
      enable: boolean;
      groundColor: THREE.Color;
      sharpness: number;
      skyColor: THREE.Color;
  }

  Skybox options

  • enable: boolean

    Enables/Disables skybox.

  • groundColor: THREE.Color

    Color for the lower part of the skybox.

  • sharpness: number

    Controls the gradient transition between the sky and the ground.

  • skyColor: THREE.Color

    Color for the upper part of the skybox.

• skylight: { groundColor: THREE.Color; intensity: number; skyColor: THREE.Color }

  Skylight (hemisphere light) options

  • groundColor: THREE.Color

    Skylight ground color. Default: THREE.Color(242, 213, 181)

  • intensity: number

    Skylight intensity. Default: 0.8

  • skyColor: THREE.Color

    Skylight sky Color. Default: THREE.Color(153, 204, 255)

• sunlights: {
      color: THREE.Color;
      followCamera: boolean;
      intensity: number;
      position: THREE.Vector3;
  }[]

  Sunlight (directional light) options Two Blue-Green lights at odd angles. See defaultViewerSettings.