gltfjsx
gltfjsx copied to clipboard
Typescript Errors in Web version and CLI using `--types` option
Problem Description:
Code output by https://gltf.pmnd.rs/
has numerous Typescript errors
Screenshot
Sample Code
/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/
import { useGLTF } from "@react-three/drei";
import type * as THREE from "three";
import { type GLTF } from "three-stdlib";
type GLTFResult = GLTF & {
nodes: {
EyeLeft: THREE.SkinnedMesh;
EyeRight: THREE.SkinnedMesh;
Wolf3D_Head: THREE.SkinnedMesh;
Wolf3D_Teeth: THREE.SkinnedMesh;
Wolf3D_Hair: THREE.SkinnedMesh;
Wolf3D_Body: THREE.SkinnedMesh;
Wolf3D_Outfit_Bottom: THREE.SkinnedMesh;
Wolf3D_Outfit_Footwear: THREE.SkinnedMesh;
Wolf3D_Outfit_Top: THREE.SkinnedMesh;
Hips: THREE.Bone;
};
materials: {
Wolf3D_Eye: THREE.MeshStandardMaterial;
Wolf3D_Skin: THREE.MeshStandardMaterial;
Wolf3D_Teeth: THREE.MeshStandardMaterial;
Wolf3D_Hair: THREE.MeshStandardMaterial;
Wolf3D_Body: THREE.MeshStandardMaterial;
Wolf3D_Outfit_Bottom: THREE.MeshStandardMaterial;
Wolf3D_Outfit_Footwear: THREE.MeshStandardMaterial;
Wolf3D_Outfit_Top: THREE.MeshStandardMaterial;
};
};
export function Model(props: JSX.IntrinsicElements["group"]) {
const { nodes, materials } = useGLTF(
"/readyPlayerMe-transformed.glb"
) as GLTFResult;
return (
<group {...props} dispose={null}>
<group>
<primitive object={nodes.Hips} />
<skinnedMesh
name="EyeLeft"
geometry={nodes.EyeLeft.geometry}
material={materials.Wolf3D_Eye}
skeleton={nodes.EyeLeft.skeleton}
morphTargetDictionary={nodes.EyeLeft.morphTargetDictionary}
morphTargetInfluences={nodes.EyeLeft.morphTargetInfluences}
/>
<skinnedMesh
name="EyeRight"
geometry={nodes.EyeRight.geometry}
material={materials.Wolf3D_Eye}
skeleton={nodes.EyeRight.skeleton}
morphTargetDictionary={nodes.EyeRight.morphTargetDictionary}
morphTargetInfluences={nodes.EyeRight.morphTargetInfluences}
/>
<skinnedMesh
name="Wolf3D_Head"
geometry={nodes.Wolf3D_Head.geometry}
material={materials.Wolf3D_Skin}
skeleton={nodes.Wolf3D_Head.skeleton}
morphTargetDictionary={nodes.Wolf3D_Head.morphTargetDictionary}
morphTargetInfluences={nodes.Wolf3D_Head.morphTargetInfluences}
/>
<skinnedMesh
name="Wolf3D_Teeth"
geometry={nodes.Wolf3D_Teeth.geometry}
material={materials.Wolf3D_Teeth}
skeleton={nodes.Wolf3D_Teeth.skeleton}
morphTargetDictionary={nodes.Wolf3D_Teeth.morphTargetDictionary}
morphTargetInfluences={nodes.Wolf3D_Teeth.morphTargetInfluences}
/>
<skinnedMesh
geometry={nodes.Wolf3D_Hair.geometry}
material={materials.Wolf3D_Hair}
skeleton={nodes.Wolf3D_Hair.skeleton}
/>
<skinnedMesh
geometry={nodes.Wolf3D_Body.geometry}
material={materials.Wolf3D_Body}
skeleton={nodes.Wolf3D_Body.skeleton}
/>
<skinnedMesh
geometry={nodes.Wolf3D_Outfit_Bottom.geometry}
material={materials.Wolf3D_Outfit_Bottom}
skeleton={nodes.Wolf3D_Outfit_Bottom.skeleton}
/>
<skinnedMesh
geometry={nodes.Wolf3D_Outfit_Footwear.geometry}
material={materials.Wolf3D_Outfit_Footwear}
skeleton={nodes.Wolf3D_Outfit_Footwear.skeleton}
/>
<skinnedMesh
geometry={nodes.Wolf3D_Outfit_Top.geometry}
material={materials.Wolf3D_Outfit_Top}
skeleton={nodes.Wolf3D_Outfit_Top.skeleton}
/>
</group>
</group>
);
}
useGLTF.preload("/readyPlayerMe-transformed.glb");
Same errors using the latest cli as well:
npx gltfjsx diana.gltf -t
/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
Command: npx [email protected] diana.gltf -t
*/
I just ran the CLI version with --types
and can confirm that there are a bunch of errors for example:
(a)
TS2339: Property 'instanceMatrix' does not exist on type 'Mesh<BufferGeometry<NormalBufferAttributes>, Material | Material[], Object3DEventMap>'.
(b)
TS2304: Cannot find name 'GLTFAction'.
161 | PaletteMaterial001: THREE.MeshStandardMaterial
162 | }
> 163 | animations: GLTFAction[]
Would be great if someone can confirm if there's a currently known-working version that I can pin, and also get some test coverage on the typescript-generating code paths.
(b)
TS2304: Cannot find name 'GLTFAction'. 161 | PaletteMaterial001: THREE.MeshStandardMaterial 162 | } > 163 | animations: GLTFAction[]
should be fixed by https://github.com/pmndrs/gltfjsx/pull/260