}
}
立方体做好了,接下来就可以让它动起来了。根据鼠标位置改变立方体转动的角度。rotateX和rotateY方法就是让所有点绕X轴旋转以及绕Y轴旋转。这个的原理我在之前那个博文上好像有说过。。。。如果想了解更多,可以自己去百度一下计算机图形学3D变换。绕X轴和绕Y轴是最简单的旋转矩阵了。当然,如果有兴趣的还可以去搜一下绕任意轴旋转矩阵。。。这个有点复杂,我本来想用它来做个魔方,不过遇到一些问题,暂时还没解决。好吧,扯远了。通过rotateX和rotateY两个方法可以让每个点获得下一帧的位置,在动画循环中重绘。这样,转动的立方体就做出来了。
- if("addEventListener" in window){
window.addEventListener("mousemove" , function(event){
- var x = event.clientX - canvas.offsetLeft - centerX;
var y = event.clientY - canvas.offsetTop - centerY;
- angleY = x*0.0001;
angleX = y*0.0001;
- });
}
- else {
window.attachEvent("onmousemove" , function(event){
- var x = event.clientX - canvas.offsetLeft - centerX;
var y = event.clientY - canvas.offsetTop - centerY;
- angleY = x*0.0001;
angleX = y*0.0001;