多视角3D可旋转的HTML5 Logo动画

2020-04-24 19:52:31易采站长站整理

      ctx.fill();   
      ctx.restore();   
      rotationOffset += 0.005;   
  
      // apply user interaction to rotation   
      for (var i=0, objs=k3dmain.objects; i<objs.length; i++)   
      {   
         objs[i].ophi += targetRotationX;   
      }   
  
      if (targetRotationX > -0.5) targetRotationX -= 0.05;   
      else if (targetRotationX < -0.55) targetRotationX += 0.05;   
      if (targetRotationX > -0.55 && targetRotationX < -0.5) targetRotationX = -0.5;   
   };   
  
   // start demo loop   
   k3dmain.paused = true;   
   setInterval(function(){k3dmain.tick()}, 1000/60);   
}   
  
// nifty drag/touch event capture code borrowed from Mr Doob http://mrdoob.com/   
var targetRotationX = 0;   
var targetRotationOnMouseDownX = 0;   
var mouseX = 0;   
var mouseXOnMouseDown = 0;   
var targetRotationY = 0;   
var targetRotationOnMouseDownY = 0;   
var mouseY = 0;   
var mouseYOnMouseDown = 0;   
  
var windowHalfX = window.innerWidth / 2;   
var windowHalfY = window.innerHeight / 2;   
  
document.addEventListener(‘mousedown’, onDocumentMouseDown, false);   
document.addEventListener(‘touchstart’, onDocumentTouchStart, false);   
document.addEventListener(‘touchmove’, onDocumentTouchMove, false);   
  
function onDocumentMouseDown( event ) {   
  
 event.preventDefault();   
  
 document.addEventListener(‘mousemove’, onDocumentMouseMove, false);   
 document.addEventListener(‘mouseup’, onDocumentMouseUp, false);