raycastFirst not working

Help & Support
1

Hello ,
Im using superplat viewer git repo and modifying it according to my need.

I added cubes in the scene , and if i click on the 3d cube i want the camera to move to the location of the cube (To debug im printing the cube name)
I Added ammo.js , still its throwing reference error

Cannot read properties of undefined (reading ‘setValue’)
at RigidBodyComponentSystem.raycastFirst

click event

// Add click handler (once loaded)
        app.mouse.on(EVENT_MOUSEDOWN, (event) => {
            console.log("Mouse clicked at:", event.x, event.y);  // ✅

            const cameraEntity = app.root.findByName('camera');           
            if (!cameraEntity) return;

            const camera = cameraEntity.camera;
            const from = camera.screenToWorld(event.x, event.y, camera.nearClip);            
            const to = camera.screenToWorld(event.x, event.y, camera.farClip);
            console.log("FROM POSITION", from);
            console.log("TO POSITION", to);
            const body = app.root.findByName('cube333');
           

            const result = app.systems.rigidbody.raycastFirst(from, to);
            if (result && result.entity) {
                console.log("Clicked entity:", result.entity.name);
                if (events) events.fire('inputEvent', 'glbClick', result.entity);
            }
        });

ERROR


Cannot read properties of undefined (reading ‘setValue’)
at RigidBodyComponentSystem.raycastFirst
  • ammo.js added in line 748

index.js

my git repo

Please help , my aim is to click on 3d objects from scene that has both gaussian splat and 3d mesh , upon clicking 3d mesh my camera will be nagivating to the location of mesh

2

The SuperSplat Viewer does not load the Ammo.js physics engine. Without it, PlayCanvas physics-related APIs (RigidBodyComponent, CollisionComponent, etc) will not work.

You say you added Ammo, but that error is exactly what I would expect if Ammo is not loaded correctly. So I’m assuming you have a problem with when you’re loading it. You need to make sure the module is loaded before your application is created.

3

Hello Will,
Thanks for your reply.
I have loaded the Ammo.js module before creating the app and verified it by printing a log still getting same error, please let me know if I have to load the module differently, I manually downloaded the module and added it in src/lib/ammo and referenced it like below

document.addEventListener(‘DOMContentLoaded’, async () => {

await new Promise((resolve) => {
    WasmModule.setConfig('Ammo', {
        glueUrl: '/lib/ammo/ammo.wasm.js',
        wasmUrl: '/lib/ammo/ammo.wasm.wasm',
        fallbackUrl: '/lib/ammo/ammo.js'
    });

    WasmModule.getInstance('Ammo', () => {
        console.log("✅ Ammo.js loaded and initialized.");
        resolve();
    });
});


const appElement = document.querySelector('pc-app'); // CREATOR
const app = (await appElement.ready()).app;


loadContent(appElement);

Important thing to notice is console.log(body.collision.height) prints 3 which means the ammo.js is loaded before application was created

It prints the Module loaded and initialized but
When I create an entity and add rigid body and print (box.rigidbody.body) it returns null

PS : im new to java script and play canva , switching from unreal engine

4

Important thing to notice is console.log(body.collision.height) prints 3 which means the ammo.js is loaded

No, it does not. It simply logs out a collision component property of the engine. It doesn’t mean that Ammo is loaded. You can verify if Ammo is loaded by creating an Ammo object and read its contents, e.g.:

const vec = new Ammo.btVector3(1, 1, 1);
console.log(vec.x()); // should print 1

Perhaps you need to add Ammo to global window context, so that the engine could use it?

5

Hello Lexxik,
The above snippet successfully prints 1 in the console
And if I console.log(Ammo);
It prints this

image
image3024×4032 7.51 MB

6

Perhaps you need to add Ammo to global window context, so that the engine could use it?

7

Hello @LeXXik ,
I moved the ammo initialization of very beginning of index.js still same errors ,
I’m not sure how to move the module to global window since I I’m new to play canva and js, can you please share a example or a link to example to have ammo in global window