Wie man ein 3D-Mesh in TypeScript programmiert erstellt

Schritt 1: Installieren @aspose/3d

asposefoss/3d is not yet published — build from source until it ships. See the project README for build instructions.

Das Paket enthält auch Typ-Definitionen.

Mindestbetrag tsconfig.json:

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

Schritt 2: Erstellen einer Szene und eines Knotenpunkts

A) Die Scene Die Geometrie muss an einem Node Innerhalb des Szenenbaumes:

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

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

createChildNode(name) erstellt einen benannten Knoten und verlegt ihn als Kind des aktuellen Knotes. Die zurückgegebene Node Objekt ist, wo Sie das Netz in Schritt 7 befestigen.

Schritt 3: Erstellen eines Mesh-Objekts

Mesh Konstruieren Sie eine mit einem optionalen Namen:

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

const mesh = new Mesh('triangle');

Das Netz beginnt leer: keine Spitzen und keine Gesichter. Sie fügen sie in den nächsten Schritten hinzu.

Schritt 4: Steuerelemente (Werte) hinzufügen

Die Kontrollpunkte sind die Punktpositionen im lokalen Raum. Vector4 Werte in die mesh.controlPoints.Die vierte Komponente (w) ist 1 für Positionen:

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

Sie beziehen sich auf diese Positionen durch ihren Null-basierten Index, wenn die Definition von Polygon Gesichtern.

Schritt 5: Erstellen von Polygonen

createPolygon() definiert eine Fläche, indem die Wurzelindex in der Reihenfolge aufgeführt werden. Drei Indizes bilden ein Dreieck:

mesh.createPolygon(0, 1, 2);

Sie können auch Quads (vier Indizes) oder beliebige Polygone für Formate definieren, die diese unterstützen. Für glTF trianguliert die Bibliothek bei Export automatisch Quades und n-Gons.

Schritt 6: Hinzufügen von Vertex-Normalen

Normalen verbessern die Wiedergabequalität. mesh.createElement() Erstellung einer VertexElementNormal, normalen Vektoren in ein Array sammeln, dann rufen Sie setData() Die Veröffentlichung der data Getter gibt eine Verteidigungskopie zurück Drucken hat keine Wirkung. FVector3 (Einfachgenauigkeit) für normale Daten, nicht 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 bedeutet ein Normalpunkt pro Punkt. ReferenceMode.DIRECT bedeutet, dass das Datenarray direkt durch den Index des Polygon-Wertexts indiziert wird.

Schritt 7: Befestigen Sie das Netz und speichern Sie auf glTF

Zuweisen des Mesh an den Knoten über node.entity, dann retten Sie die Szene:

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

Die Kommission hat die .glb Datei statt, gesetzt saveOpts.binaryMode = true und die Ausgabe-Dateierweiterung in: .glb.