JSFiddle - React, Tailwind, and code Playground
JavaScript
SM = {};
SM.Reel = (function () {
function Reel(scene, timeSpan) {
var geometry = new THREE.CubeGeometry(200, 200, 200);
var material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });
this.mesh = new THREE.Mesh(geometry, material);
this.timeSpan = this.time = timeSpan;
this.startVelocity = 0.01;
this.velocity = this.startVelocity;
this.speedUp = Math.abs(this.startVelocity / this.timeSpan);
this.fullRotation = 2 * Math.PI;
scene.add(this.mesh);
}
Reel.prototype.amountAway = function() {
return this.fullRotation - this.mesh.rotation.x;
};
Reel.prototype.amountPossible = function() {
return this.time * this.velocity;
};
/**
* Rotates the cube
* Here I'm trying to implement the smooth rotation
*/
Reel.prototype.move = function (delta) {
if (this.velocity < 0 && this.mesh.rotation.x == 0) {
return false;
}
// Update the rotation, modulo 360 degrees (2Pi)
this.mesh.rotation.x = (this.mesh.rotation.x + delta * this.velocity) % this.fullRotation;
this.time -= delta;
// If we are in the "end phase" of the animation...
if (this.endVelocity) {
this.velocity = this.endVelocity * (this.amountAway() / this.endRotation);
}
// If our current velocity will barely get us to our starting position in time...
else if (this.amountAway() >= this.amountPossible()) {
// Lock our velocity and the rotation that is left,
// commencing the "end phase"
this.endVelocity = this.velocity;
this.endRotation = this.amountAway();
}
// Else, just scale velocity with the time that is left
else {
this.velocity = this.speedUp * this.time;
}
}
return Reel;
})();var camera, scene,...