Hur man bygger ett 3D‑mesh programatiskt i TypeScript

Steg 1: Installera @aspose/3d

npm install @aspose/3d

Inga inbyggda tillägg eller systembibliotek krävs. Paketet inkluderar TypeScript-typdefinitioner.

Minimum tsconfig.json:

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

Steg 2: Skapa en Scene och Node

En Scene är den översta behållaren. All geometri måste fästas vid en Node i scenträdet:

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

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

createChildNode(name) skapar en namngiven nod och kopplar den som ett barn till den aktuella noden. Det returnerade Node‑objektet är där du kommer att fästa meshen i steg 7.

Steg 3: Skapa ett Mesh-objekt

Mesh innehåller vertexpositioner och polygondefinitioner. Skapa en med ett valfritt namn:

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

const mesh = new Mesh('triangle');

Meshen börjar tom: inga hörn och inga ytor. Du lägger till dem i nästa steg.

Steg 4: Lägg till kontrollpunkter (Vertices)

Kontrollpunkter är vertexpositionerna i lokalt utrymme. Skjut Vector4-värdena in i mesh.controlPoints. Den fjärde komponenten (w) är 1 för positioner:

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

Du refererar till dessa positioner med deras nollbaserade index när du definierar polygonytor.

Steg 5: Skapa polygonytor

createPolygon() definierar en yta genom att lista vertexindexen i ordning. Tre index bildar en triangel:

mesh.createPolygon(0, 1, 2);

Du kan också definiera fyrkanter (fyra index) eller godtyckliga polygoner för format som stödjer dem. För glTF kommer biblioteket automatiskt att triangulera fyrkanter och n‑goner vid export.

Steg 6: Lägg till vertexnormaler

Normaler förbättrar renderingskvaliteten. Använd mesh.createElement() för att skapa en VertexElementNormal, samla normalvektorer i en array och anropa sedan setData() för att lagra dem. data‑getter returnerar en defensiv kopia — att pusha till den har ingen effekt. Använd FVector3 (single-precision float) för normaldata, inte 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 betyder en normal per vertex. ReferenceMode.DIRECT betyder att dataarrayen indexeras direkt av polygonens vertex‑index.

Steg 7: Fäst Mesh och spara till glTF

Tilldela meshen till noden via node.entity, spara sedan scenen:

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

För att producera en enda självständig .glb‑fil istället, ange saveOpts.binaryMode = true och ändra filens utdata‑filändelse till .glb.