Web前端--HTML+Canvas+Js实现3D魔方小游戏

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

Web前端--HTML+Canvas+Js实现3D魔方小游戏

2022-12-27 10:59:55 来源：博客园

(资料图片)

一、案列效果

二、案例思路

1、先将平面上的6个DIV拼接在一起。形成一张类似于3d立方体图形展开的平面图。

2、我们需要将每一个面旋转到相应的位置上，每一个面的旋转轴都是不一样的。上下，左右，分别对应的旋转轴,以及旋转角度分别是：bottom(90deg),top(-90deg),right(90deg),left(-90deg)。同时要注意在旋转后面的时候，旋转轴为Z轴，并不是上下，左右边。浏览器上面的坐标系是这样的：Z轴是屏幕里外两个方向（向外为正，向里为负），X轴的水平方向（向右为正，向左为负）；

3、接下来还有一个关键的步骤，就是当变换导致元素在 3D 空间中旋转时，指定当元素背面朝向观察者时不可见；

4、接下来我们要做的就是设置一下所处环境，我们要设置成3D的环境，具体的语法形式如下：transform-style:preserve-3d;

5、然后我们为了让立方体旋转起来，以便更好的实现3D效果。首先找到旋转中心，在3D魔方中，旋转中心就是立方体的几何中心。

三、案列目录

四、代码实现

演示地址

        HTML5 3D魔方小游戏                    
                            
                                    THE                CUBE            
                            双击魔方即可开始            
                            0:00            
                            Complete!            
                                            Best Time!            
        
                                    Flip Type
                                    
                                            
                    
                
                                    Swift
                    Smooth
                    Bounce
                
            
                            Scramble Length
                                    
                                            
                    
                
                                    20
                    25
                    30
                
            
                            Camera Angle
                                    
                                            
                    
                
                                    Ortographic
                    Perspective
                
            
                            Color Scheme
                                    
                                            
                    
                
                                    Cube
                    Erno
                    Dust
                    Camo
                    Rain
                
            
        
                                    Total solves:-            
                            Best time:-            
                            Worst time:-            
                            Average of 5:-            
                            Average of 12:-            
                            Average of 25:-            
        
                                                                
    
    <script src="js/three.min.js"></script>    <script src="js/index.js"></script>

关键词：旋转中心是这样的几何中心