Wie man einen 3D-Szenengraph in TypeScript durchläuft

Die Szene Grafik in Aspose.3D FOSS für TypeScript ist ein Baum von Node Objekte, die auf der scene.rootNode.Die Überfahrt ist rekursiv: Jeder Knoten zeigt eine childNodes Erweiterbar und optional entity Diese Anleitung zeigt, wie man den gesamten Baum durchläuft, Entitätstypen identifiziert und Netzstatistiken erhebt.

Voraussetzungen für die Durchführung der Maßnahmen

• Node.js 18 or later
• TypScript 5.0 oder neuer Version
• @aspose/3d installiert

Schritt für Schritte

import { Scene } from '@aspose/3d';
import { ObjLoadOptions } from '@aspose/3d/formats/obj';
import { Mesh } from '@aspose/3d/entities';

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

const scene = new Scene();
scene.open('model.obj', new ObjLoadOptions());

console.log(`Root node: "${scene.rootNode.name}"`);
console.log(`Top-level children: ${scene.rootNode.childNodes.length}`);

function traverse(node: any, depth = 0): void {
    const indent = '  '.repeat(depth);
    const entityType = node.entity ? node.entity.constructor.name : '-';
    console.log(`${indent}[${entityType}] ${node.name}`);
    for (const child of node.childNodes) {
        traverse(child, depth + 1);
    }
}

traverse(scene.rootNode);

[-] RootNode
  [Mesh] Cube

<div class="copy-icon group-[.copied]/copybtn:hx-hidden hx-pointer-events-none hx-h-4 hx-w-4"></div>
<div class="success-icon hx-hidden group-[.copied]/copybtn:hx-block hx-pointer-events-none hx-h-4 hx-w-4"></div>

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

function visitWithTypeCheck(node: any, depth = 0): void {
    const indent = '  '.repeat(depth);
    if (node.entity instanceof Mesh) {
        const mesh = node.entity as Mesh;
        console.log(`${indent}MESH "${node.name}": ${mesh.controlPoints.length} vertices`);
    } else if (node.entity) {
        console.log(`${indent}${node.entity.constructor.name} "${node.name}"`);
    } else {
        console.log(`${indent}GROUP "${node.name}"`);
    }
    for (const child of node.childNodes) {
        visitWithTypeCheck(child, depth + 1);
    }
}

visitWithTypeCheck(scene.rootNode);

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

function collectMeshes(
    node: any,
    results: Array<{ name: string; mesh: Mesh }> = []
): Array<{ name: string; mesh: Mesh }> {
    if (node.entity instanceof Mesh) {
        results.push({ name: node.name, mesh: node.entity as Mesh });
    }
    for (const child of node.childNodes) {
        collectMeshes(child, results);
    }
    return results;
}

const meshNodes = collectMeshes(scene.rootNode);
console.log(`Found ${meshNodes.length} mesh node(s)`);

import { Scene } from '@aspose/3d';
import { ObjLoadOptions } from '@aspose/3d/formats/obj';
import { Mesh } from '@aspose/3d/entities';

function collectMeshes(node: any, results: Array<{name: string, mesh: Mesh}> = []) {
    if (node.entity instanceof Mesh) {
        results.push({ name: node.name, mesh: node.entity as Mesh });
    }
    for (const child of node.childNodes) {
        collectMeshes(child, results);
    }
    return results;
}

const scene = new Scene();
scene.open('model.obj', new ObjLoadOptions());

const meshes = collectMeshes(scene.rootNode);
for (const { name, mesh } of meshes) {
    console.log(`${name}: ${mesh.controlPoints.length} vertices, ${mesh.polygonCount} polygons`);
}

Cube: 8 vertices, 6 polygons
Sphere: 482 vertices, 480 polygons

<div class="copy-icon group-[.copied]/copybtn:hx-hidden hx-pointer-events-none hx-h-4 hx-w-4"></div>
<div class="success-icon hx-hidden group-[.copied]/copybtn:hx-block hx-pointer-events-none hx-h-4 hx-w-4"></div>

Tipps und beste Praktiken

• Immer null-check node.entity Viele Knoten sind reine Gruppenknoten, die keine Entität tragen.
• Verwendung instanceof Überholt constructor.name für Typprüfungen in Logikpfaden. instanceof ist refaktorsicher; Stringvergleich auf constructor.name mit der Minifizierung bricht.
• Durchschnittsweg for...of Überholt childNodes:Die Iteration erfolgt mit allen Arraygrößen. Vermeiden Sie die numerische Indexierung für eine nach vorne kompatible Lösung.
• Vermeiden Sie die Mutation des Baumes während der Durchdringung.: keine Knoten in der rekursiven Aufforderung hinzufügen oder entfernen. Sammeln Sie zuerst die Ergebnisse, dann ändern Sie sie.
• Übertragen eines Ergebnis-Arrays als Parameter: so wird vermieden, bei jedem rekursiven Aufruf ein neues Array zuzuweisen und es ist einfach, die Ergebnisse des Unterbaums zusammenzuführen.

Häufige Probleme

Häufig gestellte Fragen

Ist es so ? scene.rootNode - Sie tragen eine Entität? Nein. Der Root-Knoten ist ein Container, der automatisch von der Bibliothek erstellt wird. Er hat keine Entität. Ihre Geometrie und andere Szenobjekte leben auf Kindernoden eine oder mehrere Ebenen unterhalb. rootNode.

Was ist der Unterschied zwischen node.entity und . node.entities? node.entity enthält die einzige primäre Entität (Common Case). Einige ältere FBX- und COLLADA-Dateien können Knoten mit mehreren angeschlossenen Entitäten erzeugen; in diesem Fall node.entities (Mehrzahl) enthält die vollständige Liste.

Kann ich in der Breite-ersten Ordnung statt tiefste erste durchqueren? Ja, benutze eine Warteschlange anstelle eines rekursiven Anrufs: Drücken. scene.rootNode in eine Array, dann verschieben und Prozessknoten während jeder Knoten drücken childNodes in die Schlange.

Ist . scene.open() Synchron? - Ja, das ist gut. scene.open() und . scene.openFromBuffer() Beide blockieren den Anrufer, bis die Datei vollständig analysiert ist. Wickeln Sie sie in einen Worker-Thread ein, wenn Sie die Ereignisschleife reaktionsfähig halten müssen.

Wie bekomme ich Weltraumpositionen von einem Knoten? Lesen Sie . node.globalTransform; es gibt einen Lesebericht zurück. GlobalTransform Für explizite Matrix-Mathematik, nennen Sie die Weltraummatrix. node.evaluateGlobalTransform(false).

Welche Entitätstypen sind möglich, außer: Mesh? Camera, Light, und benutzerdefinierte Skelett-/Knochenentitäten. node.entity.constructor.name oder Verwendung instanceof mit der spezifischen Klasse, die aus: @aspose/3d.

Siehe auch:

• Wie man 3D-Modelle in TypeScript lädt
• Wie man ein 3D-Mesh in TypeScript programmiert erstellt
• Entwicklerführer: Szenengraphik
• npm: @aspose/3d (Nr. 3D)