Como fazer um gráfico de cena 3D no TypeScript

O gráfico de cena em Aspose.3D FOSS para TypeScript é uma árvore de Node Objetos que se enraizam em scene.rootNode.A travessal é recursiva: cada nodo expõe um childNodes Impressão e opcional entity Este guia mostra como andar a toda a árvore, identificar tipos de entidades e recolher estatísticas de mesh.

Precondições

• Node.js 18 ou mais tarde
• Tipo de texto 5.0 ou posterior
• @aspose/3d Instalado

Guia passo a passo

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>

Dicas e Melhores Práticas

• Sempre com zero check node.entity Antes de acessar propriedades específicas da entidade. muitos nodos são nodas puros de grupo que não transportam uma entidade .
• Usando instanceof Sobre o constructor.name para os tipos de verificação em caminhos lógicos. instanceof é refactor-seguro; corrente comparativa em constructor.name A partir da minificação.
• Passando por via for...of Sobre o childNodes: o iterável gerencia todos os tamanhos de array com segurança. Evite indicação numérica para compatibilidade à frente.
• Evite mover a árvore durante o cruzeiro:Não adicione ou remova nódulos dentro da chamada recursiva. recolha os resultados primeiro, depois modifique.
• Passar um resultado como parâmetro:Isso evita a atribuição de uma nova linha em cada chamada recursiva e torna fácil combinar resultados subterrâneos.

Problemas comuns

Perguntas frequentes

O que faz scene.rootNode Você tem uma entidade? No. O nodo de raiz é um recipiente criado automaticamente pela biblioteca. não tem entidade. sua geometria e outros objetos da cena vivem em uma ou mais níveis abaixo dos nodos infantis. rootNode.

Qual a diferença entre node.entity e node.entities? node.entity Alguns arquivos FBX e COLLADA mais antigos podem produzir nódulos com várias entidades anexadas; neste caso, node.entities (plural) fornece a lista completa.

Posso atravessar em ordem de largura-primeiro, em vez de profundidade-primente? Use uma quebra em vez de um chamado recursivo: pressione scene.rootNode em um array, então mude e processar nódulos enquanto pressionando cada nodo de childNodes para o queue tail.

É scene.open() E sim sincronizado? Sim sim. scene.open() e scene.openFromBuffer() ambos bloquear o fio de chamada até que o arquivo seja completamente parsed. Enrolá-los em um fijo de trabalhadores se você precisar manter o loop do evento respondiço.

Como posso obter posições espaciais mundiais de um nodo? Leia node.globalTransform;Ele retorna um leitor-somente GlobalTransform com a matriz do espaço-mundo, composto de todas as transformações ancestrais. para matemática explicita, chama node.evaluateGlobalTransform(false).

Quais tipos de entidades são possíveis além Mesh? Camera, Light, e as entidades esqueleto/bone personalizadas. verificar node.entity.constructor.name ou usar instanceof com a classe específica importada de @aspose/3d.

Veja também

• Como fazer o download de modelos 3D no TypeScript
• Como criar uma placa 3D com um programa em TypeScript
• Guia de Desenvolvimento: Scene Graph
• NPM: @aspose / 3d