今天看一个掷骰子的效果:

3D掷骰子 gif 3D掷骰子

绘制骰子

首先我们需要在一个div容器中开启3d功能:

然后绘制骰子的六个面,然后在3d空间内旋转,html代码如下:

上述代码的空间表现如下:

background Layer 1 rotateX(0) rotateY(0) translateZ(50) x轴 z轴 y轴 rotateX(0) rotateY(90) translateZ(50) rotateX(0) rotateY(180) translateZ(50) rotateX(0) rotateY(270) translateZ(50) 50 50 50 rotateX(-90) rotateY(0) translateZ(50) rotateX(90) rotateY(0) translateZ(50) 图1 图2 图5 图3 图4 图6

上面有一个比较不好理解的是如何在三维空间中确定转了多少度?例如上面的图2为什么是rotateY(90deg)而不是rotateY(-90deg)。我总结的是,从方向轴的正方向往回看,顺时针的即为正:

background Layer 1 x轴 z轴 y轴 顺时针正向 顺时针正向 顺时针正向 视线方向 视线方向 视线方向

掷骰子效果

首先要找到每个点数需要骰子rotateX,rotateY多少可以得到,这个道理和上面绘制骰子效果比较类似,我们可以得到一个map:

例如点位4需要骰子rotateX(0deg) rotateY(90deg)得到,然后x,y的位置可以有前后5度的浮动,这个可以自己调整,不过不要太大,否则就转的对不上面;z轴也可以转动,但是前后也不要超过5度,否则也对不上。

为了让骰子有较大幅度的转动,可以在指定角度的基础上加360*n,这样就既不会影响最终效果,也有较大幅度的转动。

手动转动骰子效果

还有一个类似的效果,就是通过用户操作转动骰子:

这个就是监听movedown/movemove/moveup事件,计算水平/垂直移动距离,然后施加在骰子的roateX,rotateY上。需要注意的是,水平施加的距离,可以看作是绕着y轴转动,水平向右(顺时针)是增大rotateY;垂直施加的距离,可以看作是绕着x轴转动,垂直向下(逆时针)是减少rotateX。

这个算法可以参照之前说的确定旋转角度的那个图。

这里还有一个小细节,就是旋转停止,还可会再转一会,这个主要是因为计算了旋转速度,然后停止的时候,在此此速度上衰减:

DEMO下载

点击下载 [0积分]一共下载0

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字