NgtArgs

There are entities in THREE.js ecosystem that requires Constructor Arguments to be passed in like OrbitControls. Or there are entities that require reconstructing when Constructor Arguments changed like the Geometries.

1
let geometry = new BoxGeometry(); // [1, 1, 1] box
2
mesh.geometry = geometry;
3

4
// later when we want a bigger box
5
mesh.geometry.dispose(); // dispose old box
6
// construct new box
7
geometry = new BoxGeometry(2, 2, 2); // [2, 2, 2] box
8
mesh.geometry = geometry;

To achieve this, Angular Three provides the NgtArgs structural directive.

1
<ngt-mesh>
2
  <ngt-box-geometry *args="boxArgs" />
3
</ngt-mesh>

When boxArgs changes, NgtArgs will destroy the current BoxGeometry instance and reconstruct a new one.

NgtArgs accepts an array of Constructor Arguments that the entity accepts.

1
<ngt-box-geometry *args="[width, height, depth, widthSegments, heightSegments, depthSegments]" />
2

3
<ngt-instanced-mesh *args="[geometry, material, count]" />
4

5
<ngt-instanced-mesh *args="[undefined, undefined, count]">
6
    <ngt-box-geometry />
7
    <ngt-mesh-standard-material />
8
</ngt-instanced-mesh>
9

10
<ngt-spot-light>
11
    <ngt-vector2 *args="[2048, 2048]" attach="shadow.mapSize" />
12
</ngt-spot-light>

Please consult THREE.js documentation for details about the entities and their arguments.