尝试仅从 GLTF 文件中获取动画

Question

我想从每一种 gltfAsset 中只获取其中的动画来创建一个 animation 文件。 有人知道图书馆是否可以帮助我，或者是否有最简单的方法？

private async createAnimationAssets(props: Props, animations: Animation[]): Promise<CreateMetaAssetResponseDto[]> {
    const animationAssets = await Promise.all(
      animations.map(async (animation) => {
        return new Promise(async (resolve, reject) => {
          try {
            const asset = await this.assetRepository.create(
              new MetaBuilderAssetListItem({
                createdAt: this.dateService.now(),
                modifiedAt: this.dateService.now(),
                id: undefined,
                projectId: props.projectId,
                name: animation.name,
                type: "animation",
                exclude: false,
              })
            );
            if (!asset.id) return reject();
            const assetData: MetaAsset = MetaBuilderAssetMapper.defaultAsset({
              ...props,
              name: animation.name || "",
              assetId: asset.id,
              source: false,
              type: "animation",
            });
            if (props.parent) await this.insertParentPath(assetData, props.parent);
            // créer le fichier glb ui ne contient que l'animation
            const gltfAsset = fsExtra.readFileSync(`temp/${assetData.file?.filename}`);

            // const gltfAnimations = 

            gltfPipeline.gltfToGlb(gltfAnimations).then(function (results: any) {
              fsExtra.writeFileSync(`${animation.name}.glb`, results.glb);
            });
            console.log(`gltfAsset: ${gltfAsset}`);
            // lire les meta-données de mon fichier
            assetData.file = {
              filename: animation.name,
              size: 0,
              hash: assetData.file?.hash,
            };
            // console.log(assetData);
            await this.sharedbSocket.insertDoc(`assets`, asset.id, assetData);
            const response: CreateMetaAssetResponseDto = {
              ...assetData,
              id: +asset.id,
              uniqueId: +asset.id,
              createdAt: asset.createdAt,
              modifiedAt: asset.modifiedAt,
            };
            console.log(response);
            this.sharedbSocket.emitAssetCreated(response);
            return resolve(response);
          } catch (err) {
            console.error(err);
            return reject(err);
          }
        });
      })
    );
    return animationAssets.filter((asset) => asset) as CreateMetaAssetResponseDto[];
  }

如果您需要任何其他信息来帮助我，请随时告诉我！

Answer 1

有很多方法，但我告诉你我的工作流程

您正在尝试从 GLTF 文件中提取 animation 数据，将其转换为 GLB 格式，然后将其另存为新文件。 库“gltf-pipeline”可用于将 GLTF 转换为 GLB。 库中的 gltfToGlb function 采用 GLTF object 并返回 promise，后者使用 GLB 数据进行解析。

库链接在这里https://github.com/CesiumGS/gltf-pipeline

Answer 2

我建议使用glTF Transform在 Node.js 环境中从 glTF 文件中提取数据或修改 glTF 文件。

首先使用NodeIO读取文件：

import { NodeIO } from '@gltf-transform/core';
import { KHRONOS_EXTENSIONS } from '@gltf-transform/extensions';

const io = new NodeIO().registerExtensions( KHRONOS_EXTENSIONS );

// (a) read from disk
const document = await io.read('path/to/scene.glb');

// (b) read from memory
const document = await io.readBinary(glb); // glb is Uint8Array or Buffer

接下来，如果您使用的是 TypeScript，我们将进行类型定义以保存新的 animation 数据。

interface Clip {
    name: string,
    tracks: Track[],
}

interface Track {
    targetObject: string,
    targetProperty: string, // 'translation', 'rotation', 'scale', 'weights'
    interpolation: string, // 'LINEAR', 'CUBICSPLINE', 'STEP'
    times: number[],
    values: number[]
}

然后，将 glTF Animations中的 animation 数据解析为以下结构：

const clips = [] as Clip[];

for (const animation of document.getRoot().listAnimations()) {
    const tracks = [];

    for (const channel of animation.listChannels()) {
        const sampler = channel.getSampler();
        tracks.push({
            targetObject: channel.getTargetNode().getName(),
            targetProperty: channel.getTargetPath(),
            interpolation: sampler.getInterpolation(),
            times: Array.from(sampler.getInput().getArray()),
            values: Array.from(sampler.getOutput().getArray())
        } as Track)
    }

    clips.push({ name: animation.getName(), tracks: tracks } as Clip);
}

console.log(clips);

你可以用剪辑数据做任何你想做的事——它代表原始关键帧，每条轨道通过名称识别它影响的 object。 这确实要求您的 glTF 文件具有动画对象的唯一名称。

如果你不想写原始数据，而只是有一个新的 glTF 文件只包含 animation，你也可以这样做：

import { prune } from '@gltf-transform/functions';

// remove all mesh data
for (const mesh of document.getRoot().listMeshes()) {
    for (const prim of mesh.listPrimitives()) {
        prim.dispose();
    }
}

// clean up unused materials, textures, ...
await document.transform(prune());

// (a) write to disk
await io.write('path/to/output.glb', document);

// (b) write to bytes
const bytes = await io.writeBinary(document);