Three.js: FBXLoader: Import inflate.min.js

[wu21731]

Description of the problem

Error: FBXLoader: Import inflate.min.js from https://github.com/imaya/zlib.js
at BinaryParser.parseProperty (FBXLoader.js:4273)
at BinaryParser.parseNode (FBXLoader.js:3994)
at BinaryParser.parseNode (FBXLoader.js:4018)
at BinaryParser.parseNode (FBXLoader.js:4018)
at BinaryParser.parse (FBXLoader.js:3935)
at THREE.FBXLoader.parse (FBXLoader.js:95)
at FBXLoader.js:61
at XMLHttpRequest. (three.js:29871)

Three.js version

• [x] Dev
• [ ] r85
• [ ] ...

Browser

• [] All of them
• [x] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [] All of them
• [x] Windows
• [ ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

[Mugen87]

You have to import the mentioned file into your project in order to parse FBX files in binary format. You can also use a version of zlib.js in https://github.com/mrdoob/three.js/blob/master/examples/js/libs/inflate.min.js

[tlorton1]

I am using Vue.js, and I put the file mentioned above into the section of index.html, but I am receiving this error:

Access to Script at 'https://github.com/mrdoob/three.js/blob/master/examples/js/libs/inflate.min.js' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

I'm not sure if my integrity hash is wrong, or what the exact problem is?

[Mugen87]

@tlorton1 This is not a valid URL if you want to include inflate.min.js in your app. It's just a link to a github page.

Please don't ask help request at github. This is not a help site. Use the forum instead.

[mike-tuxedo]

I had the same problem first. I use that file https://clara.io/view/2c296545-1204-4fc3-b470-c39bec65e86c

Because of this i imported Zlib (https://www.npmjs.com/package/zlibjs), fbx-loader (https://www.npmjs.com/package/three-fbx-loader) and inflate.min.js from your examples and then I get the following error

Inflate is not a constructor

Any ideas what i may did wrong? Maybe are fbxloader and zlibjs not compatible at the moment?

BTW: I used the following threejs-example for reference (http://threejs.live/#/webgl_loader_fbx), but this example uses fbxloader2, which i couldn't find anywhere in the web.

[Mugen87]

BTW: I used the following threejs-example for reference (http://threejs.live/#/webgl_loader_fbx), but this example uses fbxloader2, which i couldn't find anywhere in the web.

Please don't rely on this URL. It's not maintained by the project. You can find the official list of examples with the latest three.js version right here:

https://threejs.org/examples/

Use the inflate.min.js version of the following example. It works with the latest version of FBXLoader.

[mike-tuxedo]

@Mugen87 Thanks, now it works!
Althought I couldn't get it running by loading libs via require, but it worked when I load it via scripttags in my template, like in the example you mentioned. :+1:

[bonomite]

hey everyone... coworker here at work helped me get this going when I get the "Zlib.Inflate is not a constructor" error while trying to use require() for this. This worked for me.

const Zlib = require("three/examples/js/libs/inflate.min");
window.Zlib = Zlib.Zlib;
const FBXLoader = require("three/examples/js/loaders/FBXLoader");
window.FBXLoader = FBXLoader;

[Doeke]

@bonomite thanks, my import (webpack/typescript) now looks like this:

import { Zlib } from 'three/examples/js/libs/inflate.min'
(window as any).Zlib = Zlib
import 'imports-loader?THREE=three!three/examples/js/loaders/FBXLoader'

It works but unfortunately I still get a warning I can't get rid of when I try to use THREE.FBXLoader, despite it being declared in @types/three.

[binperson]

I use Zlib like this in the vue project，this worked for me.

const Zlib = require("./inflate.min.js").Zlib;
window.Zlib = Zlib;

[yuanzhaokang]

You can use https://github.com/zprodev/zlib.es#readme replace ZLib in FBXLoader.

[LuisEgan]

I managed to do it using what @yuanzhaokang like this:

import { inflate } from 'zlib.es';

And in the FBXloader (as a module)

//   if (typeof Zlib === 'undefined') {
          //     console.error(
          //       'THREE.FBXLoader: External library Inflate.min.js required, obtain or import from https://github.com/imaya/zlib.js'
          //     );
          //   }

          //   var inflate = Zlib.Inflate(new Uint8Array(reader.getArrayBuffer(compressedLength))); // eslint-disable-line no-undef
          var reader2 = new BinaryReader(
            inflate(new Uint8Array(reader.getArrayBuffer(compressedLength))).buffer
          );