Kako programatski izgraditi 3D mrežu u TypeScript‑u

Korak 1: Instalirajte @aspose/3d

npm install @aspose/3d

Nisu potrebni nativni dodaci ili sistemske biblioteke. Paket uključuje TypeScript definicije tipova.

Minimum tsconfig.json:

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

Korak 2: Kreirajte scenu i čvor

Scene је контејнер највишег нивоа.
Сва геометрија мора бити прикључена на Node унутар стабла сцене:

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

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

createChildNode(name) kreira imenovani čvor i povezuje ga kao dete trenutnog čvora. Vraćeni Node objekat je mesto gde ćete prikačiti mesh u korak 7.

Korak 3: Kreirajte Mesh objekat

Mesh sadrži pozicije vrhova i definicije poligona. Napravite jedan sa opcionim imenom:

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

const mesh = new Mesh('triangle');

Mreža počinje prazna: nema temena i nema lica. Dodajete ih u narednim koracima.

Korak 4: Dodajte kontrolne tačke (vrhove)

Kontrolne tačke su položaji vrhova u lokalnom prostoru. Ubaci Vector4 vrednosti u mesh.controlPoints. Četvrta komponenta (w) je 1 za položaje:

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

Na ove pozicije se referišete po njihovom nultom indeksu prilikom definisanja poligonskih lica.

Korak 5: Kreiraj poligonalna lica

createPolygon() definiše površ tako što navodi indekse vrhova redom. Tri indeksa čine trougao:

mesh.createPolygon(0, 1, 2);

Možete takođe definisati kvadrate (četiri indeksa) ili proizvoljne poligone za formate koji ih podržavaju. Za glTF, biblioteka će automatski triangulisati kvadrate i n‑gone prilikom izvoza.

Korak 6: Dodajte normale vrha

Normalni vektori poboljšavaju kvalitet renderovanja. Koristite mesh.createElement() da kreirate VertexElementNormal, sakupite normalne vektore u niz, zatim pozovite setData() da ih sačuvate. Getter data vraća odbrambenu kopiju — dodavanje u nju nema efekta. Koristite FVector3 (float jedne preciznosti) za normalne podatke, ne 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 znači jedan normal po vrhu. ReferenceMode.DIRECT znači da je niz podataka indeksiran direktno prema indeksu vrha poligona.

Korak 7: Prikači mrežu i sačuvaj u glTF

Dodelite mrežu čvoru putem node.entity, zatim sačuvajte scenu:

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');

Da biste umesto toga proizveli jedinstvenu samostalnu .glb datoteku, postavite saveOpts.binaryMode = true i promenite ekstenziju izlazne datoteke u .glb.