Jak przeglądać graf sceny 3D w TypeScript

Graf scen w Aspose.3D FOSS dla TypeScript jest drzewem obiektów Node, którego korzeniem jest scene.rootNode. Przeglądanie jest rekurencyjne: każdy węzeł udostępnia iterowalny childNodes oraz opcjonalną właściwość entity. Ten przewodnik pokazuje, jak przejść całe drzewo, zidentyfikować typy encji i zebrać statystyki siatek.

Wymagania wstępne

• Node.js 18 lub nowszy
• TypeScript 5.0 lub nowszy
• @aspose/3d zainstalowany

Przewodnik krok po kroku

npm install @aspose/3d

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>

Wskazówki i najlepsze praktyki

• Zawsze sprawdzaj null node.entity przed dostępem do właściwości specyficznych dla encji. Wiele węzłów to czyste węzły grupowe, które nie zawierają encji.
• Używaj instanceof zamiast constructor.name przy sprawdzaniu typów w ścieżkach logiki. instanceof jest bezpieczny przy refaktoryzacji; porównywanie łańcuchów na constructor.name psuje się po minifikacji.
• Przechodź przez for...of zamiast childNodes: iterowalny obiekt obsługuje wszystkie rozmiary tablic bezpiecznie. Unikaj indeksowania numerycznego dla przyszłej kompatybilności.
• Unikaj mutacji drzewa podczas przechodzenia: nie dodawaj ani nie usuwaj węzłów wewnątrz wywołania rekurencyjnego. Najpierw zbierz wyniki, a potem modyfikuj.
• Przekazuj tablicę wyników jako parametr: to unika alokacji nowej tablicy przy każdym wywołaniu rekurencyjnym i ułatwia scalanie wyników poddrzewa.

Typowe problemy

Najczęściej zadawane pytania

Czy scene.rootNode sam posiada encję?
Nie. Węzeł główny jest kontenerem tworzonym automatycznie przez bibliotekę. Nie posiada encji. Twoja geometria i inne obiekty sceny znajdują się w węzłach potomnych jeden lub kilka poziomów poniżej rootNode.

Jaka jest różnica między node.entity a node.entities?
node.entity przechowuje pojedynczy podmiot główny (typowy przypadek). Niektóre starsze pliki FBX i COLLADA mogą generować węzły z wieloma podłączonymi podmiotami; w takim przypadku node.entities (liczba mnoga) zapewnia pełną listę.

Czy mogę przeglądać w kolejności wszerz zamiast wgłąb?
Tak. Użyj kolejki zamiast wywołania rekurencyjnego: wstaw scene.rootNode do tablicy, a następnie przesuń i przetwarzaj węzły, jednocześnie wstawiając childNodes każdego węzła do ogona kolejki.

Czy scene.open() jest synchroniczne?
Tak. scene.open() i scene.openFromBuffer() blokują wątek wywołujący, dopóki plik nie zostanie w pełni przetworzony. Umieść je w wątku roboczym, jeśli musisz utrzymać responsywność pętli zdarzeń.

Jak uzyskać pozycje w przestrzeni świata z węzła? Odczytaj node.globalTransform; zwraca ona macierz w przestrzeni świata w trybie tylko do odczytu GlobalTransform, złożoną ze wszystkich transformacji przodków. Aby wykonać explicite obliczenia macierzy, wywołaj node.evaluateGlobalTransform(false).

Jakie typy encji są możliwe oprócz Mesh?
Camera, Light oraz własne encje szkieletu/kości. Sprawdź node.entity.constructor.name lub użyj instanceof z konkretną klasą zaimportowaną z @aspose/3d.

Zobacz także

• Jak ładować modele 3D w TypeScript
• Jak programowo zbudować siatkę 3D w TypeScript
• Przewodnik programisty: Graf sceny
• npm: @aspose/3d