利用HTML5绘制点线面组成的3D图形的示例

2019-01-28 16:22:13王冬梅
  •             }            }  


      立方体做好了,接下来就可以让它动起来了。根据鼠标位置改变立方体转动的角度。rotateX和rotateY方法就是让所有点绕X轴旋转以及绕Y轴旋转。这个的原理我在之前那个博文上好像有说过。。。。如果想了解更多,可以自己去百度一下计算机图形学3D变换。绕X轴和绕Y轴是最简单的旋转矩阵了。当然,如果有兴趣的还可以去搜一下绕任意轴旋转矩阵。。。这个有点复杂,我本来想用它来做个魔方,不过遇到一些问题,暂时还没解决。好吧,扯远了。通过rotateX和rotateY两个方法可以让每个点获得下一帧的位置,在动画循环中重绘。这样,转动的立方体就做出来了。

    XML/HTML Code复制内容到剪贴板
    1. if("addEventListener" in window){                window.addEventListener("mousemove" , function(event){   
    2.                 var x = event.clientX - canvas.offsetLeft - centerX;                    var y = event.clientY - canvas.offsetTop - centerY;   
    3.                 angleY = x*0.0001;                    angleX = y*0.0001;   
    4.             });            }   
    5.         else {                window.attachEvent("onmousemove" , function(event){   
    6.                 var x = event.clientX - canvas.offsetLeft - centerX;                    var y = event.clientY - canvas.offsetTop - centerY;   
    7.                 angleY = x*0.0001;                    angleX = y*0.0001;