Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cannon ES Debugger. WARNING: Multiple instances of Three.js being imported #39

Open
8Observer8 opened this issue Jun 15, 2023 · 3 comments
Open

Cannon ES Debugger. WARNING: Multiple instances of Three.js being imported #39

8Observer8 opened this issue Jun 15, 2023 · 3 comments

Comments

@8Observer8
Copy link

This warning appears when I add cannon-es-debugger:

image

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Example</title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>

<body>
    <!-- Since import maps are not yet supported by all browsers, it is
        necessary to add the polyfill es-module-shims.js -->
    <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>

    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/[email protected]/build/three.module.min.js",
                "orbit-controls": "https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js",
                "cannon-es": "https://cdn.jsdelivr.net/npm/[email protected]/+esm",
                "cannon-es-debugger": "https://cdn.jsdelivr.net/npm/[email protected]/+esm"
            }
        }
    </script>

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

</html>

index.js

import * as THREE from "three";
import { OrbitControls } from "orbit-controls";
import * as CANNON from "cannon-es";
import CannonDebugger from "cannon-es-debugger";

async function init() {
    const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera(50,
        window.innerWidth / window.innerHeight, 0.1, 500);
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setClearColor(0x079bb0, 1);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    const orbitControls = new OrbitControls(camera, renderer.domElement);
    orbitControls.target = new THREE.Vector3(0, 0, 0);

    const world = new CANNON.World({ gravity: new CANNON.Vec3(0, 0, 0) });
    const cannonDebugger = new CannonDebugger(scene, world);

    let dt;
    const clock = new THREE.Clock();

    window.onresize = () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    };

    function render() {
        requestAnimationFrame(render);
        orbitControls.update();
        dt = clock.getDelta();
        world.step(dt);
        cannonDebugger.update();
        renderer.render(scene, camera);
    }
    render();
}

init();
@8Observer8
Copy link
Author

But it works without the warning when I import from unpkg:

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

    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/[email protected]/build/three.module.min.js",
                "collada-loader": "https://unpkg.com/[email protected]/examples/jsm/loaders/ColladaLoader.js",
                "orbit-controls": "https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js",
                "cannon-es": "https://unpkg.com/[email protected]/dist/cannon-es.js",
                "cannon-es-debugger": "https://unpkg.com/[email protected]/dist/cannon-es-debugger.js"
            }
        }
    </script>

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

@8Observer8
Copy link
Author

It works as expected with unpkg:

image

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Example</title>
    <!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
    <style>
        body {
            margin: 0;
        }
    </style>
</head>

<body>
    <!-- Since import maps are not yet supported by all browsers, it is
        necessary to add the polyfill es-module-shims.js -->
    <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>

    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/[email protected]/build/three.module.min.js",
                "collada-loader": "https://unpkg.com/[email protected]/examples/jsm/loaders/ColladaLoader.js",
                "orbit-controls": "https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js",
                "cannon-es": "https://unpkg.com/[email protected]/dist/cannon-es.js",
                "cannon-es-debugger": "https://unpkg.com/[email protected]/dist/cannon-es-debugger.js"
            }
        }
    </script>

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

</html>

index.js

import * as THREE from "three";
import { ColladaLoader } from "collada-loader";
import { OrbitControls } from "orbit-controls";
import * as CANNON from "cannon-es";
import CannonDebugger from "cannon-es-debugger";

