使用gltfjsx将.gltf转为.jsx失败的技术求助

问题场景 #

开发React+Three.js应用时，使用gltf-pipeline处理3D模型（执行gltf-pipeline -i scene.gltf -o chair.gltf -d），随后用gltfjsx执行npx gltfjsx chair.gltf --transform转换为JSX组件时，触发以下错误：

prune: No unused properties found.
prune: No unused properties found.
instance: No meshes with ≥5 parent nodes were found.
prune: Removed types... Node (1), Scene (1)
prune: No unused properties found.
prune: No unused properties found.
TypeError: Cannot read properties of null (reading 'getRoot')
    at Vt (file:///C:/Users/Mostafizur%20Rahman/AppData/Roaming/npm/node_modules/gltfjsx/node_modules/@gltf-transform/functions/dist/functions.modern.js:1:35043)
    at file:///C:/Users/Mostafizur%20Rahman/AppData/Roaming/npm/node_modules/gltfjsx/node_modules/@gltf-transform/functions/dist/functions.modern.js:1:62906
    at Array.map (<anonymous>)
    at textureCompress (file:///C:/Users/Mostafizur%20Rahman/AppData/Roaming/npm/node_modules/gltfjsx/node_modules/@gltf-transform/functions/dist/functions.modern.js:1:62881)
    at Tt.transform (file:///C:/Users/Mostafizur%20Rahman/AppData/Roaming/npm/node_modules/gltfjsx/node_modules/@gltf-transform/core/dist/core.modern.js:1:33378)
    at async transform (file:///C:/Users/Mostafizur%20Rahman/AppData/Roaming/npm/node_modules/gltfjsx/src/utils/transform.js:108:3)
    at async WriteStream.<anonymous> (file:///C:/Users/Mostafizur%20Rahman/AppData/Roaming/npm/node_modules/gltfjsx/src/gltfjsx.js:56:11)

解决方案 #

1. 跳过纹理压缩转换 #

报错来自textureCompress函数，说明纹理压缩环节出现异常，先跳过压缩尝试转换：

npx gltfjsx chair.gltf --transform --no-compress

如果成功生成JSX，可后续单独处理纹理优化，或在Three.js加载时再处理纹理。

2. 检查处理后的模型合法性 #

用gltf-validator验证chair.gltf是否存在格式错误或资源缺失：

# 先安装gltf-validator
npm install -g gltf-validator
# 验证模型
gltf-validator chair.gltf

根据验证结果修复模型问题（比如缺失纹理文件、格式不兼容等）。

3. 改用原始模型直接转换 #

gltf-pipeline的-d参数会删除未使用的资源，可能误删了模型依赖的必要节点或纹理。尝试直接用原始的scene.gltf执行转换：

npx gltfjsx scene.gltf --transform

如果成功，可调整gltf-pipeline的优化参数（比如去掉-d），避免破坏模型结构。

4. 更新gltfjsx至最新版本 #

旧版本可能存在兼容性bug，强制使用最新版本尝试：

npx gltfjsx@latest chair.gltf --transform

5. 手动修复模型纹理 #

如果模型纹理格式不支持压缩（比如非PNG/JPG格式），先将纹理转换为标准格式，重新打包为gltf后再执行转换。

内容的提问来源于stack exchange，提问作者perfectionist1