☑ BoundingSphere position not updating

Hi, I started a project using the Tutorial for cardboard VR (https://playcanvas.com/project/406299/overview/tutorial-cardboard-vr), I put the three boxes inside a zone with a rotation script, and while the boxes move like they should, it seems like the BoundingSphere for the selection is not updating its position to follow them.

The bounding sphere stays on the first position the boxes appear, and it doesn’t move at all, you can still select the items as if the boxes were there, even when they’ve already moved. I tried modifying the selectable and selector-camera script, but I can’t find a way to make it work. Hope someone can help me.

Please, provide your question with link to your project.

1 Like

If you are moving the box entity, then you also need to move the bounding shape. The shape isn’t attached to the entity in any way.

The shapes is still undocumented (it’s on our to do list to refractor a bit). The source is available though so you can see what properties to change to move it: https://github.com/playcanvas/engine/blob/master/src/shape/bounding-sphere.js

So I have to change the center of the bounding sphere. There are two scripts with bounding sphere information, selectable and selector camera, but I don’t know where or how to change the center position.

Here’s a link to the project:


In the ‘selectable’ script, I would update the center of boundingSphere to the entity’s world position in the ‘update’ function. ie

Selectable.prototype.update = function (dt) {

That way, every frame the boundingSphere center is changed to be the same position as the entity it’s attached to.

Thank you! It’s working.
Now I have another issue on the same project. If you check it, I have some walls, but obviously the ray that finds the bounding spheres just goes through them. How can I make it so that the ray stops at the walls and it can only intersect the bounding spheres on the open spaces?

Hmm… The answer should be: Use bounding boxes for the walls and as you check the ray against all the shapes in the scene and find the closest intersection point and the shape that it belongs to see what it has hit first.

However, at the moment, the BoundingBox-Ray intersection code doesn’t return anything that can be use to find the intersection but the code is due a refractor as mentioned in this thread.

The alternative is to use the physics engine although that comes with a potential computational and filesize cost.

I was thinking of other ways to make something like this work and I tried to disable the selectable entity after it got above a certain number in the Y rotation, but my code in the selectable.js is not working. On debugging it seems like the variable of the rotation is changing like it should, but it won’t disable. I don’t know what I’m doing wrong.

    this.giro= this.RotationZone.getEulerAngles();
    if (giro[1] > 50) {
      if (this.entity.enabled) {
           this.entity.enabled = false;
   } else {
        if (!this.entity.enabled) {
           this.entity.enabled = true;

That will only work for certain angles due to the way getEularAngles calculates the angles and restrictions on asin, acos and atan. If you print out the values of the rotations, you will find that once one axis goes pass 180 degrees, the other axes will be affected to represent the rotation.