Angular Immediate Mesh 3D Chart
Demonstrates how to draw custom lit 3D geometry in Angular with ImmediateLitMeshContext, by emitting an aurora-like banked helix as a single triangle strip from a custom scene entity.
drawExample.ts
index.tsx
theme.ts
AuroraRibbonSceneEntity.ts
1import {
2 EMainLightMode,
3 MouseWheelZoomModifier3D,
4 NumberRange,
5 NumericAxis3D,
6 OrbitModifier3D,
7 ResetCamera3DModifier,
8 SciChart3DSurface,
9 Vector3,
10} from "scichart";
11import { appTheme } from "../../../theme";
12import { AuroraRibbonSceneEntity } from "./AuroraRibbonSceneEntity";
13
14export const drawExample = async (rootElement: string | HTMLDivElement) => {
15 const { sciChart3DSurface, wasmContext } = await SciChart3DSurface.create(rootElement, {
16 theme: appTheme.SciChartJsTheme,
17 worldDimensions: new Vector3(400, 200, 400),
18 lighting: {
19 ambientLight: 0.18,
20 lightMode: EMainLightMode.GlobalSpace,
21 lightDirection: new Vector3(-0.25, 0.5, -0.25),
22 },
23 cameraOptions: {
24 position: new Vector3(300, 300, 300),
25 target: new Vector3(0, 50, 0),
26 },
27 });
28
29 sciChart3DSurface.xAxis = new NumericAxis3D(wasmContext, { visibleRange: new NumberRange(-100, 100) });
30 sciChart3DSurface.yAxis = new NumericAxis3D(wasmContext, { visibleRange: new NumberRange(-100, 100) });
31 sciChart3DSurface.zAxis = new NumericAxis3D(wasmContext, { visibleRange: new NumberRange(-100, 100) });
32
33 // An immediate mesh is not a renderable series - it is a custom scene entity added to the root entity
34 sciChart3DSurface.rootEntity.children.add(new AuroraRibbonSceneEntity(wasmContext));
35
36 sciChart3DSurface.chartModifiers.add(
37 new MouseWheelZoomModifier3D(),
38 new OrbitModifier3D(),
39 new ResetCamera3DModifier()
40 );
41
42 return { sciChartSurface: sciChart3DSurface, wasmContext };
43};
44Immediate Mesh 3D Chart
ImmediateLitMeshContext draws custom lit geometry directly into a SciChart3DSurface scene. It is useful when no built-in 3D series can describe the shape you need: a swept path, a non-uniform tube, or application-specific geometry.
Unlike a renderable series, an immediate mesh is a custom BaseSceneEntity3D added to rootEntity.children. This example builds an aurora-like, banked helix as one triangle strip. Every emitted vertex carries a position, normal, texture coordinate and colour, so the scene light reveals the ribbon's shape while the colour shifts along its length.
How it works
- The render mode controls how SciChart joins emitted vertices. This example uses
TSR_RENDERMODE_TRIANGLESTRIP, so each pair of left and right vertices adds one ribbon segment. Other native render modes cover triangles, lines and points. setVertex3()always takes world coordinates. The ribbon is kept in data space and each vertex is mapped through the current render-pass axis calculators, so axis ranges andworldDimensionsaffect the mesh. Normals are recalculated after that conversion, because axis scaling can alter their direction.- For a fixed scene object such as a gizmo or a world-space overlay, pass world coordinates straight to
setVertex3()and skip the conversion. normal3(),texCoord2(),setVertexColor()andsetSelectionId()set the state applied to subsequently emitted vertices.setVertexColor()accepts a CSS colour string or an ARGBnumber.- Create and dispose the context inside
Render().dispose()submits the completed mesh and releases the native resources.
Orbit with the left mouse button, zoom with the mouse wheel and double-click to reset the camera.
angular Chart Examples & Demos
See Also: Charts added in v6 (2 Demos)
Angular Parallel Coordinate Plot
Create a high performance Angular Parallel Coordinate Plot with SciChart.js. Visualise multivariate data with one axis per dimension, reorder axes, highlight ranges and select records, with up to 100,000 records on screen.
Angular 3D Model Example
Load a 3D model in Angular with SciChart.js. Add the model to a SciChart3DSurface as a 3D scene entity, frame it with the camera, then orbit and zoom it. Any 3D model can be loaded.