前端游戏巨制! CSS居然可以做3D游戏了，高效web开发

同时, 还有transform属性来对3D的节点进行平移、缩放、旋转以及拉伸.

属性值很简单, 在我们平时的web开发中也很少用到.

那用这些CSS3D属性可以做3D游戏吗?

当然是可以的.

即使只有沙盒, 也有我的世界这种神作.

今天我就来带大家玩一个从未有过的全新3D体验.

废话不多说, 我们先来看下效果:

这里是试玩地址pc端畅玩[1]

我们要完成这个迷宫大作战,需要完成以下步骤:

1. 创建一个3D世界

2. 写一个3D相机的功能

3. 创建一座3D迷宫

4. 创建一个可以自由运动的玩家

5. 在迷宫中找出一条最短路径提示

我们先来看下一些前置知识.

做一款CSS3D游戏需要的知识和概念

==================

CSS3D坐标系

---

在css3D中, 首先要明确一个概念, 3D坐标系.

使用左手坐标系, 伸出我们的左手, 大拇指和食指成L状, 其他手指与食指垂直, 如图:

WechatIMG315.png

大拇指为X轴, 食指为Y轴, 其他手指为Z轴.

这个就是CSS3D中的坐标系.

透视属性

---

perspective为css中的透视属性.

这个属性是什么意思呢, 可以把我们的眼睛看作观察点, 眼睛到目标物体的距离就是视距, 也就是这里说的透视属性.

大家都知道, 「透视」+「2D」= 「3D」.

perspective: 1200px;

-webkit-perspective:  1200px;

复制代码

3D相机

---

在3D游戏开发中, 会有相机的概念, 即是人眼所见皆是相机所见.

在游戏中场景的移动, 大部分都是移动相机.

例如赛车游戏中, 相机就是跟随车子移动, 所以我们才能看到一路的风景.

在这里, 我们会使用CSS去实现一个伪3d相机.

变换属性

---

在CSS3D中我们对3D盒子做平移、旋转、拉伸、缩放使用transform属性.

• translateX 平移X轴

• translateY 平移Y轴

• translateZ 平移Z轴

• rotateX 旋转X轴

• rotateY 旋转Y轴

• rotateZ 旋转Z轴

• rotate3d(x,y,z,deg) 旋转X、Y、Z轴多少度

注意:

这里「先平移再旋转」和「先旋转再平移」是不一样的

旋转的角度都是角度值.

这里还有不清楚的同学可以参阅羽飞的这篇[juejin.cn/post/699769…[2]] 附带有demo

矩阵变换

---

我们完成游戏的过程中会用到矩阵变换.

在js中, 获取某个节点的transform属性, 会得到一个矩阵, 这里我打印一下, 他就是长这个样子:

var _ground = document.getElementsByClassName(“ground”)[0];

var bg_style = document.defaultView.getComputedStyle(_ground, null).transform;

console.log(“矩阵变换---->>>”,bg_style)

复制代码

WechatIMG307.png

那么我们如何使用矩阵去操作transform呢?

在线性变换中, 我们都会去使用矩阵的相乘.

CSS3D中使用4*4的矩阵进行3D变换.

下面的矩阵我均用二维数组表示.

例如matrix3d(1,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,1)可以用二维数组表示:

[

[1, 0, 0, 0],

[0, 1, 0, 0],

[0, 0, 1, 0],

[0, 0, 0, 1]

]

复制代码

平移即使使用原来状态的矩阵和以下矩阵相乘, dx, dy, dz分别是移动的方向x, y, z.

[

[1, 0, 0, dx],

[0, 1, 0, dy],

[0, 0, 1, dz],

[0, 0, 0, 1]

]

复制代码

绕X轴旋转???, 即是与以下矩阵相乘.

[

[1, 0, 0, 0],

[0, cos???, sin???, 0],

[0, -sin???, cos???, 0],

[0, 0, 0, 1]

]

复制代码

绕Y轴旋转???, 即是与以下矩阵相乘.

[

[cos???, 0, -sin???, 0],

[0, 1, 0, 0],

[sin???,