TypeScript'te 3B Sahne Grafiğini Nasıl Gezinilir

TypeScript için Aspose.3D FOSS’taki sahne grafiği bir ağaçtır Node kökü scene.rootNode. Traversal özyinelemelidir: her düğüm bir childNodes iterable ve isteğe bağlı bir entity özellik. Bu kılavuz, tüm ağacı nasıl dolaşacağınızı, varlık türlerini tanımlamayı ve mesh istatistiklerini toplamayı gösterir.

Önkoşullar

• Node.js 18 veya daha yeni bir sürüm
• TypeScript 5.0 veya daha yeni bir sürüm
• @aspose/3d kuruldu

Adım Adım Kılavuz

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>

İpuçları ve En İyi Uygulamalar

• Her zaman null kontrolü yap node.entity entity-özgü özelliklere erişmeden önce. Birçok düğüm, hiçbir entity taşımayan saf grup düğümüdür.
• Kullan instanceof yerine constructor.name mantıksal yollar içinde type kontrolleri için. instanceof refactor-safe’dir; string karşılaştırması constructor.name minification ile bozulur.
• Şu yöntemle dolaş for...of üzerinde childNodes: iterable tüm dizi boyutlarını güvenli bir şekilde işler. İleri uyumluluk için sayısal indekslemeyi önleyin.
• Geçiş sırasında ağacı değiştirmekten kaçının: özyinelemeli çağrı içinde düğüm eklemeyin veya kaldırmayın. Önce sonuçları toplayın, ardından değiştirin.
• Sonuçlar dizisini bir parametre olarak geçirin: bu, her özyinelemeli çağrıda yeni bir dizi tahsis edilmesini önler ve alt ağaç sonuçlarını birleştirmeyi kolaylaştırır.

Yaygın Sorunlar

Sık Sorulan Sorular

Yapıyor mu scene.rootNode kendi içinde bir varlık taşıyor mu? Hayır. Kök düğüm, kütüphane tarafından otomatik olarak oluşturulan bir kapsayıcıdır. Bir varlığı yoktur. Geometriniz ve diğer sahne nesneleriniz, bir veya daha fazla seviye aşağıdaki alt düğümlerde bulunur. rootNode.

Arasındaki fark nedir node.entity ve node.entities? node.entity tek bir birincil varlığı tutar (yaygın durum). Bazı eski FBX ve COLLADA dosyaları, birden fazla ekli varlık içeren düğümler üretebilir; bu durumda node.entities (çoğul) tam listeyi sağlar.

Derinlik öncelikli yerine genişlik öncelikli olarak dolaşabilir miyim? Evet. Özyinelemeli çağrı yerine bir kuyruk kullanın: push scene.rootNode bir diziye, ardından shift yaparak ve düğümleri işlerken her düğümün childNodes kuyruk kuyruğunun sonuna ekleyin.

Bu scene.open() senkron mu? Evet. scene.open() ve scene.openFromBuffer() her ikisi de dosya tamamen ayrıştırılana kadar çağıran iş parçacığını engeller. Olay döngüsünün yanıt vermesini sürdürmeniz gerekiyorsa, bunları bir işçi iş parçacığında sarın.

Bir düğümden dünya uzayı konumlarını nasıl alabilirim? Oku node.globalTransform; yalnızca okuma izni döndürür GlobalTransform tüm ata dönüşümlerinden oluşan dünya-uzayı matrisiniyle. Açık matris hesaplamaları için, şu fonksiyonu çağırın node.evaluateGlobalTransform(false).

Hangi varlık türleri mümkündür, şunların dışında Mesh? Camera, Light, ve özel iskelet/kemik varlıkları. Kontrol edin node.entity.constructor.name ya da kullan instanceof belirli sınıfı şu kaynaktan içe aktararak @aspose/3d.

Ayrıca Bakınız

• How to Load 3D Models in TypeScript
• TypeScript’te Programatik Olarak 3D Mesh Nasıl Oluşturulur
• Geliştirici Kılavuzu: Sahne Grafiği
• npm: @aspose/3d