Reset Camera Modifier 3D

Zooming and Panning a Chart in SciChart.js is achieved by moving the SciChart3DSurface.camera to a new location.

The article "The SciChart3DSurface Camera" goes into detail how this camera class works and how to manipulate it programatically to achieve various views.

If you add any zooming or panning to the chart you might want to reset the viewport to it's original state. You can do this with the ResetCamera3DModifier.

How this modifier works:

When the ResetCamera3DModifier is attached to the chart, it saves the current camera state.
An optional destination object of type TCameraState may be set to override this state.
When you double click on the chart, the ResetCamera3DModifier animates the camera position to the initial camera state.

Declaring an ResetCameraModifier3D

Declaring a ResetCamera3DModifier is as simple as adding one to the SciChart3DSurface.chartModifiers property. This can be done as a single modifier, or as part of a group.

Javascript

const { ResetCamera3DModifier } = SciChart;

// or for npm: import { ResetCameraModifier3D } from "scichart"

sciChart3DSurface.chartModifiers.add(
  new ResetCamera3DModifier ({
    // Optional properties. If these are not set,
    // the ResetCameraModifier3D grabs initial state from the SciChart3DSurface.camera
    isAnimated: true,
    animationDuration: 2000,
    // Camera will animate to this position on double click (or initial position if not set)
    destination: {
      radius: 450,
      pitch: 30,
      yaw: 45,
    }
  }),
);

This results in the following behaviour added to the chart.

<div class="wrapper">
    <div id="scichart-root" ></div>
    <div class="titleWrapper">
        <p class="title">SciChart.js 3D Chart Example</p>
        <p class="subTitle">Double Click the chart to reset Camera State</p>
    </div>
    <div id="debug-camera">
        <!-- Debug output from camera will be put here -->
    </div>
</div>

body { margin: 0; font-family: Arial; }
.wrapper { width: 100%; height: 100vh; position: relative; }
#scichart-root { width: 100%; height: 100%; position: relative; }
.titleWrapper { position: absolute; width: 100%; top: 35%; text-align: center; pointer-events: none; color: #ffffff77 }
.title { font-size: 20px; }
.subTitle {  font-size: 16px; }
#debug-camera { pointer-events: none; position: absolute; left: 10px; top: 10px; color: #FFFFFF; background: #00000077; padding: 10px; font-size: 13px }

async function resetCameraModifier3D(divElementId) {
  const {
    SciChart3DSurface,
    NumericAxis3D,
    Vector3,
    SciChartJsNavyTheme,
  } = SciChart;

  // or, for npm, import { SciChart3DSurface, ... } from "scichart"

  // Create a SciChart3DSurface in the host <div id=".." />
  const { wasmContext, sciChart3DSurface } = await SciChart3DSurface.create(divElementId, {
    // Optional theme
    theme: new SciChartJsNavyTheme(),
    // Optional dimensions of the axis cube (X,Y,Z) in World coordinates
    worldDimensions: new Vector3(300, 200, 300),
    // Optional initial camera position and target
    cameraOptions: {
      position: new Vector3(-650, 700, 200),
      target: new Vector3(0, 50, 0),
    }
  });

  // SciChart.js 3D supports only a single x,y,z axis. Declare your axis like this
  sciChart3DSurface.xAxis = new NumericAxis3D(wasmContext, { axisTitle: "X Axis" });
  sciChart3DSurface.yAxis = new NumericAxis3D(wasmContext, { axisTitle: "Y Axis" })
  sciChart3DSurface.zAxis = new NumericAxis3D(wasmContext, { axisTitle: "Z Axis" });

  const camera = sciChart3DSurface.camera;

  // propertyChanged is raised each time any property changes on the camera
  camera.propertyChanged.subscribe((args) => {
    // Log current properties to console. debugOutput returns array of strings
    const cameraDebug = camera.debugOutput();

    // Output the same information to a div on the page
    document.getElementById("debug-camera").innerHTML = cameraDebug.map(line => `<p>${line}</p>`).join("");
  });
  camera.target = new Vector3(0, 60, 0);

  // #region ExampleA
  const { ResetCamera3DModifier } = SciChart;

  // or for npm: import { ResetCameraModifier3D } from "scichart"

  sciChart3DSurface.chartModifiers.add(
    new ResetCamera3DModifier ({
      // Optional properties. If these are not set,
      // the ResetCameraModifier3D grabs initial state from the SciChart3DSurface.camera
      isAnimated: true,
      animationDuration: 2000,
      // Camera will animate to this position on double click (or initial position if not set)
      destination: {
        radius: 450,
        pitch: 30,
        yaw: 45,
      }
    }),
  );
  // #endregion
};

resetCameraModifier3D("scichart-root");