# When adding Physijs to my threejs, it brakes my rendering

**URL:** <https://discourse.threejs.org/t/when-adding-physijs-to-my-threejs-it-brakes-my-rendering/25289>\
**Category:** Questions\
**Tags:** physijs\
**Created:** [April 12, 2021, 3:43pm UTC](https://discourse.threejs.org/t/when-adding-physijs-to-my-threejs-it-brakes-my-rendering/25289 "2021-04-12T15:43:14Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![MdR](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mdr/32/17484_2.png) [@MdR](https://discourse.threejs.org/u/MdR)\
**Post date:** [April 12, 2021, 3:43pm UTC](https://discourse.threejs.org/t/when-adding-physijs-to-my-threejs-it-brakes-my-rendering/25289/1 "2021-04-12T15:43:14Z")

</div>

I have the following fiddle, where you can move a cube using the arrow keys: [Three.js base - JSFiddle - Code Playground](https://jsfiddle.net/mauricederegt/n30r4jLh/105/)

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](http://gamingJS.com/ammo.js)’;  
> Physijs.scripts.worker = ‘[http://gamingJS.com/physijs\_worker.js](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](https://jsfiddle.net/mauricederegt/n30r4jLh/109/)

What am I missing here?

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yannick/32/8539_2.png) [@yannick](https://discourse.threejs.org/u/yannick)\
**Post date:** [April 12, 2021, 4:21pm UTC](https://discourse.threejs.org/t/when-adding-physijs-to-my-threejs-it-brakes-my-rendering/25289/2 "2021-04-12T16:21:29Z")

</div>

Never used Physijs before. But you could try [enable3d](https://discourse.threejs.org/t/new-physics-plugin-for-three-js-using-ammo-js/13131), which uses ammo.js as well.

---

<div class="post-metadata">

**Author:** ![MdR](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mdr/32/17484_2.png) [@MdR](https://discourse.threejs.org/u/MdR)\
**Post date:** [April 15, 2021, 9:39pm UTC](https://discourse.threejs.org/t/when-adding-physijs-to-my-threejs-it-brakes-my-rendering/25289/3 "2021-04-15T21:39:58Z")

</div>

Ok, I am willing to try something new. How do I implement this with my current code ([https://jsfiddle.net/mauricederegt/n30r4jLh/105/](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 ☹

Any help is appreciated

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yannick/32/8539_2.png) [@yannick](https://discourse.threejs.org/u/yannick)\
**Post date:** [April 15, 2021, 9:59pm UTC](https://discourse.threejs.org/t/when-adding-physijs-to-my-threejs-it-brakes-my-rendering/25289/4 "2021-04-15T21:59:26Z")

</div>

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

```javascript
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](https://github.com/enable3d/enable3d-website/blob/a264416dced278429e8d489d50f1340c4ac99120/src/examples/native-three-with-physics.html) should help.

---

<div class="post-metadata">

**Author:** ![MdR](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mdr/32/17484_2.png) [@MdR](https://discourse.threejs.org/u/MdR)\
**Post date:** [April 16, 2021, 2:37pm UTC](https://discourse.threejs.org/t/when-adding-physijs-to-my-threejs-it-brakes-my-rendering/25289/5 "2021-04-16T14:37:53Z")

</div>

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/](https://jsfiddle.net/mauricederegt/n30r4jLh/117/)

---

<div class="post-metadata">

**Author:** ![Umbawa\_Sarosong](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/umbawa_sarosong/32/30107_2.png) [@Umbawa\_Sarosong](https://discourse.threejs.org/u/Umbawa_Sarosong)\
**Post date:** [January 18, 2026, 2:00am UTC](https://discourse.threejs.org/t/when-adding-physijs-to-my-threejs-it-brakes-my-rendering/25289/6 "2026-01-18T02:00:04Z")

</div>

place the physics in a worker so it process independently with three.js thread, this method u have smooth rendering unaffected by physics process.