Inspired from picklecat
Wanna understand more how it works? Go to:
threejs-modern-app was used as a starter-kit, to glue all those libraries together, also as a component organizer, three.js boilerplate concealer and asset loader.
- Simulate quadratic drag force in cannon.js! [link to code]
class CannonSuperBody extends CANNON.Body {
// Fd = - Constant * getMagnitude(velocity)**2 * normalize(velocity)
applyDrag(coefficient) {
const speed = this.velocity.length()
const dragMagnitude = coefficient * speed ** 2
const drag = this.velocity.clone()
drag.scale(-1, drag)
drag.normalize()
drag.scale(dragMagnitude, drag)
this.applyGenericForce(drag)
}
// apply a force in its center of mass
applyGenericForce(force) {
const centerInWorldCoords = this.pointToWorldFrame(new CANNON.Vec3())
this.applyForce(force, centerInWorldCoords)
}
}
- Shrimps jumping up and down in the van (this was fun!) [link to code]
// make the shrimps jump up and down
this.vanShrimps.forEach((shrimp, i) => {
shrimp.position.y = this.initialY + Math.sin(time * 20 + i) * 0.09
})
- 3D effect for the cat face was made using a displacement imege on a plane geometry. I created the displacement image using Blender, here is the process:
