WEB--3D立体魔方小游戏（附源码）

迂幵

已于 2022-12-27 15:23:29 修改

阅读量1.6k

点赞数 2

分类专栏：前端动画前端实战知识集锦文章标签：前端动画 3d

于 2022-12-27 13:32:36 首次发布

本文链接：https://blog.csdn.net/qq_50594742/article/details/128454692

版权

前端同时被 3 个专栏收录

71 篇文章 3 订阅

订阅专栏

动画

53 篇文章 0 订阅

订阅专栏

前端实战知识集锦

3 篇文章 0 订阅

订阅专栏

魔方这个学生时代常玩的游戏之一想必大家都不怎么陌生了吧如果感到陌生的话那难道这就表明了时代间的层层代沟时代变化的太快了嘛好了言归正卷了那么前端怎么实现魔方小游戏呢从以下几个方面细讲

一、案列效果

结果是最好的印证品这毋庸置疑的了

在这里插入图片描述

二、案列思路

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魔方中，旋转中心就是立方体的几何中心。

三、案列目录

鉴于文件目录太大我也不太可能每个文件新建一个代码块书写且时间是有限的哈有需要的小伙伴可以前往测试使用

在这里插入图片描述

四、案列代码

关键性代码可都是有展示的哦赶紧动手操作吧

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="description" content="Rubik’s Cube">
    <meta name="keywords" content="Erno Rubik’s Cube">
    <link rel="stylesheet" type="text/css" href="css/cube.css">
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="icon" type="image/png" href="img/cuber-favicon-0064x0064.png">
    <link rel="apple-touch-icon" href="img/cuber-favicon-0144x0144.png">

    <title>Cuber</title>

    <script charset="utf-8" src="js/tween.min.js"></script>

    <!--  Three.js  -->
    <script charset="utf-8" src="js/Three.js"></script>
    <script charset="utf-8" src="js/EventDispatcher.js"></script>
    <script charset="utf-8" src="js/Math.js"></script>
    <script charset="utf-8" src="js/Quaternion.js"></script>
    <script charset="utf-8" src="js/Vector2.js"></script>
    <script charset="utf-8" src="js/Vector3.js"></script>
    <script charset="utf-8" src="js/Box3.js"></script>
    <script charset="utf-8" src="js/Sphere.js"></script>
    <script charset="utf-8" src="js/Euler.js"></script>
    <script charset="utf-8" src="js/Matrix3.js"></script>
    <script charset="utf-8" src="js/Matrix4.js"></script>
    <script charset="utf-8" src="js/Object3D.js"></script>
    <script charset="utf-8" src="js/Camera.js"></script>
    <script charset="utf-8" src="js/PerspectiveCamera.js"></script>
    <script charset="utf-8" src="js/Ray.js"></script>
    <script charset="utf-8" src="js/Plane.js"></script>


    <!--  Here are the Cube guts. Enjoy.  -->
    <script charset="utf-8" src="js/ERNO.js"></script>
    <script charset="utf-8" src="js/CSS3DRenderer.js"></script>
    <script charset="utf-8" src="js/utils.js"></script>
    <script charset="utf-8" src="js/Number.js"></script>
    <script charset="utf-8" src="js/String.js"></script>
    <script charset="utf-8" src="js/Array.js"></script>
    <script charset="utf-8" src="js/colors.js"></script>
    <script charset="utf-8" src="js/directions.js"></script>
    <script charset="utf-8" src="js/queues.js"></script>
    <script charset="utf-8" src="js/twists.js"></script>
    <script charset="utf-8" src="js/cubelets.js"></script>
    <script charset="utf-8" src="js/groups.js"></script>
    <script charset="utf-8" src="js/slices.js"></script>
    <script charset="utf-8" src="js/folds.js"></script>
    <script charset="utf-8" src="js/projector.js"></script>
    <script charset="utf-8" src="js/interaction.js"></script>
    <script charset="utf-8" src="js/controls.js"></script>
    <script charset="utf-8" src="js/cubes.js"></script>
    <script charset="utf-8" src="js/solvers.js"></script>
    <script charset="utf-8" src="js/renderer.js"></script>

    <script charset="utf-8" src="js/jquery.js"></script>
    <script charset="utf-8" src="js/iecss3d.js"></script>
    <script charset="utf-8" src="js/ierenderer.js"></script>
    <script charset="utf-8" src="js/locked.js"></script>
    <script charset="utf-8" src="js/deviceMotion.js"></script>
    <script charset="utf-8" src="js/main.js"></script>

</head>

<body class="graydient">
    <div id="container"></div>
    <div id="fail">
        <h1>Sorry,</h1>
        <h2>Cubers broken</h2>
    </div>
</body>

</html>