Hoe een 3D-mesh programmatisch te bouwen in TypeScript

Stap 1: Installeer @aspose/3d

npm install @aspose/3d

Geen native add‑ons of systeembibliotheken zijn vereist. Het pakket bevat TypeScript‑typedefinities.

Minimum tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "strict": true
  }
}

Stap 2: Maak een Scene en Node

Een Scene is de bovenste container. Alle geometrie moet worden gekoppeld aan een Node binnen de sceneboom:

import { Scene } from '@aspose/3d';

const scene = new Scene();
const node = scene.rootNode.createChildNode('triangle');

createChildNode(name) maakt een benoemde node aan en koppelt deze als kind van de huidige node. Het geretourneerde Node‑object is waar je het mesh in Stap 7 aanhecht.

Stap 3: Maak een Mesh Object

Mesh bevat vertexposities en polygoondefinities. Construeer er één met een optionele naam:

import { Mesh } from '@aspose/3d/entities';

const mesh = new Mesh('triangle');

De mesh start leeg: geen vertices en geen faces. Je voegt ze toe in de volgende stappen.

Stap 4: Controlepunten toevoegen (Vertices)

Controlepunten zijn de vertexposities in lokale ruimte. Duw Vector4-waarden in mesh.controlPoints. Het vierde component (w) is 1 voor posities:

import { Vector4 } from '@aspose/3d/utilities';

mesh.controlPoints.push(new Vector4(0.0, 0.0, 0.0, 1.0)); // index 0
mesh.controlPoints.push(new Vector4(1.0, 0.0, 0.0, 1.0)); // index 1
mesh.controlPoints.push(new Vector4(0.5, 1.0, 0.0, 1.0)); // index 2

U verwijst naar deze posities met hun nulgebaseerde index bij het definiëren van polygonvlakken.

Stap 5: Polygonvlakken maken

createPolygon() definieert een vlak door de vertex-indexen in volgorde te vermelden. Drie indexen vormen een driehoek:

mesh.createPolygon(0, 1, 2);

U kunt ook quads (vier indexen) of willekeurige polygonen definiëren voor formaten die deze ondersteunen. Voor glTF zal de bibliotheek bij export automatisch quads en n-gons trianguleren.

Stap 6: Vertexnormals toevoegen

Normaalvectoren verbeteren de renderkwaliteit. Gebruik mesh.createElement() om een VertexElementNormal te maken, verzamel normaalvectoren in een array en roep vervolgens setData() aan om ze op te slaan. De data getter retourneert een defensieve kopie — er iets aan toevoegen heeft geen effect. Gebruik FVector3 (single-precision float) voor normaaldata, niet Vector4.

import { VertexElementNormal } from '@aspose/3d/entities';
import { VertexElementType, MappingMode, ReferenceMode } from '@aspose/3d/entities';
import { FVector3 } from '@aspose/3d/utilities';

const normals = mesh.createElement(
    VertexElementType.NORMAL,
    MappingMode.CONTROL_POINT,
    ReferenceMode.DIRECT
) as VertexElementNormal;

// Build the normal array, then call setData() — do NOT push to normals.data
normals.setData([
    new FVector3(0, 0, 1), // normal for vertex 0 (pointing +Z)
    new FVector3(0, 0, 1), // normal for vertex 1
    new FVector3(0, 0, 1), // normal for vertex 2
]);

MappingMode.CONTROL_POINT betekent één normaal per vertex. ReferenceMode.DIRECT betekent dat de gegevensarray direct wordt geïndexeerd door de polygon-vertex-index.

Stap 7: Mesh koppelen en opslaan als glTF

Wijs het mesh toe aan de node via node.entity, sla vervolgens de scène op:

import { GltfSaveOptions, GltfFormat } from '@aspose/3d/formats/gltf';

node.entity = mesh;

const saveOpts = new GltfSaveOptions();
scene.save('triangle.gltf', GltfFormat.getInstance(), saveOpts);
console.log('Triangle mesh saved to triangle.gltf');

Om in plaats daarvan een enkel zelfvoorzienend .glb-bestand te produceren, stel saveOpts.binaryMode = true in en wijzig de extensie van het uitvoerbestand naar .glb.