glMatrix - mat4 not defined

Question

Hi, I downloaded toji-gl-matrix-21b745f.

I copied the file dist/gl-matrix-min.js inside the web-root folder.

In index.html i have:

<script src="gl-matrix-min.js"></script>
<script src="main.js" defer></script>

And inside in main.js i use:

const matrix = mat4.create();

Result is: ReferenceError: mat4 is not defined

I already tried glMatrix.mat4 but result is the same.

I don't understand the error. Can someone help me. Thx in advance

Answer 1

see this:https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js I think you should include this file which contain mat4 object.

Answer 2

Destructuring only gives you objects but no methods in VS Code intellisense.

I downloaded the source files rather then the dist files, put them in a folder, and imported from the index.js file like:

import { mat2, mat2d, mat3, mat4, quat, quat2, vec2, vec3, vec4, } from "./index.js";

These source files are large so you will want to switch out for "minified" version in production, switch the above for this then:

import "./gl-matrix-min.js";
const { mat2, mat2d, mat4, mat3, quat, quat2, vec2, vec3, vec4 } = glMatrix;

Full code completion hints:

Answer 3

If you use last version of gl-matrix library and you load it on normal way (direct not from npm build etc..) then use this before calling glMatrix funcs ... :

Put intro global space and you program will works fine.

window.mat4 = glMatrix.mat4
window.mat2 = glMatrix.mat2
window.mat2d= glMatrix.mat2d
window.mat3= glMatrix.mat3
window.mat4= glMatrix.mat4
window.quat= glMatrix.quat
window.quat2= glMatrix.quat2
window.vec2= glMatrix.vec2
window.vec3= glMatrix.vec3
window.vec4= glMatrix.vec4