最近学了一段时间three.js ，想到之前一直没能实现的俄罗斯方块，于是用three.js想办法实现了，其中图形旋转的部分参考了网上俄罗斯方块的实现利用的一个数学公式，就是平面上某个点P绕着某个点Q旋转theta角后所得坐标的公式：
假设对图片上任意点(x,y)，绕一个坐标点(rx0,ry0)逆时针旋转a角度后的新的坐标设为(x0, y0)，有公式：
x0= (x - rx0)*cos(a) - (y - ry0)*sin(a) + rx0 ;
y0= (x - rx0)*sin(a) + (y - ry0)*cos(a) + ry0 ;
这个公式我自己根本没想到。。。对于我来说主要知识盲区就在这里,其他的难度都不是很大，我的思路是先在初始化10*20个也就是200个BoxGeometry在场景里并映射到一个二维数组里面，然后设置他们的visible为false，然后操作这个二维数组动态的修改这些方块的的visible属性就行。
下面是效果图:
下面是代码实现，放到webpack工程下，直接
import Tetris from './tetris';
new Tetris(domName||null);
就可以运行了。
网友评论