Havok issue with vite and vue3

Questions
1

Hi,
When trying The in browser Havok example
and opening it in my browser, the animation launches without issue.

Now, I use Vue3 and vite.js and the issue I have is the following:

TypeError: can't assign to property "ready" on true: not an object
because of the line const hk = new HavokPlugin(true, havokInstance);

The code:

import HavokPhysics from "@babylonjs/havok";
import HavokPlugin from "@babylonjs/havok";
import { Engine, Scene, FreeCamera, Vector3, HemisphericLight, MeshBuilder, PhysicsAggregate, PhysicsShapeType } from "@babylonjs/core";

async function create_scene(canvas: HTMLCanvasElement) {
        if (!globalThis.proj) {
                globalThis.proj = {};
        }
        globalThis.proj.engine = new Engine(canvas, true);
        // This creates a basic Babylon globalThis.proj.scene object (non-mesh)

        globalThis.proj.scene = new Scene(globalThis.proj.engine);

        // This creates and positions a free camera (non-mesh)
        const camera = new FreeCamera("camera1", new Vector3(0, 5, -10), globalThis.proj.scene);

        // This targets the camera to globalThis.proj.scene origin
        camera.setTarget(Vector3.Zero());

        // This attaches the camera to the canvas
        camera.attachControl(canvas, true);

        // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
        const light = new HemisphericLight("light", new Vector3(0, 1, 0), globalThis.proj.scene);

        // Default intensity is 1. Let's dim the light a small amount
        light.intensity = 0.7;

        // Our built-in 'sphere' shape.
        const sphere = MeshBuilder.CreateSphere("sphere", { diameter: 2, segments: 32 }, globalThis.proj.scene);

        // Move the sphere upward at 4 units
        sphere.position.y = 4;

        // Our built-in 'ground' shape.
        const ground = MeshBuilder.CreateGround("ground", { width: 10, height: 10 }, globalThis.proj.scene);

        // initialize plugin
        const havokInstance = await HavokPhysics();

        // pass the engine to the plugin
        const hk = new HavokPlugin(true, havokInstance); <- here is the error

        // enable physics in the globalThis.proj.scene with a gravity
        globalThis.proj.scene.enablePhysics(new Vector3(0, -9.8, 0), hk);

        // Create a sphere shape and the associated body. Size will be determined automatically.
        const sphereAggregate = new PhysicsAggregate(sphere, PhysicsShapeType.SPHERE, { mass: 1, restitution: 0.75 }, globalThis.proj.scene);

        // Create a static box shape.
        const groundAggregate = new PhysicsAggregate(ground, PhysicsShapeType.BOX, { mass: 0 }, globalThis.proj.scene);
}

My package.json is like so:

{
  "dependencies": {
    "@babylonjs/core": "^6.10.0",
    "@babylonjs/havok": "^1.1.2",
    "@babylonjs/loaders": "^6.10.0",
    "@babylonjs/post-processes": "^6.10.0",
    "@vitejs/plugin-vue": "^4.2.3",
    "vite": "^4.0.0",
    "vue": "^3.2.45",
    "vue-i18n": "^9.2.2",
    "vue-router": "^4.1.6"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 9999",
  }
}

I also had to link the esm version of the Havoc plugin in node_modules/.vite/deps to remove some errors.

But still, the error above remains.

Do you have an idea where the issue is ?
Thank you

2

And having:

new HavokPlugin(undefined, havokInstance);
leads to the error:
Error: No Physics Engine available.

:expressionless:

And for the record, everything else in @babylon works fine, the scene renders fine.
It is just the havok plugin that doesn’t want to set itself up properly…

3

OK solved:

The issue was with my imports:

Was:
import { Engine, Scene, … } from “@babylonjs/core”;

import HavokPhysics from “@babylonjs/havok”;
import HavokPlugin from “@babylonjs/HavokPlugin”;

Corrected:
import { HavokPlugin, Engine, Scene, … } from “@babylonjs/core”;
import HavokPhysics from “@babylonjs/havok”;

I imported the plugin in “@babylonjs/HavokPlugin”;

which is a non sense…

Nice :slight_smile: