# Physics body falling down after scaling

**URL:** <https://discourse.threejs.org/t/physics-body-falling-down-after-scaling/44771>\
**Category:** Questions\
**Created:** [November 16, 2022, 10:27am UTC](https://discourse.threejs.org/t/physics-body-falling-down-after-scaling/44771 "2022-11-16T10:27:41Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [November 16, 2022, 10:27am UTC](https://discourse.threejs.org/t/physics-body-falling-down-after-scaling/44771/1 "2022-11-16T10:27:41Z")

</div>

I am scaling my canon body with a transform controller and it scales fine.

When I make mass 0, then I can see it scale perfectly.

and when mass is greater than 0, and the body is in the floor and I scale the physics body, it is in this state.

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/8/58854e112ee81bf81d5a42609efa820abc5916d6.jpeg)

half of the body is under the floor which is also a physics body created by this:

```javascript
    const planeShape = new CANNON.Plane()
    const planeBody = new CANNON.Body({ mass: 0 })
    planeBody.addShape(planeShape)
    planeBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2)
    world.addBody(planeBody)

```

and for this physics body, first i am creating a box physics body and scaling it by transform controller

for scaling first i calculate the new value of `halfExtents` it will have after scaling and update that by

```javascript
function scalePhysicsBody(movingBody, x, y, z) {
    let currentShape = movingBody.shapes[0]
    movingBody.removeShape(currentShape)
    if (myShape == 'SPHERE') {
        currentShape.radius = Math.max(x, y, z)
        movingBody.addShape(currentShape)
    } else if (myShape == 'BOX') {
        currentShape.halfExtents.set(x / 2, y / 2, z / 2)
        movingBody.addShape(currentShape)
    }
    return movingBody
}

```

before scaling or doing anything, it need to be selected and moving body is the selected physics body which need to be scaled.

after i add shape to the body, do i need to call anything to update it ?

I am sorry if i am not providing much detail, i am just trying to give required detail so that it wont be clumsy.

I am afraid if i am able to articulate the situation, this is demo if it help !!

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/e/8e8f9796ba9e32570edc7162d1110f62be0fabb9.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/e/8e8f9796ba9e32570edc7162d1110f62be0fabb9.mp4)

Do i need to add any other code?

This is scaling but mesh fall down the plane after scaling !!

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [November 16, 2022, 1:44pm UTC](https://discourse.threejs.org/t/physics-body-falling-down-after-scaling/44771/2 "2022-11-16T13:44:27Z")

</div>

You are entering a whole new world of extra problems to solve.

Easiest thing to do is to create a new shape based on the new scale of the mesh and replace the shape of the body.

JSFiddle : [Cannon Modify Scale](https://jsfiddle.net/seanwasere/vq67c15y/) (See lines 85-92)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/1/01e04caefd28f4a46b2fe907d6ae88f4fdfa32b9.png)

---

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [November 16, 2022, 9:27pm UTC](https://discourse.threejs.org/t/physics-body-falling-down-after-scaling/44771/3 "2022-11-16T21:27:50Z")

</div>

I guess that’s what I am doing right?

```javascript
function scalePhysicsBody(movingBody, x, y, z) {
    let currentShape = movingBody.shapes[0]
    movingBody.removeShape(currentShape)
    if (myShape == 'SPHERE') {
        currentShape.radius = Math.max(x, y, z)
        movingBody.addShape(currentShape)
    } else if (myShape == 'BOX') {
        currentShape.halfExtents.set(x / 2, y / 2, z / 2)
        movingBody.addShape(currentShape)
    }
    return movingBody
}

```

this is a function I am using where I pass a body to be scaled and x, y, and z are the dimension after scaling is done.

> <https://github.com/pravinpoudel/building-annotation/blob/b01e436fe0ad8fde87eaffe91fb95f00e060fd7e/src/client/utils.ts#L183>

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [November 16, 2022, 10:02pm UTC](https://discourse.threejs.org/t/physics-body-falling-down-after-scaling/44771/4 "2022-11-16T22:02:25Z")

</div>

you are not doing that.  
you are detaching the shape object from its parent, changing `halfextents`, then reattaching the same object back again.  
In your case, the detach (removeShape), and reattach (addShape) is doing nothing.  
Also, your line `return movingBody` is also likely pointless, since `movingBody` in your function is a reference to the original object. Any changes to the reference affect the original object that was passed into the function anyway.

Also look at my example. and you can see that it works.

Why doesn’t yours work, I don’t really know. Maybe you can find some documentation on the cannonjs repository or related websites about how to properly scale a cannon body or shape.

---

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [November 16, 2022, 10:50pm UTC](https://discourse.threejs.org/t/physics-body-falling-down-after-scaling/44771/5 "2022-11-16T22:50:58Z")

</div>

oh god, I never doubted that because I learned to do that from the developer of the cannon himself.

[https://github.com/schteppe/cannon.js/issues/270](https://github.com/schteppe/cannon.js/issues/270)

Right now I changed it to:

```javascript
function scalePhysicsBody(movingBody, x, y, z) {
    let currentShape = movingBody.shapes[0]
    movingBody.removeShape(currentShape)
    if (myShape == 'SPHERE') {
        let newradius = Math.max(x, y, z)
        movingBody.addShape(new CANNON.Sphere(newradius))
    } else if (myShape == 'BOX') {
        movingBody.addShape(new CANNON.Box(new CANNON.Vec3(x / 2, y / 2, z / 2)))
    }
}

```

you are right, I don’t need that return !!  
I added that to the console after scaling is done and forgot to remove it.

I guess it is working now:

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/5/a5061ac6e6b05f6820aead6ff7f3f60959b87818.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/5/a5061ac6e6b05f6820aead6ff7f3f60959b87818.mp4)

Thank you again. I was so scared because i was not able to understand what is wrong and you saw the wrong. Thank you

you are awesome !!!

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [November 16, 2022, 10:56pm UTC](https://discourse.threejs.org/t/physics-body-falling-down-after-scaling/44771/6 "2022-11-16T22:56:26Z")

</div>

much better.

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [November 17, 2022, 9:18am UTC](https://discourse.threejs.org/t/physics-body-falling-down-after-scaling/44771/7 "2022-11-17T09:18:52Z")

</div>

I did some more experimenting and improved my version so that it no longer creates any new objects in the `transformControls` change event.  
JSFiddle : [Scale Cannon Body](https://jsfiddle.net/seanwasere/vq67c15y/) (see lines 83-92)

```javascript
transformControls.addEventListener('change', function() {
 cubeShape.halfExtents.set(
    Math.abs(cubeMesh.scale.x / 2),
    Math.abs(cubeMesh.scale.y / 2),
    Math.abs(cubeMesh.scale.z / 2))
  cubeShape.updateConvexPolyhedronRepresentation()
  cubeBody.updateBoundingRadius();
})

```

![bounce](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/7/578b30519a87dc86aa681993fea555eaecf47d8a.gif)

---

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [November 17, 2022, 9:30am UTC](https://discourse.threejs.org/t/physics-body-falling-down-after-scaling/44771/8 "2022-11-17T09:30:54Z")

</div>

awesome !! can i ask why did you change the attribute rather than creating new shape because though it was not working, the author of cannon es suggested that making a new shape is better than changing it and computing everything again.

---

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [November 17, 2022, 9:39am UTC](https://discourse.threejs.org/t/physics-body-falling-down-after-scaling/44771/9 "2022-11-17T09:39:54Z")

</div>

and one more issue I am having with transform control is that it looks like its axis is not aligned with the local mesh so I don’t know the exact reason but translation is a bit painful in my case.

I will upload video showcasing this with you.

Yes, this is the demo

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/b/9b91db383e1c5c1f1d63b02bc136d4fb4022e5f8.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/b/9b91db383e1c5c1f1d63b02bc136d4fb4022e5f8.mp4)

This the trim of the video i was recording to make a demo but positioning became so painful so avoided the idea !!

at 0:31 you can see that the direction of translation is not horizontal or vertical !!!

Oh, I was doing it wrong, I tried it earlier but it was not working and I never tried that again but it worked now. May be webpack did not reload the page.

I did set

transformControl.space = “local”

and when I rotated it, its translation axis is aligned in the vertical and horizontal directions.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/a/0a051f14d10efbe714a76fcdde8e851a2f14d6d8.jpeg)

awesome !!

Bravo

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [November 17, 2022, 10:05am UTC](https://discourse.threejs.org/t/physics-body-falling-down-after-scaling/44771/10 "2022-11-17T10:05:26Z")

</div>

> [@Pravin\_Poudel](#):
>
> why did you change the attribute rather than creating new shape

I you look at the source code of what happens when you create a new `cannon.shape` based on a `cannon.box`, it’s about 20 lines of many things happening.  
I cherry picked the bits I actually needed.  
This will run faster and reduce the chances of memory filling up with unused left-over objects.  
I didn’t have any memory or speed issues anyway, since my example was very minimal, but this way is better.

---

<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:** [November 17, 2022, 10:48am UTC](https://discourse.threejs.org/t/physics-body-falling-down-after-scaling/44771/11 "2022-11-17T10:48:06Z")

</div>

can u share with us the link of ur [faster version cannon-es](https://theneoverse.web.app/#serini&&serini), the cannon-es is painfully slow

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [November 17, 2022, 10:55am UTC](https://discourse.threejs.org/t/physics-body-falling-down-after-scaling/44771/12 "2022-11-17T10:55:47Z")

</div>

see my earlier comments. It was already updated. Link is in the comments.

---

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [November 17, 2022, 11:49pm UTC](https://discourse.threejs.org/t/physics-body-falling-down-after-scaling/44771/13 "2022-11-17T23:49:13Z")

</div>

what? is cannon-es have an issue with its speed?

I am curious to know.

---

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [November 18, 2022, 2:07am UTC](https://discourse.threejs.org/t/physics-body-falling-down-after-scaling/44771/14 "2022-11-18T02:07:26Z")

</div>

your solution looks smarter than adding a new shape to the body.

am just curious to know do we need to call any of the other functions inside the shape just to update attributes like the bounding box.

This is my new function ( thanks to you)

```javascript

function scalePhysicsBody(movingBody, x, y, z) {
    let currentShape = movingBody.shapes[0]
    // movingBody.removeShape(currentShape)
    if (myShape == 'SPHERE') {
        let newradius = Math.max(x, y, z)
        currentShape.radius = newradius
        currentShape.updateBoundingSphereRadius()
        movingBody.updateBoundingRadius()
    } else if (myShape == 'BOX') {
        currentShape.halfExtents.set(Math.abs(x / 2), Math.abs(y / 2), Math.abs(z / 2))
        currentShape.updateConvexPolyhedronRepresentation()
        movingBody.updateBoundingRadius()
    }
}

```

but in the sphere, I have one problem

When I scale the sphere and stop dragging that axis and again start to scale, I can’t scale down it to smaller than its starting size.

I mean that I can only scale up not scale down the sphere.

But I can scale down the box.

I will upload a video for this but I did not make it clear.

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [November 18, 2022, 8:37am UTC](https://discourse.threejs.org/t/physics-body-falling-down-after-scaling/44771/15 "2022-11-18T08:37:48Z")

</div>

I can see that my box scaling works with the absolute minimum. Thats enough for me. It works, and I can verify it.  
With sphere, its more complicated. Thats why schteppe says it’s easier just to create new shapes. Save yourself the problems. Other cannon shapes are also much more difficult to scale after they’ve been created.

The reason why your spehere doesn’t shrink is because you are using `Math.max(x,y,z)`. It will always use the largest value from the set.

---

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [November 18, 2022, 9:13am UTC](https://discourse.threejs.org/t/physics-body-falling-down-after-scaling/44771/16 "2022-11-18T09:13:20Z")

</div>

Thank you, now it’s working !!

My now code is:

```javascript

function scalePhysicsBody(movingBody, x, y, z) {
    let currentShape = movingBody.shapes[0]
    if (myShape == 'SPHERE') {
        let newradius = x
        if (x != y && x == z) {
            newradius = y
        } else if (x == y && y != z) {
            newradius = z
        }
        currentShape.radius = newradius
        currentShape.updateBoundingSphereRadius()
        movingBody.updateBoundingRadius()
    } else if (myShape == 'BOX') {
        currentShape.halfExtents.set(Math.abs(x / 2), Math.abs(y / 2), Math.abs(z / 2))
        currentShape.updateConvexPolyhedronRepresentation()
        movingBody.updateBoundingRadius()
    }
}

```

what do you suggest for the sphere, this code is good enough, or make a new shape?  
do you believe that making a new shape is risk-free?  
I don’t know about the memory problem but if I create a new sphere in every scale which I believe is called 100 times while scaling that wireframe, does create a new shape every time, does those old shape stays in memory?

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [November 18, 2022, 9:32am UTC](https://discourse.threejs.org/t/physics-body-falling-down-after-scaling/44771/17 "2022-11-18T09:32:08Z")

</div>

When I was creating new objects, I didn’t have the memory problems. I presume the GC can figure it out, all by its little bidy little self, that an object is now orphaned, and it can be removed. But you can’t always be sure. Since I don’t really know what’s really happening inside Cannonjs without checking it with a fine-tooth comb. I’m not doing that. I just use the stats panel, with the MB window displayed, press things a million times, and I can see no problems. I am still using 2mb. This to me means that it’s really not worth worrying about.

You can spend hours and days micromanaging, panicking and losing sleep over the fragile GC. You can do this if you really want to. There are plenty of resources on the internet for people who feel they must approach their problems this way.

---

<div class="post-metadata">

**Author:** ![Pravin\_Poudel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pravin_poudel/32/33369_2.png) [@Pravin\_Poudel](https://discourse.threejs.org/u/Pravin_Poudel)\
**Post date:** [November 18, 2022, 9:44am UTC](https://discourse.threejs.org/t/physics-body-falling-down-after-scaling/44771/18 "2022-11-18T09:44:28Z")

</div>

Oh wow, i did not know there is stats panel to show MB, awesome.  
I will try it