javascript 我不能在codepen上使用matter js

093gszye  于 2023-02-21  发布在  Java
关注(0)|答案(4)|浏览(143)

代码笔问题js错误

您好,我正在尝试使用codepen上的Matter JS,我第一次收到变量Matter未定义的错误,我已经修复了这个问题,但又出现了另一个错误。
代码预览:

import * as Matter from:
"https://cdn.skypack.dev/matter-js@0.16.0";
let engine = Matter.engine.create();
let render = Matter.render.create({
  element: document.body,
  engine:engine
});
// and some more code...

预览:https://codepen.io/Eslare/pen/NWRQXpx
错误:
TypeError:undefined不是一个对象(评估“Matter.engine. create”)

brtdzjyr

brtdzjyr1#

不要在你的JS部分导入它,只要转到设置并将其作为外部脚本添加即可。

wkyowqbh

wkyowqbh2#

这是你钢笔的改良版:https://codepen.io/sessaidi/pen/abmeEbV,则需要添加外部资源:https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.14.2/matter.min.js

2jcobegt

2jcobegt3#

下面介绍如何正确地从Skypack.dev导入它

import { default as Matter } from 'https://cdn.skypack.dev/matter-js@^0.17.1';

https://codepen.io/codepen0980/pen/YzNoxvd?editors=0010

dwbf0jvd

dwbf0jvd4#

您可以在其他沙箱上使用importmap,而不是CodePan:

index.html

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Example</title>
</head>

<body style="caret-color: transparent;">
    <canvas id="renderCanvas" width="400" height="400"></canvas>

    <!-- Since import maps are not yet supported by all browsers, it is
        necessary to add the polyfill es-module-shims.js
        Source: https://threejs.org/docs/index.html#manual/en/introduction/Installation -->
    <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
    <script type="importmap">
        {
            "imports": {
                "gl-matrix": "https://cdn.jsdelivr.net/npm/gl-matrix@3.4.3/+esm",
                "matter-js": "https://cdn.jsdelivr.net/npm/matter-js@0.19.0/+esm"
            }
        }
    </script>

    <script type="module" src="js/main.js"></script>
</body>

</html>

js/main.js

import { mat4, vec3 } from "gl-matrix";
import { default as Matter } from "matter-js";

console.log(`Matter.js version: ${Matter.version}`);

相关问题