three-cad-viewer
    Preparing search index...

    Class Viewer

    Main CAD viewer class that manages the 3D scene, rendering, and user interaction.

    The Viewer is created by Display and handles:

    • WebGL rendering with Three.js
    • Camera management (orthographic/perspective)
    • Scene graph with CAD objects (NestedGroup/ObjectGroup)
    • Clipping planes
    • Material settings
    • Animation playback
    • Object picking and selection
    1. Created by Display constructor
    2. render() called to display CAD shapes
    3. User interacts via UI (calls setter methods)
    4. clear() to remove shapes (optional)
    5. dispose() for cleanup

    All state is centralized in ViewerState. Use getter/setter methods rather than accessing state directly.

    // Access via Display
    const display = new Display(container, options);
    display.render(shapes, states, options);

    // Access viewer methods
    display.viewer.setAxes(true);
    display.viewer.switchCamera(false); // perspective
    Index

    Constructors

    constructor

    Properties

    animation bb_max bb_radius bbox bboxNeedsUpdate cadTools camera_distance clipAction clipNormal0 clipNormal1 clipNormal2 clipNormals compactNestedGroup compactTree continueAnimation display expandedNestedGroup expandedTree gridSize hasAnimationLoop info keepHighlight keymap lastBbox lastNotification lastObject lastPosition lastSelection materialSettings mixer mouse notifyCallback onAfterRender pinAsPngCallback raycaster ready renderer renderOptions shapeRenderer shapes state tree updateMarker zScale

    Accessors

    ambientLight axesHelper cadWidth camera clipping controls directLight envManager glass gridHelper height isStudioActive nestedGroup orientationMarker ortho rendered scene treeview treeWidth

    Methods

    _releaseLastSelected _removeLastSelected activateTool addPart addPositionTrack addQuaternionTrack addRotationTrack addTranslationTrack animate backupAnimation centerVisibleObjects checkChanges clear clearAnimation clearSelection collapseNodes controlAnimation dispose dumpOptions enableZebraTool ensureStencilSize enterStudioMode explode getAmbientLight getAxes getAxes0 getBlackEdges getCameraLocationSettings getCameraPosition getCameraQuaternion getCameraTarget getCameraType getCameraZoom getCanvas getClipIntersection getClipNormal getClipPlaneHelpers getClipSlider getDirectLight getEdgeColor getGrids getHolroyd getImage getMetalness getNodeColor getObjectColorCaps getOpacity getOrtho getPanSpeed getRelativeTime getResetLocation getRotateSpeed getRoughness getSelectedObjectGroup getState getStates getStudio4kEnvMaps getStudioAOIntensity getStudioBackground getStudioEnvIntensity getStudioEnvironment getStudioEnvRotation getStudioExposure getStudioShadowIntensity getStudioShadowSoftness getStudioTextureMapping getStudioToneMapping getTools getTransparent getZebraColorScheme getZebraCount getZebraDirection getZebraMappingMode getZebraOpacity getZoomSpeed glassMode handleBackendResponse handlePick handleRaycast handleRaycastEvent hasAnimation initAnimation leaveStudioMode notifyStates pick pinAsPng presetCamera quaternion recenterCamera refreshPlane removeLastBbox removePart render renderTessellatedShapes reset resetClip resetMaterial resetStudio resetZebra resize resizeCadView restoreAnimation setActiveTab setAmbientLight setAxes setAxes0 setBlackEdges setBoundingBox setCamera setCameraLocationSettings setCameraPosition setCameraQuaternion setCameraTarget setCameraZoom setClipIntersection setClipNormal setClipNormalFromPosition setClipObjectColorCaps setClipPlaneHelpers setClipSlider setDirectLight setDisplayDefaults setEdgeColor setExplode setGlass setGrid setGridCenter setGrids setHolroyd setKeyMap setLocalClipping setMetalness setObject setOpacity setOrtho setPanSpeed setPickHandler setRaycastMode setRelativeTime setRenderDefaults setResetLocation setRotateSpeed setRoughness setState setStates setStudio4kEnvMaps setStudioAOIntensity setStudioBackground setStudioEnvIntensity setStudioEnvironment setStudioEnvRotation setStudioExposure setStudioShadowIntensity setStudioShadowSoftness setStudioTextureMapping setStudioToneMapping setTheme setTools setTransparent setView setViewerDefaults setZebraColorScheme setZebraCount setZebraDirection setZebraMappingMode setZebraOpacity setZoomSpeed setZscaleValue showExplodeTool showHelp showInfo showInfoPanel showMeasureTools showPinning showSelectTool showTools showToolsPanel showZScaleTool switchCamera syncTreeStates toggleAnimationLoop toggleGroup toggleTab update updateBounds updatePart vector3 version

    Constructors

    • Create Viewer.

      Parameters

      • display: Display

        The Display object.

      • options: DisplayOptionsInternal

        configuration parameters.

      • notifyCallback: NotificationCallback | null

        The callback to receive changes of viewer parameters.

      • pinAsPngCallback: ((data: ImageResult) => void) | null = null

        Optional callback for PNG pinning.

      • updateMarker: boolean = true

        enforce to redraw orientation marker after every ui activity

      Returns Viewer

    Properties

    animation: Animation
    bb_max: number
    bb_radius: number
    bbox: BoundingBox | null
    bboxNeedsUpdate: boolean
    cadTools: Tools
    camera_distance: number
    clipAction: AnimationAction | null
    clipNormal0: Vector3Tuple | null
    clipNormal1: Vector3Tuple | null
    clipNormal2: Vector3Tuple | null
    clipNormals: [Vector3, Vector3, Vector3]
    compactNestedGroup: NestedGroup | null
    compactTree: ShapeTreeData | null
    continueAnimation: boolean
    display: Display
    expandedNestedGroup: NestedGroup | null
    expandedTree: ShapeTreeData | null
    gridSize: number
    hasAnimationLoop: boolean
    info: DisposableTree | null
    keepHighlight: boolean
    keymap: Partial<KeyMappingConfig> | null
    lastBbox: LastBboxInfo | null
    lastNotification: Record<string, unknown>
    lastObject: PickedObject | null
    lastPosition: Vector3 | null
    lastSelection: PickedObject | null
    materialSettings: MaterialSettings | null
    mixer: AnimationMixer<AnimationMixerEventMap> | null
    mouse: Vector2
    notifyCallback: NotificationCallback | null
    onAfterRender: (() => void) | null
    pinAsPngCallback: ((data: ImageResult) => void) | null
    raycaster: Raycaster | null
    ready: boolean
    renderer: WebGLRenderer
    renderOptions: RenderOptions | null
    shapeRenderer: ShapeRenderer | null
    shapes: Shapes | null
    state: ViewerState
    tree: ShapeTreeData | null
    updateMarker: boolean
    zScale: number

    Accessors

    • get ambientLight(): AmbientLight

      Get ambientLight property. Throws if not rendered.

      Returns AmbientLight

    • get axesHelper(): AxesHelper

      Get axesHelper property. Throws if not rendered.

      Returns AxesHelper

    • get clipping(): Clipping

      Get clipping property. Throws if not rendered.

      Returns Clipping

    • get directLight(): DirectionalLight

      Get directLight property. Throws if not rendered.

      Returns DirectionalLight

    • get envManager(): EnvironmentManager

      Environment manager — proxied from StudioManager for display.ts access.

      Returns EnvironmentManager

    • get gridHelper(): Grid

      Get gridHelper property. Throws if not rendered.

      Returns Grid

    • get isStudioActive(): boolean

      Returns whether Studio mode is currently active.

      Returns boolean

      True if Studio mode is active and the viewer has rendered content.

    • get nestedGroup(): NestedGroup

      Get nestedGroup property. Throws if not rendered.

      Returns NestedGroup

    • get orientationMarker(): OrientationMarker

      Get orientationMarker property. Throws if not rendered.

      Returns OrientationMarker

    • get ortho(): boolean

      Get ortho value as property (for ViewerLike interface compatibility).

      Returns boolean

    • get rendered(): RenderedState

      Get rendered state, throwing if not yet rendered.

      Returns RenderedState

    • get treeview(): TreeView | null

      Get treeview property. Returns null if not rendered.

      Returns TreeView | null

    Methods

    _releaseLastSelected

    _removeLastSelected

    • Activate or deactivate a measurement/selection tool. This is the single entry point for tool state changes - Display should call this rather than mutating state directly.

      Parameters

      • name: string

        Tool name ("distance", "properties", "select")

      • flag: boolean

        Whether to activate (true) or deactivate (false) the tool

      Returns void

    • Add a part (leaf or subtree) to the scene under an existing parent.

      For a leaf, pass a Shapes object with shape set and name as a plain name (no leading slash). The absolute path is built as parentPath + "/" + partData.name.

      For a subtree, pass a Shapes object with parts set and id as a slash-prefixed relative tree (e.g. "/shelf"). All id fields in the tree are prefixed with parentPath before rendering.

      When adding many parts in a batch, pass { skipBounds: true } to defer the expensive bounds/clipping/treeview recomputation, then call updateBounds() once after the loop.

      Parameters

      • parentPath: string

        Absolute path of the parent group (e.g. "/assembly"). Must already exist as a CompoundGroup.

      • partData: Shapes

        A Shapes object describing the part to add.

      • options: { skipBounds?: boolean } = {}

        Optional settings.

        • OptionalskipBounds?: boolean

          When true, skip bounds/clipping/treeview update and re-render. Caller must call updateBounds() afterwards.

      Returns string

      The absolute path of the added root element.

      If the viewer is not rendered, the parent doesn't exist, or the name/id already exists at that level.

    • Add a position animation track (full 3D translation).

      Parameters

      • selector: string

        path/id of group to be animated.

      • times: number[]

        array of keyframe times.

      • positions: number[][]

        array of [x, y, z] position offsets.

      Returns void

    • Add a quaternion rotation animation track.

      Parameters

      • selector: string

        path/id of group to be animated.

      • times: number[]

        array of keyframe times.

      • quaternions: number[][]

        array of [x, y, z, w] quaternion values.

      Returns void

    • Add a single-axis rotation animation track.

      Parameters

      • selector: string

        path/id of group to be animated.

      • axis: Axis

        which axis to rotate around ("x", "y", or "z").

      • times: number[]

        array of keyframe times.

      • angles: number[]

        array of rotation angles in degrees.

      Returns void

    • Add a single-axis translation animation track.

      Parameters

      • selector: string

        path/id of group to be animated.

      • axis: Axis

        which axis to translate along ("x", "y", or "z").

      • times: number[]

        array of keyframe times.

      • values: number[]

        array of translation values along the axis.

      Returns void

    • Backup animation (for switch to explode animation)

      Returns void

    • Centers the camera view on all visible objects in the scene. Calculates a bounding box that encompasses all visible ObjectGroup instances and sets the camera target to the center of that bounding box.

      Parameters

      • notify: boolean = true

        Whether to notify listeners of the camera update

      Returns void

    • Creates ChangeNotification object if new value != old value and sends change notifications via viewer.notifyCallback.

      Parameters

      • changes: Record<string, unknown>

        change information.

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Clear the current CAD view without disposing the renderer.

      Use this to remove shapes before rendering new ones. The viewer remains usable after clear().

      Returns void

    • Clear the animation object and dispose dependent objects

      Returns void

    • Collapse or expand tree nodes.

      Parameters

      • value: CollapseState

        CollapseState enum value

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Handler for the animation control

      Parameters

      • btn: string

        the pressed button as string: "play", "pause", "stop"

      Returns void

    • Remove all assets and event handlers. Call when done with the viewer.

      This disposes:

      • WebGL renderer and context
      • All Three.js objects (geometries, materials, textures)
      • Event listeners
      • CAD tools and raycaster

      After calling dispose(), the viewer instance should not be used.

      Returns void

    • Pre-size the clipping stencil region so that all future updatePart / updateBounds calls whose geometry stays within bb will never trigger an expensive rebuildStencils.

      Call this once before a series of updates when the maximum extent of the geometry is known upfront (e.g. the parameter range of a slider).

      Parameters

      • bb: BoundingBoxFlat

        The maximum bounding box that geometry will ever occupy.

      Returns void

    • Internal

      Enter Studio mode. Called by display.ts switchToTab().

      Returns Promise<void>

    • Calculate explode trajectories and initiate the animation.

      Parameters

      • duration: number = 2

        duration of animation.

      • speed: number = 1

        speed of animation.

      • multiplier: number = 2.5

        multiplier for length of trajectories.

      Returns void

    • Get intensity of ambient light.

      Returns number

      ambientLight value.

    • Get whether axes helpers are visible.

      Returns boolean

      true if axes are shown

    • Get location of axes.

      Returns boolean

      axes0 value, true means at origin (0,0,0)

    • Returns CameraLocationSettings

    • Get the current camera position.

      Returns number[]

      camera position as 3 dim array [x,y,z].

    • Get the canvas DOM element.

      Returns Element

      The canvas element

    • Get intersection mode.

      Returns boolean

      clip intersection value.

    • Get clipping plane state.

      Returns boolean

      clip plane visibility value.

    • Get clipping slider value.

      Parameters

      • index: 0 | 1 | 2

        index of the normal: 0, 1 ,2

      Returns number

      clip slider value.

    • Get intensity of direct light.

      Returns number

      directLight value.

    • Get default color of the edges.

      Returns number

      edgeColor value.

    • Get visibility of grids.

      Returns [boolean, boolean, boolean]

      grids value.

    • Get holroyd (non-tumbling) trackball mode.

      Returns boolean

      holroyd flag.

    • Get the current canvas as png data.

      Parameters

      • taskId: string

        an id to identify the screenshot

      Returns Promise<ImageResult>

      Promise resolving to task ID and data URL Note: Only the canvas will be shown, no tools and orientation marker

    • Retrieves the metalness value.

      Returns number

      The current metalness value.

    • Get the color of a node from its path

      Parameters

      • path: string

        path of the CAD object

      Returns string | null

    • Get whether the clipping caps color status

      Returns boolean

      color caps value (object color (true) or RGB (false)).

    • Get the current relative animation time (0-1).

      Returns number

      relative time between 0 and 1.

    • Get reset location value.

      Returns ResetLocation

      target, position, quaternion, zoom as object.

    • Retrieves the roughness value.

      Returns number

      The current roughness value.

    • Get the ObjectGroup and path for the currently selected object in Studio mode. Returns null if nothing is selected, Studio mode is inactive, or the selection is a CompoundGroup (assembly node) rather than a leaf object.

      Returns { object: ObjectGroup; path: string } | null

    • Get state of a treeview leaf for a path. separator can be / or |

      Parameters

      • path: string

        path of the object

      Returns VisibilityState | null

      state value in the form of [mesh, edges] = [0/1, 0/1]

    • Gets whether 4K environment maps are enabled.

      Returns boolean

      True for 4K, false for 2K.

    • Gets the current ambient occlusion intensity in Studio mode.

      Returns number

      The AO intensity value (0.5-3.0).

    • Gets the current studio environment intensity.

      Returns number

      The environment intensity (0-3).

    • Gets the current studio environment preset.

      Returns string

      The environment name ("studio", "neutral", "outdoor", "none", or custom HDR URL).

    • Gets the current environment rotation for Studio mode.

      Returns number

      The rotation in degrees (0-360).

    • Gets the current exposure value for Studio mode.

      Returns number

      The exposure value (0-3).

    • Gets the current shadow intensity in Studio mode.

      Returns number

      The shadow intensity (0-1). 0 means shadows are off.

    • Gets the current shadow softness in Studio mode.

      Returns number

      The shadow softness (0-1).

    • Get whether tools are shown/hidden.

      Returns boolean

      tools value.

    • Get transparency state of CAD objects.

      Returns boolean

      transparent value.

    • Gets the current stripe count value.

      Returns number

      The stripe count (2-50).

    • Gets the current stripe direction value.

      Returns number

      The stripe direction in degrees (0-90).

    • Gets the current stripe opacity value.

      Returns number

      The stripe opacity (0-1).

    • Enable/disable glass mode (transparent overlay UI).

      Parameters

      • flag: boolean

        whether to enable glass mode

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Handle a backend response sent by the backend The response is a JSON object sent by the Python backend through VSCode

      Parameters

      • response: BackendResponse

      Returns void

    • Handle bounding box and notifications for picked elements

      Parameters

      • path: string

        path of object

      • name: string

        name of object (id = path/name)

      • meta: boolean

        meta key pressed

      • shift: boolean

        shift key pressed

      • alt: boolean

        alt key pressed

      • point: Vector3 | null

        picked point

      • nodeType: string | null = "leaf"

        node type

      • tree: boolean = false

        whether from tree

      Returns void

    • Parameters

      • event: RaycastEvent

      Returns void

    • Initialize the animation.

      Parameters

      • duration: number

        overall duration of the animation.

      • speed: number

        speed of the animation.

      • label: string = "A"

        animation label.

      • repeat: boolean = true

        whether to repeat the animation.

      Returns void

    • Internal

      Leave Studio mode. Called by display.ts switchToTab().

      Returns void

    • Notifies the states by checking for changes and passing the states to the checkChanges method.

      Returns void

    • Find the shape that was double clicked and send notification

      Parameters

      • e: MouseEvent | PointerEvent

        a DOM PointerEvent or MouseEvent

      Returns void

    • Replace CadView with an inline png image of the canvas.

      Note: Only the canvas will be shown, no tools and orientation marker

      Returns void

    • Move the camera to one of the preset locations.

      Parameters

      • dir: CameraDirection

        can be "iso", "top", "bottom", "front", "rear", "left", "right"

      • zoom: number | null = null

        zoom value

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Parameters

      • x: number = 0
      • y: number = 0
      • z: number = 0
      • w: number = 1

      Returns Quaternion

    • Recenter camera on the bounding box center of all objects.

      Parameters

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Refresh clipping plane

      Parameters

      • index: ClipIndex

        index of the plane: 0,1,2

      • value: number

        distance on the clipping normal from the center

      Returns void

    • Remove a part (leaf or subtree) from the scene by path.

      When removing many parts in a batch, pass { skipBounds: true } to defer the expensive bounds/clipping/treeview recomputation, then call updateBounds() once after the loop.

      Parameters

      • path: string

        The absolute path of the part to remove (e.g., "/assembly/shelf_5").

      • options: { skipBounds?: boolean } = {}

        Optional settings.

        • OptionalskipBounds?: boolean

          When true, skip bounds/clipping/treeview update and re-render. Caller must call updateBounds() afterwards.

      Returns void

      If the viewer is not rendered or the path doesn't exist.

    • Render a CAD object and build the navigation tree.

      This is the main entry point for displaying CAD geometry. It:

      • Creates the Three.js scene with lights, camera, and controls
      • Tessellates and renders the shape geometry
      • Builds the navigation tree UI
      • Sets up clipping planes and helpers

      Parameters

      • shapes: Shapes

        the Shapes object representing the tessellated CAD object

      • renderOptions: RenderOptions

        the render options (edge color, opacity, etc.)

      • viewerOptions: ViewerOptions

        the viewer options (camera position, clipping, etc.)

      Returns void

    • Render the shapes of the CAD object.

      Parameters

      • exploded: boolean

        Whether to render the compact or exploded version

      • shapes: Shapes

        The Shapes object.

      Returns RenderResult

      A nested THREE.Group object and navigation tree.

    • Reset the view to the initial camera and controls settings.

      Returns void

    • Resets clip planes to default normals and slider positions. Normals reset to -X, -Y, -Z; sliders to gridSize/2; checkboxes unchecked.

      Returns void

    • Resets the material settings of the viewer to their default values. Updates the metalness, roughness, ambient light intensity, and direct light intensity based on the current material settings.

      Returns void

    • Resets zebra tool settings to defaults: count=9, opacity=1, direction=0, colorScheme=blackwhite, mappingMode=reflection.

      Returns void

    • Resize UI and renderer.

      Parameters

      • cadWidth: number

        new width of CAD View

      • treeWidth: number

        new width of navigation tree

      • height: number

        new height of CAD View

      • glass: boolean = false

        Whether to use glass mode or not

      Returns void

    • Restore animation (for switch back from explode animation)

      Returns void

    • Set the active sidebar tab.

      Parameters

      • tabName: ActiveTab

        Tab name: "tree", "clip", "material", "zebra", or "studio"

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Set the intensity of ambient light.

      Parameters

      • val: number

        the new ambient light intensity (0-4)

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Show or hide the axes helper (X/Y/Z indicators).

      Parameters

      • flag: boolean

        true to show axes, false to hide

      • notify: boolean = true

        whether to send notification to callback

      Returns void

    • Set whether grids and axes center at the origin or the object's boundary box center

      Parameters

      • flag: boolean

        whether grids and axes center at the origin (0,0,0)

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Show edges in black or the default edge color.

      Parameters

      • flag: boolean

        whether to show edges in black

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Sets the bounding box for a given ID.

      Parameters

      • id: string

        The ID of the group.

      Returns void

    • Move the camera to a given location.

      Parameters

      • relative: boolean

        flag whether the position is a relative (e.g. [1,1,1] for iso) or absolute point.

      • position: Vector3

        the camera position as THREE.Vector3

      • quaternion: Quaternion | null = null

        the camera rotation expressed by a quaternion.

      • zoom: number | null = null

        zoom value.

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Set camera position.

      Parameters

      • position: Vector3Tuple

        camera position as 3 dim Array [x,y,z].

      • relative: boolean = false

        flag whether the position is a relative (e.g. [1,1,1] for iso) or absolute point.

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Set camera rotation via quaternion.

      Parameters

      • quaternion: QuaternionTuple

        camera rotation as 4 dim quaternion array [x,y,z,w].

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Set camera target.

      Parameters

      • target: Vector3Tuple | Vector3

        camera target as THREE.Vector3 or [x, y, z] tuple.

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Set zoom value.

      Parameters

      • val: number

        float zoom value.

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Set the clipping mode to intersection mode

      Parameters

      • flag: boolean

        whether to use intersection mode

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Set the normal at index to a given normal

      Parameters

      • index: ClipIndex

        index of the normal: 0, 1 ,2

      • normal: Vector3Tuple | null

        3 dim array representing the normal

      • value: number | null = null

        value of the slider, if given

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Set the normal at index to the current viewing direction

      Parameters

      • index: ClipIndex

        index of the normal: 0, 1 ,2

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Toggle the clipping caps color between object color and RGB

      Parameters

      • flag: boolean

        whether to use intersection mode

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Show/hide clip plane helpers

      Parameters

      • flag: boolean

        whether to show clip plane helpers

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Set clipping slider value and update the clipping plane.

      Parameters

      • index: 0 | 1 | 2

        index of the normal: 0, 1 ,2

      • value: number

        value for the clipping slider

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Set the intensity of directional light.

      Parameters

      • val: number

        the new direct light intensity (0-4)

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Returns void

      Use state properties directly. Kept for backwards compatibility.

    • Set the default edge color

      Parameters

      • color: number

        edge color (0xrrggbb)

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Toggle explode mode on/off.

      Parameters

      • flag: boolean

        whether to enable or disable explode mode

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Enable or disable glass mode (overlay navigation)

      Parameters

      • flag: boolean

        whether to enable glass mode

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Show/hide grids

      Parameters

      • action: string

        one of "grid" (all grids), "grid-xy","grid-xz", "grid-yz"

      • flag: boolean

        visibility flag

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Set grid center

      Parameters

      • center: boolean

        true for centering grid at (0,0,0)

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Toggle grid visibility

      Parameters

      • grids: [boolean, boolean, boolean]

        3 dim grid visibility (xy, xz, yz)

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Set holroyd (non-tumbling) trackball mode. When false, uses standard Three.js TrackballControls behavior.

      Parameters

      • flag: boolean

        whether to enable holroyd mode.

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Set modifiers and action shortcuts for keymap

      Parameters

      • config: Keymap

        keymap e.g. {"shift": "shiftKey", "ctrl": "ctrlKey", "meta": "altKey", "axes": "a", ...}

      Returns void

    • Enable/disable local clipping

      Parameters

      • flag: boolean

        whether to enable local clipping

      Returns void

    • Sets the metalness value for the viewer and updates related properties.

      Parameters

      • value: number

        The metalness value to set (0-1).

      • notify: boolean = true

        Whether to notify about the changes.

      Returns void

    • Sets the visibility state of an object in the viewer.

      Parameters

      • path: string

        The path of the object.

      • state: number

        The visibility state (0 or 1).

      • iconNumber: number

        The icon number.

      • notify: boolean = true

        Whether to notify the changes.

      • update: boolean = true

        Whether to update the view.

      Returns void

    • Set the default opacity

      Parameters

      • opacity: number

        opacity (between 0.0 and 1.0)

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Set/unset camera's orthographic mode.

      Parameters

      • flag: boolean

        whether to set orthographic mode or not.

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Set pan speed.

      Parameters

      • val: number

        the new pan speed

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Set raycast mode

      Parameters

      • flag: boolean

        turn raycast mode on or off

      Returns void

    • Set the animation to a specific relative time (0-1). Pauses the animation at that point.

      Parameters

      • fraction: number

        relative time between 0 and 1.

      Returns void

    • Apply render options and build materialSettings object. Called by render() after state is populated with render options.

      Parameters

      • options: RenderOptions

        The provided options object for rendering.

      Returns void

    • Set reset location value.

      Parameters

      • target: Vector3Tuple

        camera target as 3 dim Array [x,y,z].

      • position: Vector3Tuple

        camera position as 3 dim Array [x,y,z].

      • quaternion: QuaternionTuple

        camera rotation as 4 dim quaternion array [x,y,z,w].

      • zoom: number

        camera zoom value.

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Set rotation speed.

      Parameters

      • val: number

        the new rotation speed.

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Sets the roughness value for the viewer and updates related components.

      Parameters

      • value: number

        The roughness value to set (0-1).

      • notify: boolean = true

        Whether to notify about the changes.

      Returns void

    • Set state of one entry of a treeview leaf given by an id

      Parameters

      • id: string

        object id

      • state: VisibilityState

        2 dim array [mesh, edges] = [0/1, 0/1]

      • _nodeType: string = "leaf"

        node type (unused)

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Sets whether 4K environment maps are used (default: 2K).

      Parameters

      • value: boolean

        True for 4K, false for 2K.

      • notify: boolean = true

        Whether to notify about the changes.

      Returns void

    • Sets the ambient occlusion intensity in Studio mode. A value of 0 disables AO; values > 0 enable it at that intensity.

      Parameters

      • value: number

        The AO intensity (0-3.0).

      • notify: boolean = true

        Whether to notify about the changes.

      Returns void

    • Sets the background mode for Studio mode.

      Parameters

      • value: StudioBackground

        The background mode ("grey", "white", "gradient", "environment", or "transparent").

      • notify: boolean = true

        Whether to notify about the changes.

      Returns void

    • Sets the studio environment intensity.

      Parameters

      • value: number

        The environment intensity (0-3).

      • notify: boolean = true

        Whether to notify about the changes.

      Returns void

    • Sets the studio environment preset.

      Parameters

      • value: string

        The environment name ("studio", "neutral", "outdoor", "none", or custom HDR URL).

      • notify: boolean = true

        Whether to notify about the changes.

      Returns void

    • Sets the environment rotation for Studio mode.

      Parameters

      • value: number

        The rotation in degrees (0-360).

      • notify: boolean = true

        Whether to notify about the changes.

      Returns void

    • Sets the exposure value for Studio mode.

      Parameters

      • value: number

        The exposure value (0-2).

      • notify: boolean = true

        Whether to notify about the changes.

      Returns void

    • Sets the shadow intensity in Studio mode. A value of 0 disables shadows; values > 0 enable them at that darkness.

      Parameters

      • value: number

        The shadow intensity (0-1).

      • notify: boolean = true

        Whether to notify about the changes.

      Returns void

    • Sets the shadow softness in Studio mode. Controls PCSS penumbra width (virtual light source size).

      Parameters

      • value: number

        The shadow softness (0-1).

      • notify: boolean = true

        Whether to notify about the changes.

      Returns void

    • Sets the texture mapping mode for Studio mode.

      Parameters

      • value: StudioTextureMapping

        The texture mapping mode ("triplanar" or "parametric").

      • notify: boolean = true

        Whether to notify about the changes.

      Returns void

    • Sets the tone mapping mode for Studio mode.

      Parameters

      • value: StudioToneMapping

        The tone mapping mode ("neutral", "ACES", or "none").

      • notify: boolean = true

        Whether to notify about the changes.

      Returns void

    • Set the UI theme.

      Parameters

      • theme: ThemeInput

        "light", "dark", or "browser" for auto-detection

      Returns string

      The resolved theme ("light" or "dark")

    • Show or hide the CAD tools panel

      Parameters

      • flag: boolean

        whether to show tools

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Set CAD objects transparency.

      Parameters

      • flag: boolean

        whether to show the CAD object in transparent mode

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Set camera to a predefined view direction.

      Parameters

      • direction: string

        "iso", "front", "rear", "left", "right", "top", or "bottom"

      • focus: boolean = false

        whether to focus/center on visible objects

      Returns void

    • Apply view options to state. Called by render() after state is populated.

      Parameters

      Returns void

    • Sets the stripe count value for the viewer and updates related components.

      Parameters

      • value: number

        The stripe count value to set.

      Returns void

    • Sets the stripe direction value for the viewer and updates related components.

      Parameters

      • value: number

        The stripe direction value to set.

      Returns void

    • Sets the stripe opacity value for the viewer and updates related components.

      Parameters

      • value: number

        The stripe opacity value to set.

      Returns void

    • Set zoom speed.

      Parameters

      • val: number

        the new zoom speed

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Set zscaling value.

      Parameters

      • value: number

        scale factor.

      Returns void

    • Show/hide the explode tool.

      Parameters

      • flag: boolean

        whether to show the explode tool

      Returns void

    • Show/hide the help dialog.

      Parameters

      • flag: boolean

        whether to show the help dialog

      Returns void

    • Parameters

      • flag: boolean

      Returns void

      Use showInfoPanel() instead.

    • Collapse or expand the info panel in glass mode.

      Parameters

      • flag: boolean

        true to show, false to collapse

      Returns void

    • Show/hide the measure tools.

      Parameters

      • flag: boolean

        whether to show the measure tools

      Returns void

    • Show/hide the pinning button.

      Parameters

      • flag: boolean

        whether to show the pinning button

      Returns void

    • Show/hide the select tool.

      Parameters

      • flag: boolean

        whether to show the select tool

      Returns void

    • Show/hide the CAD tools

      Parameters

      • flag: boolean

        visibility flag

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Collapse or expand the tools panel (tabs + content) in glass mode.

      Parameters

      • flag: boolean

        true to show, false to collapse

      Returns void

    • Show/hide the z-scale tool.

      Parameters

      • flag: boolean

        whether to show the z-scale tool

      Returns void

    • Set camera mode to OrthographicCamera or PerspectiveCamera.

      Parameters

      • flag: boolean

        true for orthographic, false for perspective

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Synchronizes the states of two tree structures recursively.

      Parameters

      • compactTree: VisibilityState | ShapeTreeData

        The compact tree structure.

      • expandedTree: VisibilityState | ShapeTreeData

        The expanded tree structure.

      • exploded: boolean

        Whether rendering in exploded mode.

      • path: string

        The current path in the tree structure.

      Returns void

    • Toggle the two version of the NestedGroup. Must only be called after render() has completed.

      Parameters

      • expanded: boolean

        whether to render the exploded or compact version

      Returns void

    • Render scene and update orientation marker If no animation loop exists, this needs to be called manually after every camera/scene change

      Parameters

      • updateMarker: boolean

        whether to update the orientation marker

      • notify: boolean = true

        whether to send notification or not.

      Returns void

    • Recompute scene bounds, camera far plane, clipping stencils, and re-render. Call this once after a batch of addPart, removePart, or updatePart calls that used { skipBounds: true }.

      If parts were added or removed in the batch, the navigation treeview is also rebuilt automatically.

      Returns void

    • Update an existing part's geometry.

      When the mesh topology is unchanged (same number of vertices, triangles, and edge segments), buffers are updated in-place — no Three.js objects are disposed or recreated. When topology differs the method automatically falls back to a batched removePart + addPart.

      Only leaf parts (ObjectGroups with shapeGeometry) are supported. The part must already exist in the scene.

      When updating many parts in a batch, pass { skipBounds: true } to defer the expensive bounds/clipping recomputation, then call updateBounds() once after the loop:

      for (const p of parts) {
        viewer.updatePart(path, data, { skipBounds: true });
      }
      viewer.updateBounds();

      Parameters

      • path: string

        The absolute path of the part to update (e.g., "/assembly/part").

      • partData: Shapes

        A Shapes object with the new shape data. The shape.vertices, shape.normals, shape.triangles, and shape.edges fields are used to update the geometry. Optionally color, alpha, and loc are synced into this.shapes.

      • options: { skipBounds?: boolean } = {}

        Optional settings.

        • OptionalskipBounds?: boolean

          When true, skip bounds/clipping/explode-cache update and re-render. Caller must call updateBounds() afterwards.

      Returns void

      If the viewer is not rendered, the path doesn't exist, or the target is not a leaf ObjectGroup with shape geometry.

    • Parameters

      • x: number = 0
      • y: number = 0
      • z: number = 0

      Returns Vector3

    • Return three-cad-viewer version as semver string.

      Returns string

      semver version

    Settings

    Member Visibility

    On This Page

    LifecycleState Management
    Constructors
    Properties
    Accessors
    Methods
    _releaseLastSelected_removeLastSelectedactivateTooladdPartaddPositionTrackaddQuaternionTrackaddRotationTrackaddTranslationTrackanimatebackupAnimationcenterVisibleObjectscheckChangesclearclearAnimationclearSelectioncollapseNodescontrolAnimationdisposedumpOptionsenableZebraToolensureStencilSizeenterStudioModeexplodegetAmbientLightgetAxesgetAxes0getBlackEdgesgetCameraLocationSettingsgetCameraPositiongetCameraQuaterniongetCameraTargetgetCameraTypegetCameraZoomgetCanvasgetClipIntersectiongetClipNormalgetClipPlaneHelpersgetClipSlidergetDirectLightgetEdgeColorgetGridsgetHolroydgetImagegetMetalnessgetNodeColorgetObjectColorCapsgetOpacitygetOrthogetPanSpeedgetRelativeTimegetResetLocationgetRotateSpeedgetRoughnessgetSelectedObjectGroupgetStategetStatesgetStudio4kEnvMapsgetStudioAOIntensitygetStudioBackgroundgetStudioEnvIntensitygetStudioEnvironmentgetStudioEnvRotationgetStudioExposuregetStudioShadowIntensitygetStudioShadowSoftnessgetStudioTextureMappinggetStudioToneMappinggetToolsgetTransparentgetZebraColorSchemegetZebraCountgetZebraDirectiongetZebraMappingModegetZebraOpacitygetZoomSpeedglassModehandleBackendResponsehandlePickhandleRaycasthandleRaycastEventhasAnimationinitAnimationleaveStudioModenotifyStatespickpinAsPngpresetCameraquaternionrecenterCamerarefreshPlaneremoveLastBboxremovePartrenderrenderTessellatedShapesresetresetClipresetMaterialresetStudioresetZebraresizeresizeCadViewrestoreAnimationsetActiveTabsetAmbientLightsetAxessetAxes0setBlackEdgessetBoundingBoxsetCamerasetCameraLocationSettingssetCameraPositionsetCameraQuaternionsetCameraTargetsetCameraZoomsetClipIntersectionsetClipNormalsetClipNormalFromPositionsetClipObjectColorCapssetClipPlaneHelperssetClipSlidersetDirectLightsetDisplayDefaultssetEdgeColorsetExplodesetGlasssetGridsetGridCentersetGridssetHolroydsetKeyMapsetLocalClippingsetMetalnesssetObjectsetOpacitysetOrthosetPanSpeedsetPickHandlersetRaycastModesetRelativeTimesetRenderDefaultssetResetLocationsetRotateSpeedsetRoughnesssetStatesetStatessetStudio4kEnvMapssetStudioAOIntensitysetStudioBackgroundsetStudioEnvIntensitysetStudioEnvironmentsetStudioEnvRotationsetStudioExposuresetStudioShadowIntensitysetStudioShadowSoftnesssetStudioTextureMappingsetStudioToneMappingsetThemesetToolssetTransparentsetViewsetViewerDefaultssetZebraColorSchemesetZebraCountsetZebraDirectionsetZebraMappingModesetZebraOpacitysetZoomSpeedsetZscaleValueshowExplodeToolshowHelpshowInfoshowInfoPanelshowMeasureToolsshowPinningshowSelectToolshowToolsshowToolsPanelshowZScaleToolswitchCamerasyncTreeStatestoggleAnimationLooptoggleGrouptoggleTabupdateupdateBoundsupdatePartvector3version