[documentation & question] typescript example about gltfjsx

[drcmda]

oh, that's interesting. would you make a PR? im not too familiar with TS but would definitively approve of it.

it's just this file: https://github.com/react-spring/gltfjsx/blob/master/gltfjsx.js

it concatenates text basically. you would add types in there.

[onichandame]

@drcmda I will definitely submit a PR once all the problems are solved. For now, the timeline of another project is quite tight so I need to focus on that. I will come to this maybe next week.

My suspicion is that the typing of 3 is lacking some not-commonly-used types. But I haven't got time to verify it yet.

[drcmda]

it's done :-)

/*
auto-generated by: https://github.com/react-spring/gltfjsx
*/

import * as THREE from 'three'
import React, { useRef } from 'react'
import { useLoader } from 'react-three-fiber'
import { GLTFLoader, GLTF } from 'three/examples/jsm/loaders/GLTFLoader'

type GLTFResult = GLTF & {
  nodes: {
    Circle011_EyeFire_0: THREE.Mesh
    Circle011_SerpentBake_0: THREE.Mesh
    Hide003_EyeFire_0: THREE.Mesh
    Hide003_Boat2Bake_0: THREE.Mesh
    Keel002_EyeFire_0: THREE.Mesh
    Keel002_Boat1Bake_0: THREE.Mesh
    Plane044_WaterBake_0: THREE.Mesh
    Rock021_RockBake_0: THREE.Mesh
    VikingShipObjects001_Objects_0: THREE.Mesh
    VikingShipObjects001_Objects_0001: THREE.Mesh
  }
  materials: {
    EyeFire: THREE.MeshStandardMaterial
    SerpentBake: THREE.MeshStandardMaterial
    Boat2Bake: THREE.MeshStandardMaterial
    Boat1Bake: THREE.MeshStandardMaterial
    WaterBake: THREE.MeshStandardMaterial
    RockBake: THREE.MeshStandardMaterial
    Objects: THREE.MeshStandardMaterial
  }
}

export default function Model(props: JSX.IntrinsicElements['group']) {
  const group = useRef()
  const { nodes, materials } = useLoader<GLTFResult>(GLTFLoader, '/scene_draco.glb')
  return (
    <group ref={group} {...props} dispose={null}>
      <group rotation={[-Math.PI / 2, 0, 0]} scale={[0.01, 0.01, 0.01]}>
        <group rotation={[Math.PI / 2, 0, 0]}>
          <group rotation={[-Math.PI / 2, 0, 0]} scale={[100, 100, 100]}>
            <mesh material={materials.EyeFire} geometry={nodes.Circle011_EyeFire_0.geometry} />
            <mesh material={materials.SerpentBake} geometry={nodes.Circle011_SerpentBake_0.geometry} />
          </group>
          <group position={[-1018.2, -380.53, 1332.67]} rotation={[-1.05, 0.72, -0.08]} scale={[100, 100, 100]}>
            <mesh material={materials.EyeFire} geometry={nodes.Hide003_EyeFire_0.geometry} />
            <mesh material={materials.Boat2Bake} geometry={nodes.Hide003_Boat2Bake_0.geometry} />
          </group>
          <group position={[349.57, 32.32, 176.64]} rotation={[-1.73, -0.23, -2.65]} scale={[100, 100, 100]}>
            <mesh material={materials.EyeFire} geometry={nodes.Keel002_EyeFire_0.geometry} />
            <mesh material={materials.Boat1Bake} geometry={nodes.Keel002_Boat1Bake_0.geometry} />
          </group>
          <group position={[0, 27.07, 0]} rotation={[-Math.PI / 2, 0, 0]} scale={[100, 100, 170.02]}>
            <mesh material={materials.WaterBake} geometry={nodes.Plane044_WaterBake_0.geometry} />
          </group>
          <group rotation={[-Math.PI / 2, 0, 0]} scale={[100, 100, 100]}>
            <mesh material={materials.RockBake} geometry={nodes.Rock021_RockBake_0.geometry} />
          </group>
          <group scale={[100, 100, 100]}>
            <mesh material={materials.Objects} geometry={nodes.VikingShipObjects001_Objects_0.geometry} />
            <mesh material={materials.Objects} geometry={nodes.VikingShipObjects001_Objects_0001.geometry} />
          </group>
        </group>
      </group>
    </group>
  )
}

[onichandame]

@drcmda thx. Are nodes and materials defined in three or react-three-fiber or neither?

[drcmda]

they are normally not defined because they are dependent on the gltf.

[onichandame]

I mean the existence of these fields should be shipped in the typing of a package for more convenient usage if possible.

For example, the nodes may be defined as {[key: string]: THREE.Mesh} | undefined. So that the user can use the default typing in simple cases, whereas the specific field names can still be overwritten by the user if needed.

My question is which package the default typing of these fields should reside in: three, react-three-fiber or neither? In case of neither, I guess nothing can be done. But for the other 2 cases, we can add the default typing to the corresponding package because apparently such typing does not exist anywhere yet.

[drcmda]

that makes sense, im still learning about ts. it would be in r3f/src/hooks.tsx i guess. but useLoader can be used with ANY loader, imageloader, textureloader etc. nodes/materials is something i add to the gltfloader.

but it could still export a type that you could plugin in useLoader<GLTF>(...)

edit: just tried, but i think this goes over my head. types were made by contribution, dont know how it works tbh

[onichandame]

I just looked at r3f/src/hooks.tsx and found many anys related to the loaders, which is generally considered as a bad practice. I guess a more ts-ish refactorization may be required before more specific issues can be addressed.

Thx for your great work! I will try to learn the codebase of r3f and contribute when it is necessary.