Three,js: Problem when trying to make a sphere move with a bounded sphere

I am new to three.js and having trouble when trying to animate a sphere to move through a space.

I am creating a new Sphere and using new THREE.Vector3().randomDirection(); to make it move. The sphere is supposed to be moving in a bounded sphere for collision detection. When I add ballbb.copy(ball.geometry.boundingSphere).applyMatrix4(ball.matrixWorld) to the code to make the bounded Sphere move with the sphere, the sphere stops moving.

const sphere = new THREE.SphereGeometry(70);
const sphereMaterial = new THREE.MeshStandardMaterial
var ball = new THREE.Mesh(sphere,sphereMaterial)
ball.position.x = (Math.random() - 0.5) * 1000;
ball.position.y = (Math.random() - 0.5) * 1000;
ball.position.z = (Math.random() - 0.5) * 1000;

ball.userData.vel = new THREE.Vector3().randomDirection();

var ballbb = new THREE.Sphere(ball.position, 70)
scene.add(ball)

function animate() {

    requestAnimationFrame(animate)

  controls.update()
    render()
    ballbb.copy(ball.geometry.boundingSphere).applyMatrix4(ball.matrixWorld)
    console.log(ball.position)

}

function render() {
    renderer.render(scene, camera)
    ball.position.add(ball.userData.vel)
}

I got some time to debug this and figured out the problem. It's a twisting tale, so hold on...

The Sphere constructor (r152 source code) takes a Vector3 as the center position, and a Number as the radius of the sphere being defined. The quirk comes in that the center Vector3 isn't copied into Sphere.center, but is instead assigned to the property. This means Sphere.center will be a reference to the Vector3 passed to it.

But wait, there's more!

In three.js, when you change Mesh.position, it won't update the matrixWorld right away unless you tell it to with Object3D.updatematrixWorld() or a call to render. So until that happens, ball.matrixWorld still holds the matrix from the previous update.

An unfortunate chain of events...

1. You set ball.position (technically this also updates ballbb.center!)
2. You render the scene (this also automatically calls Object3D.updateMatrixWorld())
3. You update ball.position (no auto-update to ball.matrixWorld)
4. You copy the geometry's bsphere (identity position) into ballbb
5. You apply ball.matrixWorld to ballbb (this multiplies is against ballbb.center)
6. Goto 1, repeat

Analysis

Step 4 is where things go sideways. When you copy the identity bounding sphere into ballbb, you destroy the update made in Step 1, not only for ballbb, but also for ball! Copying the identity resets ballbb.center (and, in turn, ball.position) to (0, 0, 0). You then apply the ball.MatrixWorld, but because there hasn't been a render or updateMatrixWorld since Step 2, ball.matrixWorld is still the world matrix from the last render, so you're basically applying the transformation from the previous frame, meaning the ball doesn't move.

How do you fix this?

You could probably rearrange your logic to ensure updating ball.position or ballbb.center are applied and propagated correctly, but I was able to fix it by changing one thing:

var ballbb = new THREE.Sphere(ball.position.clone(), 70)

Notice the call to Vector3.clone(). This will ensure the Vector3 given to the Sphere is a copy of ball.position, so that updates to one won't affect the other.

A better fix...

Really, you should be able to simplify your code and not do any of the math you're doing. When you create your Sphere, do give it ball.position, but then don't worry about doing anything else. When you update ball.position, it will also update ballbb.center. A Sphere doesn't have a matrixWorld, and all of its math is computed from the center and radius values, so it will "automatically" follow ball.