@babylonjs es6 gltf2 interface

Questions
1

Yo @Deltakosh or @sebavan … I recently created UMD/ES6 npm build of my babylon toolkit runtime. I am testing out running in a es6 react web application use the @babylonjs es6 libraries

When i was using the non es6 version of babylonjs and babylon.gltf2interface for my GLTF parsers. I was referencing these classes:

BABYLON.GLTF2.GLTFLoader
BABYLON.GLTF2.IGLTFLoaderExtension
BABYLON.GLTF2.Loader.IScene
BABYLON.GLTF2.Loader.INode
BABYLON.GLTF2.IMaterial
BABYLON.GLTF2.Loader.IAnimation
BABYLON.GLTF2.ArrayItem
BABYLON.GLTF2.INode
BABYLON.GLTF2.IMesh
BABYLON.GLTF2.IMeshPrimitive

But when i try to use the es6 version i get the following error:

Cannot read properties of undefined (reading 'GLTFLoader')
TypeError: Cannot read properties of undefined (reading 'GLTFLoader')
    at http://localhost:3000/static/js/bundle.js:5060:17
    at http://localhost:3000/static/js/bundle.js:8920:3
    at http://localhost:3000/static/js/bundle.js:829:28
    at ./node_modules/babylon-toolkit/dist/babylon.toolkit.js (http://localhost:3000/static/js/bundle.js:830:2)
    at options.factory (http://localhost:3000/static/js/bundle.js:416144:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:415573:32)
    at fn (http://localhost:3000/static/js/bundle.js:415802:21)
    at ./src/App.tsx (http://localhost:3000/static/js/bundle.js:70:73)
    at options.factory (http://localhost:3000/static/js/bundle.js:416144:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:415573:32)

What do i have to do use my GLTF parsers that reference BABYLON.GLTF2.GLTFLoader and other GLTF2 classes to work with the es6 version.

Here is my current import list:

import * as BABYLON from '@babylonjs/core/Legacy/legacy';
import '@babylonjs/gui';
import '@babylonjs/loaders';
import '@babylonjs/materials';
import TOOLKIT from 'babylon-toolkit';
2

Should there be a ES6 version for GLTF2. Like: @babylonjs/gltf2interface

3

no, this is the same in both UMD and es6. babylonjs-gltf2interface is the right package. it is a dependency of the loaders and serializers (if i am not mistaken here), so it should be added automatically when you npm install @babylonjs/loaders

4

Oh, and I know you really like using namespaces :slight_smile: But don’t use namespaces in ES6. Import what you need and use it. Namespace population is a legacy behavior and is not recommended in es6

5

I’m sorry not clear, so there is or is not a gltf2interfaces for the @babylonjs es6 version?

6

it is the same package. there is no @babylonjs/gltf2-interface, because it is not needed

7

Yo @RaananW … thanks as always for all your help. I almost have an ES6 version of my toolkit. But I still cant figure out how to make ES6 references to the same BABYLON.GLTF2 classes I was using before with the UMD version. All I had to do was reference babylonjs-gltf2interface to get all these classes:

BABYLON.GLTF2.GLTFLoader
BABYLON.GLTF2.IGLTFLoaderExtension
BABYLON.GLTF2.Loader.IScene
BABYLON.GLTF2.Loader.INode
BABYLON.GLTF2.IMaterial
BABYLON.GLTF2.Loader.IAnimation
BABYLON.GLTF2.ArrayItem
BABYLON.GLTF2.INode
BABYLON.GLTF2.IMesh
BABYLON.GLTF2.IMeshPrimitive

Been using these classes for years in my GLTF Parser for all the Unity Metadata. But with the new ES6 Versions of BabylonJS. I cant seem to get GLTF2 classes to work.

This is the top of my main index.ts entry point for my module library:

Screenshot 2024-08-14 at 9.44.08 PM
Screenshot 2024-08-14 at 9.44.08 PM1108×268 34.2 KB

But I still get GLTF2 missing errors:

Screenshot 2024-08-14 at 9.43.09 PM
Screenshot 2024-08-14 at 9.43.09 PM1814×1592 499 KB

I know its me doing something wrong in es6 :frowning:

8

So i think i been getting them tracked down.

This is my centralized babylon-gltf.ts

// Import from the ES6 version of BabylonJS
import { GLTFLoader } from '@babylonjs/loaders/glTF/2.0/glTFLoader';
import { IGLTFLoaderExtension } from '@babylonjs/loaders/glTF/2.0/glTFLoaderExtension';
import { IScene, INode, IMaterial, IAnimation, IMesh, IMeshPrimitive } from '@babylonjs/loaders/glTF/2.0/glTFLoaderInterfaces';
import { ArrayItem } from '@babylonjs/loaders/glTF/2.0/glTFLoader';
import { GLTFFileLoader } from '@babylonjs/loaders/glTF';
export { GLTFLoader, GLTFFileLoader, IGLTFLoaderExtension, IScene, INode, IMaterial, IAnimation, IMesh, IMeshPrimitive, ArrayItem }

Then in my index.ts entry point:

/** ES6 Module Imports */
import * as BABYLON from '@babylonjs/core';
import * as GLTF2 from './babylon-gltf';
import * as Debug from './babylon-debug';
import '@babylonjs/gui';
import '@babylonjs/loaders';
import '@babylonjs/materials';

Still cleaning up some stuff, but i am alot further with a es6 version that uses @babylonjs/core

2 Likes
9

Finally :slight_smile:

Thanks @RaananW … I had to go real deep with ChatGPT to help me figure some of these issues out. But i finally got it, both UMD and ES6 versions

https://forum.babylonjs.com/t/babylon-toolkit-meets-node-package-manager

2 Likes