[SOLVED] How to use PlayCanvas with importmap

Help & Support
1

Hello, guys! What should I change in my example:

Error message: importmap is invalid, please check your importmap script. It must be a valid JSON.

Sandbox: PlayCanvas as ESM with importmap

    <!-- 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://unpkg.com/es-module-shims@1.7.3/dist/es-module-shims.js"></script>

    <script type="importmap">
        {
            "imports": {
                "playcanvas-mjs": "https://unpkg.com/playcanvas@1.64.4/build/playcanvas.mjs",
                "playcanvas-mjs/": "https://unpkg.com/playcanvas@1.64.4/build/playcanvas.mjs/",
            }
        }
    </script>

    <script type="module">
        import { Application } from "playcanvas-mjs/framework/application.js";

        console.log(Application);
    </script>
2

importmap is invalid, please check your importmap script. It must be a valid JSON.
This error was solved by deleting the second comma here:

            "imports": {
                "playcanvas-mjs": "https://unpkg.com/playcanvas@1.64.4/build/playcanvas.mjs",
                "playcanvas-mjs/": "https://unpkg.com/playcanvas@1.64.4/build/playcanvas.mjs/",
            }

Now I see these errors:
image

3

The answer is that it is the unpkg issue. Only they can solve this problem. Or I can host the PlayCode files on some hosting.

4

I created an issue for unpkg: unpkg blocks the PlayCanvas engine files · Issue #369 · mjackson/unpkg · GitHub

5

Thanks a lot for @yaustar from the PlayCanvas discord channel: Discord

    <!-- 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://unpkg.com/es-module-shims@1.7.3/dist/es-module-shims.js"></script>

    <script type="importmap">
        {
            "imports": {
                "playcanvas-mjs": "https://cdn.jsdelivr.net/npm/playcanvas@1.64.4/+esm"
            }
        }
    </script>

    <script type="module">
        import { Application } from "playcanvas-mjs";
        import { FILLMODE_FILL_WINDOW, RESOLUTION_AUTO} from "playcanvas-mjs"
        import { Entity } from "playcanvas-mjs"
        import { Color } from "playcanvas-mjs"

        console.log(Application);
1 Like
6

I moved the example above to the playgrounds that support importmap and ES6 modules:

Live demo on GigHub Pages

GitHub repository. This repository contains my step-by-step instruction in README that shows how to build it with Rollup for debug and release modes. The release mode uses uglify-js. I use importmap to make bundles with Rollup. This allows me to simply copy files to Playgrounds and save space on my laptop because I don’t have to install NPM packages for every example.

rotating-cube-with-playcanvas-and-js

index.html

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>Rotating cube with PlayCanvas and JavaScript</title>
</head>

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

    <!-- 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://unpkg.com/es-module-shims@1.7.3/dist/es-module-shims.js"></script>

    <script type="importmap">
        {
            "imports": {
                "playcanvas-mjs": "https://cdn.jsdelivr.net/npm/playcanvas@1.64.4/+esm"
            }
        }
    </script>

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

</html>

index.js

import { Application } from "playcanvas-mjs";
import { FILLMODE_FILL_WINDOW, RESOLUTION_AUTO } from "playcanvas-mjs"
import { Entity } from "playcanvas-mjs"
import { Color } from "playcanvas-mjs"

const canvas = document.getElementById("renderCanvas");

const app = new Application(canvas);

// Fill the available space at full resolution
// app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
// app.setCanvasResolution(RESOLUTION_AUTO);

// Ensure canvas is resized when window changes size
window.addEventListener("resize", () => app.resizeCanvas());

// Create box entity
const box = new Entity("cube");
box.addComponent("model", {
    type: "box"
});
app.root.addChild(box);

// Create camera entity
const camera = new Entity("camera");
camera.addComponent("camera", {
    clearColor: new Color(0.1, 0.1, 0.1)
});
app.root.addChild(camera);
camera.setPosition(0, 0, 3);

// Create directional light entity
const light = new Entity("light");
light.addComponent("light");
app.root.addChild(light);
light.setEulerAngles(45, 0, 0);

// Rotate the box according to the delta time since the last frame
app.on("update", dt => box.rotate(10 * dt, 20 * dt, 30 * dt));

app.start();
1 Like
7

Plunker has the issue: PlayCanvas demo not scaling to requested size in Preview · Issue #599 · plnkr/feedback · GitHub

8

The issue was fixed.

1 Like