如何包含 gl 矩阵？

Question

我做了什么：

从这里下载主分支：https://github.com/toji/gl-matrix 将 src 文件夹放入我的项目文件夹中。 从那里包含 gl-matrix-manifest.js 。 尝试过这个：

var mvMatrix = mat4.create();

结果：

var mvMatrix = mat4.create();
ReferenceError: mat4 is not defined

好吧，我们直接引入mat4吧。包括。结果：

var out = new GLMAT_ARRAY_TYPE(16);
ReferenceError: GLMAT_ARRAY_TYPE is not defined

好吧，也许需要 common.js:

var x = axis[0], y = axis[1], z = axis[2],
TypeError: axis is undefined

WTF，包括 src 文件夹中的所有其他文件（常见、向量、矩阵、quat）：

var x = axis[0], y = axis[1], z = axis[2],
TypeError: axis is undefined

（同）

如何正确包含？我特别需要 mat4 和 vec4。

Answer 1

正确指定源后，我仍然无法直接调用mat4。

我必须输入“glMatrix.mat4”。

Answer 2

只需包含 /dist/gl-matrix-min.js 或 /dist/gl-matrix.js :)

Answer 3

在head添加这个cdn链接

<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"
        integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ=="
        crossorigin="anonymous" defer>
</script>

Answer 4

1. 从这里下载
2. 提取并获取 gl-matrix-min.js
3. 在您的index.html文件中

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

4. 现在尝试

   var mvMatrix = glMatrix.mat4.create();

Answer 5

这是如何将 glMatrix 和 Box2D-WASM 作为 ES6 模块包含在内的现代方法：

游乐场：https://plnkr.co/edit/BGNYcIJRiJXpd9N4?preview

    <!-- Since import maps are not yet supported by all browsers, its is
        necessary to add the polyfill es-module-shims.js -->
    <script async src="https://cdn.jsdelivr.net/npm/[email protected]/dist/es-module-shims.min.js"></script>

    <script type="importmap">
        {
            "imports": {
                "box2d-wasm": "https://unpkg.com/[email protected]/dist/es/Box2D.js",
                "gl-matrix": "https://cdn.jsdelivr.net/npm/[email protected]/+esm"
            }
        }
    </script>

    <script type="module">
        import { glMatrix, mat4, vec3 } from "gl-matrix";

        console.log(glMatrix.toRadian(45));

        const v = vec3.fromValues(1, 2, 3);
        console.log(v);

        const m = mat4.create();
        console.log(m);
    </script>

    <!-- <script type="module" src="./js/index.js"></script> -->