繁体   English   中英

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

[英]Trying to get only the animations from a GLTF file

提示:本站为国内最大中英文翻译问答网站,提供中英文对照查看,鼠标放在中文字句上可显示英文原文

我想从每一种 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[];
  }

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

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

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

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

我建议使用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);
问题未解决?试试本站强大的搜索功能,搜索: 尝试仅从 GLTF 文件中获取动画
ThreeJS直接从文件输入加载GLTF Model

[英]ThreeJS Load GLTF Model Directly From File Input

我需要在用户想要显示的 ThreeJS 中加载任何 GLTF Model。 这意味着我有一个文件输入标签,用户可以在其中单击,然后从他的文件浏览器中选择他想要上传的 gltf 文件: 一旦用户选择了 model 我想直接使用该文件并在 ThreeJS 中显示它,问题是我不知道如何使用 bat 选择 ...

如何从gltf对象获取几何体

[英]How can I get the geometry from a gltf object

我使用了three.js来获得gltfloader的gltf,我想创建一个粒子系统。 我需要得到几何对象,我怎么能得到它 ...

无法从threejs中的gltf加载场景中获取材料

[英]Can't get material from a gltf loaded scene in threejs

我想修改加载 gltf 的 model 中的材料以设置其不透明度/透明度。 我似乎无法得到任何网格。 我创建了这个小提琴,上面写着“没有找到网格”。 我发现了很多获取材料的例子,他们似乎都是这样做的(确保它是网格然后获取材料)。 如何访问网格/材料? ...

如何从 gltf 文件将 OrbitControls 应用到已加载的相机?

[英]How to apply OrbitControls to a loaded camera from a gltf file?

我正在使用 Three.js 加载一个带有相机的 gltf 场景。 相机和模型显示良好,但是当我尝试将 OrbitControls.js 应用于该加载的相机时,它不起作用。 它仅适用于使用new THREE.PerspectiveCamera()在 Three.js 中直接创建的相机。 我把代码留在 ...

找不到 GLTF 文件 404

[英]GLTF file 404 not found

所以我正在尝试加载 GLTF 文件,但收到此错误: 我不知道为什么它无法找到并打开文件。 我必须设置本地服务器吗? 我在网上查了其他例子, 这个例子包括一个 DRACOLoader。 诚然,我不知道这是为了什么,并且想知道我是否需要实现它才能加载它。 这是我的代码: ...

glTF 文件没有显示任何内容

[英]glTF file is not showing anything

我想使用 Three.js 显示一个 glTF 文件。 由于 CORS 政策,我正在使用本地服务器(Servez)。 当我在 Mozilla Firefox 上运行它时,它没有错误,但仍然没有显示任何内容。 在 Chrome 上执行相同操作时,它显示 - “不允许加载本地资源:”。 即使我使用了 C ...

从文本加载 GLTF 模型

[英]Load GLTF model from text

我目前正在从静态文件服务器提供的文件中加载 GLTF 文件。 我现在转向直接提供 GLTF 文件作为文本的 API 服务器。 如何直接从其内容(而不是通过文件 url)加载 GLTF 文件? ...

WebGL或Canvas是获得SVG关键帧动画硬件加速的唯一方法吗?

[英]Is WebGL or Canvas the only way to get SVG Keyframe Animations Hardware Accelerated?

我正在寻找的是使用html5的手机闪存替代品。 我正在研究SVG,看来获得硬件加速的唯一方法就是使用CSS转换。 但CSS转换是不够的,我想动画构成矢量的实际节点(即路径上的点),这样我就可以得到更复杂的角色动画。 为此,我正在寻找一些基于gui的编辑。 我检查了adobe一直在 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2023 STACKOOM.COM