How to use babylonjs-loaders - 10 common examples

private _getLoaderDefaultsAsync(): Promise {
        if (GLTFTab._LoaderDefaults) {
            return Promise.resolve(GLTFTab._LoaderDefaults);
        }

        const defaults: ILoaderDefaults = {
            extensions: {}
        };

        const engine = new NullEngine();
        const scene = new Scene(engine);

        const loader = new GLTFFileLoader();
        GLTFTab._EnumeratePublic(loader, (key, value) => {
            defaults[key] = value;
        });

        loader.onExtensionLoadedObservable.add(extension => {
            const extensionDefaults: any = {};
            GLTFTab._EnumeratePublic(extension, (key, value) => {
                extensionDefaults[key] = value;
            });
            defaults.extensions[extension.name] = extensionDefaults;
        });

        const data = '{ "asset": { "version": "2.0" } }';
        return loader.importMeshAsync([], scene, data, "").then(() => {
            scene.dispose();
            engine.dispose();

constructor(tabbar: TabBar, inspector: Inspector) {
        super(tabbar, 'GLTF');

        this._inspector = inspector;
        this._panel = Helpers.CreateDiv('tab-panel') as HTMLDivElement;
        this._actions = Helpers.CreateDiv('gltf-actions', this._panel) as HTMLDivElement;
        this._actions.addEventListener('click', event => {
            this._closeDetailsPanel();
        });

        if (SceneLoader && GLTFFileLoader && GLTF2.GLTFLoader) {
            this._addImport();
        }

        if (GLTF2Export) {
            this._addExport();
        }
    }

public static get IsSupported(): boolean {
        return !!(SceneLoader && GLTFFileLoader && GLTF2.GLTFLoader) || !!GLTF2Export;
    }

extensionStates["MSFT_sRGBFactors"] = extensionStates["MSFT_sRGBFactors"] || { enabled: true };
        extensionStates["MSFT_audio_emitter"] = extensionStates["MSFT_audio_emitter"] || { enabled: true };
        extensionStates["KHR_draco_mesh_compression"] = extensionStates["KHR_draco_mesh_compression"] || { enabled: true };
        extensionStates["KHR_materials_pbrSpecularGlossiness"] = extensionStates["KHR_materials_pbrSpecularGlossiness"] || { enabled: true };
        extensionStates["KHR_materials_clearcoat"] = extensionStates["KHR_materials_clearcoat"] || { enabled: true };
        extensionStates["KHR_materials_sheen"] = extensionStates["KHR_materials_sheen"] || { enabled: true };
        extensionStates["KHR_materials_specular"] = extensionStates["KHR_materials_specular"] || { enabled: true };
        extensionStates["KHR_materials_unlit"] = extensionStates["KHR_materials_unlit"] || { enabled: true };
        extensionStates["KHR_lights_punctual"] = extensionStates["KHR_lights_punctual"] || { enabled: true };
        extensionStates["KHR_texture_transform"] = extensionStates["KHR_texture_transform"] || { enabled: true };
        extensionStates["EXT_lights_image_based"] = extensionStates["EXT_lights_image_based"] || { enabled: true };

        const loaderState = this.props.globalState.glTFLoaderDefaults;

        if (loaderState["animationStartMode"] === undefined) {
            loaderState["animationStartMode"] = GLTFLoaderAnimationStartMode.FIRST;
        }
        loaderState["capturePerformanceCounters"] = loaderState["capturePerformanceCounters"] || false;
        loaderState["compileMaterials"] = loaderState["compileMaterials"] || false;
        loaderState["compileShadowGenerators"] = loaderState["compileShadowGenerators"] || false;
        loaderState["coordinateSystemMode"] = loaderState["coordinateSystemMode"] || GLTFLoaderCoordinateSystemMode.AUTO;
        loaderState["loggingEnabled"] = loaderState["loggingEnabled"] || false;
        loaderState["transparencyAsCoverage"] = loaderState["transparencyAsCoverage"] || false;
        loaderState["useClipPlane"] = loaderState["useClipPlane"] || false;
        loaderState["validate"] = loaderState["validate"] || true;
    }

render() {
        const extensionStates = this.props.globalState.glTFLoaderExtensionDefaults;
        const loaderState = this.props.globalState.glTFLoaderDefaults;

        var animationStartMode = [
            { label: "None", value: GLTFLoaderAnimationStartMode.NONE },
            { label: "First", value: GLTFLoaderAnimationStartMode.FIRST },
            { label: "ALL", value: GLTFLoaderAnimationStartMode.ALL }
        ];

        var coordinateSystemMode = [
            { label: "Auto", value: GLTFLoaderCoordinateSystemMode.AUTO },
            { label: "Right handed", value: GLTFLoaderCoordinateSystemMode.FORCE_RIGHT_HANDED }
        ];

        return (
            <div>
                
                    
                    
                    
                    
                    
</div>

render() {
        const extensionStates = this.props.globalState.glTFLoaderExtensionDefaults;
        const loaderState = this.props.globalState.glTFLoaderDefaults;

        var animationStartMode = [
            { label: "None", value: GLTFLoaderAnimationStartMode.NONE },
            { label: "First", value: GLTFLoaderAnimationStartMode.FIRST },
            { label: "ALL", value: GLTFLoaderAnimationStartMode.ALL }
        ];

        var coordinateSystemMode = [
            { label: "Auto", value: GLTFLoaderCoordinateSystemMode.AUTO },
            { label: "Right handed", value: GLTFLoaderCoordinateSystemMode.FORCE_RIGHT_HANDED }
        ];

        return (
            <div>
                
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
</div>

extensionStates["KHR_materials_sheen"] = extensionStates["KHR_materials_sheen"] || { enabled: true };
        extensionStates["KHR_materials_specular"] = extensionStates["KHR_materials_specular"] || { enabled: true };
        extensionStates["KHR_materials_unlit"] = extensionStates["KHR_materials_unlit"] || { enabled: true };
        extensionStates["KHR_lights_punctual"] = extensionStates["KHR_lights_punctual"] || { enabled: true };
        extensionStates["KHR_texture_transform"] = extensionStates["KHR_texture_transform"] || { enabled: true };
        extensionStates["EXT_lights_image_based"] = extensionStates["EXT_lights_image_based"] || { enabled: true };

        const loaderState = this.props.globalState.glTFLoaderDefaults;

        if (loaderState["animationStartMode"] === undefined) {
            loaderState["animationStartMode"] = GLTFLoaderAnimationStartMode.FIRST;
        }
        loaderState["capturePerformanceCounters"] = loaderState["capturePerformanceCounters"] || false;
        loaderState["compileMaterials"] = loaderState["compileMaterials"] || false;
        loaderState["compileShadowGenerators"] = loaderState["compileShadowGenerators"] || false;
        loaderState["coordinateSystemMode"] = loaderState["coordinateSystemMode"] || GLTFLoaderCoordinateSystemMode.AUTO;
        loaderState["loggingEnabled"] = loaderState["loggingEnabled"] || false;
        loaderState["transparencyAsCoverage"] = loaderState["transparencyAsCoverage"] || false;
        loaderState["useClipPlane"] = loaderState["useClipPlane"] || false;
        loaderState["validate"] = loaderState["validate"] || true;
    }

render() {
        const extensionStates = this.props.globalState.glTFLoaderExtensionDefaults;
        const loaderState = this.props.globalState.glTFLoaderDefaults;

        var animationStartMode = [
            { label: "None", value: GLTFLoaderAnimationStartMode.NONE },
            { label: "First", value: GLTFLoaderAnimationStartMode.FIRST },
            { label: "ALL", value: GLTFLoaderAnimationStartMode.ALL }
        ];

        var coordinateSystemMode = [
            { label: "Auto", value: GLTFLoaderCoordinateSystemMode.AUTO },
            { label: "Right handed", value: GLTFLoaderCoordinateSystemMode.FORCE_RIGHT_HANDED }
        ];

        return (
            <div>
                
                    
                    
                    
                    
                    
                    
</div>

render() {
        const extensionStates = this.props.globalState.glTFLoaderExtensionDefaults;
        const loaderState = this.props.globalState.glTFLoaderDefaults;

        var animationStartMode = [
            { label: "None", value: GLTFLoaderAnimationStartMode.NONE },
            { label: "First", value: GLTFLoaderAnimationStartMode.FIRST },
            { label: "ALL", value: GLTFLoaderAnimationStartMode.ALL }
        ];

        var coordinateSystemMode = [
            { label: "Auto", value: GLTFLoaderCoordinateSystemMode.AUTO },
            { label: "Right handed", value: GLTFLoaderCoordinateSystemMode.FORCE_RIGHT_HANDED }
        ];

        return (
            <div>
                
                    
                    
                    
                    
</div>

render() {
        const extensionStates = this.props.globalState.glTFLoaderExtensionDefaults;
        const loaderState = this.props.globalState.glTFLoaderDefaults;

        var animationStartMode = [
            { label: "None", value: GLTFLoaderAnimationStartMode.NONE },
            { label: "First", value: GLTFLoaderAnimationStartMode.FIRST },
            { label: "ALL", value: GLTFLoaderAnimationStartMode.ALL }
        ];

        var coordinateSystemMode = [
            { label: "Auto", value: GLTFLoaderCoordinateSystemMode.AUTO },
            { label: "Right handed", value: GLTFLoaderCoordinateSystemMode.FORCE_RIGHT_HANDED }
        ];

        return (
            <div>
                
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                
</div>