针对要解决的使网页上能够通过我们要做的插件实现3D展示问题,我们小组进行了分工,具体分工如下:
姜中希:网页上基本图形的3D展示比如正方体、球体;
王昭博:3D图形绘制软件的简单使用以及生成文件数据的分析;
周盼超:读取3D图形绘制软件生成文件的数据到网页中并还原出来;
孟祥娟:博客、文档的编写,项目的整合。
因为我们对这方面的技术没有接触过,第一步想到的是如何让一个物体在网页上呈3D状态,就在网上先找了一个能够在网页上3D展示的例子。这个例子主要是一个魔方能够3D动态旋转,3D效果看起来很不错,我们对其源代码和技术进行了研究,看到底是通过设置什么参数来达到这个效果的。
了解了CSS3的几个属性:主要是对图形移动、旋转、倾斜、放缩的处理。
-moz-transform:translateX(x deg) translateY(x deg);/*图形会沿着XY轴移动*/
-moz-transform:rotate(x deg);/*图形绕着原点旋转当然也可以改成XY轴*/
-moz-transform:skew(x deg);/*图形倾斜*/
-moz-transform-origin:0% 0%;/*改变坐标原点在图形中的位置*/
-moz-transform:scale();/*对图形放缩大于1是放大,小于1大于0是缩小,小于0会有反转的效果然后放缩*/
其中的perspective属性,定义3D元素距视图的距离,以像素计。该属性允许改变3D元素查看3D元素的视图。当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。