JSFiddle - React, Tailwind, and code Playground
HTML
<div id="animation"></div>
JavaScript
var renderer;
window.requestAnimFrame = (function(callback){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 60);
};
})();
function animate(lastTime, angularSpeed, three, run1, run2, delta){
var date = new Date();
var time = date.getTime();
var timeDiff = time - lastTime;
var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
if (run1) {
three.cube.rotation.y += delta;
} else if (run2){
three.cube2.rotation.y -= delta;
}
if (three.cube.rotation.y > Math.PI) {
three.cube.rotation.y = Math.PI;
run1= false;
}
if (three.cube2.rotation.y < -Math.PI) {
three.cube2.rotation.y = -Math.PI;
delta = -delta;
run2= false;
}
/*
if (three.cube2.rotation.y > 0) {
three.cube2.rotation.y = 0;
run1 = true;
}
if (three.cube.rotation.y < 0) {
three.cube.rotation.y = 0;
// run1 = false;
run2 = true;
delta = -delta;
}*/
lastTime = time;
three.renderer.render(three.scene, three.camera);
requestAnimFrame(function(){
animate(lastTime, angularSpeed, three, run1, run2, delta);
});
}
window.onload = function(){
var run1= true;
var run2= true;
var delta = 0.01;
var angularSpeed = 0.2;
var lastTime = 0;
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth,...