async function init() {
    const modelLoader = new ColladaLoader();
    const textureLoader = new THREE.TextureLoader();
    const scene = new THREE.Scene();

    const ground = await modelLoader.loadAsync("./models/ground.dae");
    const groundTexture = await textureLoader.loadAsync("./models/ground.png");
    ground.scene.children[0].material.map = groundTexture;
    scene.add(ground.scene);

    const camera = new THREE.PerspectiveCamera(50,
        window.innerWidth / window.innerHeight, 0.1, 500);
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setClearColor(0x079bb0, 1);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    camera.position.y = 2;
    camera.position.z = 5;

    const orbitControls = new OrbitControls(camera, renderer.domElement);
    orbitControls.target = new THREE.Vector3(0, 0, 0);

    const ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
    scene.add(ambientLight);
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    scene.add(directionalLight);

    const world = new CANNON.World({ gravity: new CANNON.Vec3(0, 0, 0) });
    const cannonDebugger = new CannonDebugger(scene, world);

    const groundShape = new CANNON.Box(new CANNON.Vec3(1, 1, 1));
    const groundBody = new CANNON.Body({ mass: 0 });
    groundBody.addShape(groundShape);
    world.addBody(groundBody);

    let dt;
    const clock = new THREE.Clock();

    window.onresize = () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    };

    function render() {
        requestAnimationFrame(render);
        orbitControls.update();
        dt = clock.getDelta();
        world.step(dt);
        cannonDebugger.update();
        renderer.render(scene, camera);
    }
    render();
}

init();

@wildy13
Copy link

wildy13 commented Sep 19, 2024

It works as expected with unpkg:

image

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Example</title>
    <!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
    <style>
        body {
            margin: 0;
        }
    </style>
</head>

<body>
    <!-- Since import maps are not yet supported by all browsers, it is
        necessary to add the polyfill es-module-shims.js -->
    <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>

    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/[email protected]/build/three.module.min.js",
                "collada-loader": "https://unpkg.com/[email protected]/examples/jsm/loaders/ColladaLoader.js",
                "orbit-controls": "https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js",
                "cannon-es": "https://unpkg.com/[email protected]/dist/cannon-es.js",
                "cannon-es-debugger": "https://unpkg.com/[email protected]/dist/cannon-es-debugger.js"
            }
        }
    </script>

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

</html>

index.js

import * as THREE from "three";
import { ColladaLoader } from "collada-loader";
import { OrbitControls } from "orbit-controls";
import * as CANNON from "cannon-es";
import CannonDebugger from "cannon-es-debugger";

async function init() {
    const modelLoader = new ColladaLoader();
    const textureLoader = new THREE.TextureLoader();
    const scene = new THREE.Scene();

    const ground = await modelLoader.loadAsync("./models/ground.dae");
    const groundTexture = await textureLoader.loadAsync("./models/ground.png");
    ground.scene.children[0].material.map = groundTexture;
    scene.add(ground.scene);

    const camera = new THREE.PerspectiveCamera(50,
        window.innerWidth / window.innerHeight, 0.1, 500);
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setClearColor(0x079bb0, 1);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    camera.position.y = 2;
    camera.position.z = 5;

    const orbitControls = new OrbitControls(camera, renderer.domElement);
    orbitControls.target = new THREE.Vector3(0, 0, 0);

    const ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
    scene.add(ambientLight);
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    scene.add(directionalLight);

    const world = new CANNON.World({ gravity: new CANNON.Vec3(0, 0, 0) });
    const cannonDebugger = new CannonDebugger(scene, world);

    const groundShape = new CANNON.Box(new CANNON.Vec3(1, 1, 1));
    const groundBody = new CANNON.Body({ mass: 0 });
    groundBody.addShape(groundShape);
    world.addBody(groundBody);

    let dt;
    const clock = new THREE.Clock();

    window.onresize = () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    };

    function render() {
        requestAnimationFrame(render);
        orbitControls.update();
        dt = clock.getDelta();
        world.step(dt);
        cannonDebugger.update();
        renderer.render(scene, camera);
    }
    render();
}

init();

do you know how to enable cannon-es-debugger because ive gui, when its true cannon debugger will active, if its not, its not active

        this.gui = new GUI();

        const controls = {
            isColliderDebugger: this.isColliderDebugger
        };

        this.gui.add(controls, 'isColliderDebugger').name('Collider Debugger').onChange((value) => {
            this.isColliderDebugger = value;
            if (this.isColliderDebugger) {
                this.enableColliderDebugger();
            } else {
                this.disableColliderDebugger();
            }
        });

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@8Observer8 @wildy13