When adding Physijs to my threejs, it brakes my rendering

Questions
1

I have the following fiddle, where you can move a cube using the arrow keys: Three.js base - JSFiddle - Code Playground

The goal is that you can move the cube on the grey plane but when you move it outside is should drop off. To do this I need to add some physics and I choose for Physijs. I already have added the call for it in the fiddle.

To implement this correctly I need to add and change some code and here the problems start. I also need ammo.js and a worker so in the javascript part of the fiddle I add:

// Physics
Physijs.scripts.ammo = ‘http://gamingJS.com/ammo.js’;
Physijs.scripts.worker = ‘http://gamingJS.com/physijs_worker.js’;

If you do this and press Run in the fiddle, the render will disappear. Okay perhaps this is because I need to do some more code changes, but at the moment the renderer is broken.

So I also added/changed:

scene = new Physijs.Scene();
scene.setGravity(new THREE.Vector3( 0, -50, 0 ));

Added to: function animate() {

scene.simulate(); // run physics

Changed for the cube and plane:

new Physijs.BoxMesh

As far as I can see these are the things I needed to change, but the renderer is still not showing anything. See this fiddle: Three.js base - JSFiddle - Code Playground

What am I missing here?

2

Never used Physijs before. But you could try enable3d, which uses ammo.js as well.

3

Ok, I am willing to try something new. How do I implement this with my current code (https://jsfiddle.net/mauricederegt/n30r4jLh/105/) and make it working? I have read the enabled3d documentation and looked at the examples, but I am not getting it to work myself :frowning:

Any help is appreciated

4

Once you have installed enable3d, you can easily add physics to your cube:

const cube = new THREE.Mesh(
  new THREE.BoxBufferGeometry(1, 1, 1),
  new THREE.MeshPhongMaterial({ color: "red" })
);
cube.position.set(5, 0, 0);
scene.add(cube);
physics.add.existing(cube); // <---

This example should help.

5

Thank you for your reply.

I did what you said:

  1. enabled enable3d

  2. Added: physics.add.existing(cube); // <— see line 40

This results in not rendering the cube and plane… Can jsfiddle be the problem or am I missing something else?

please see the applied changes: https://jsfiddle.net/mauricederegt/n30r4jLh/117/