I have an issue with character movement in cannonjs and maybe some one can give me a hint.
As you can see, there is a visual glitch when character moves.
In cannonjs world I have a plane as a floor and sphere as the character representation.
On keyboard input I move body:
this.body.velocity.x += inputVector.x * dt * MAX_VELOCITY
this.body.velocity.z += inputVector.z * dt * MAX_VELOCITY
On update I copy position from body to mesh:
this.world.step(1 / PHYSICS_FRAME_RATE, dt, 3)
this.objects.forEach(({ body, wireframe }) => {
if (wireframe) {
wireframe.position.copy(toThreeVec3(body.position))
}
})
I have a basic world setup
public defaultMaterial = new Material('default')
public defaultContactMaterial = new ContactMaterial(
this.defaultMaterial,
this.defaultMaterial,
{
friction: 0.0,
restitution: 0.3,
},
)
//...
this.world = new World()
this.world.gravity.set(0, -9.81, 0)
this.world.broadphase = new SAPBroadphase(this.world)
this.world.allowSleep = true
this.world.addContactMaterial(this.defaultContactMaterial)
this.world.defaultContactMaterial = this.defaultContactMaterial
this.world.defaultContactMaterial.contactEquationStiffness = 1e9
this.world.defaultContactMaterial.contactEquationRelaxation = 4
I get the dt
like this:
const elapsedTime = this.clock.getElapsedTime()
const dt = elapsedTime - this.previousTick
this.previousTick = elapsedTime
And just to be secure, versions of libs:
package.json
"cannon-es": "^0.17.1",
"three": "^0.129.0",
I have suspicions that there are two places that can cause this glitch:
Main thread overload: I have a lot of textures, videos and also few gltf files. This massive asset in addition to cannonjs causes a frame drop. I moved all physics related stuff to webworkers and ... overall performance is better but glitch is still there. So, the issue is not here.
Moving body in cannonjs While googling I found in babylonjs forum that O=I should never change the position of body but instead apply a force on it. Do I need to behave same with velocity? I mean, maybe it's wrong to change velocity value but instead I need to apply force to move body. I checked cannonjs/es examples and they do change velocity. So, the issue is also not here.
Any ideas?