three.js 制作逻辑转体游戏(上)
今天郭先生又出来制作游戏了,最近有小伙伴要做一个逻辑转体小游戏,我怎么能不先来试试呢。玩法可以看上面的连接,下面附几张图。线案例请点击逻辑转体。
捕获111111111.PNG
捕获22222222.PNG
游戏规则就是不懂得可以看自行百度哈,其实还挺有难度的。关于这个问题,对于新手来说,主要需要克服两个困难。一是这个模型的旋转轴不是固定的,每一次的旋转都是以不同的一个边为轴进行的。二是需要根据关卡数据渲染终点位置和陷阱(这里使用shader)。那么我们今天就来完成第一个难点,如何让几何体动态的绕非定轴转动。我们还是一步一步来。
1. 关卡数据以及其他变量的设置
对于一个闯关类型的游戏,设置好关卡数据和结构是十分必要的,能够让代码简介高效。
var boxes = [], group = new THREE.Group(), box3, uniforms
var square = [
{
start: [[-1, -1], [-1, -2]],
end: [[-1, -4], [-1, -5]],
trap: [[-1, -7], [-6, -2]],
color: 0xDC210E
},
{
start: [[-2, -1], [-3, -1], [-2, -2], [-3, -2]],
end: [[-5, -6], [-6, -6], [-5, -7], [-6, -7]],
trap: [[-1, -7], [-6, -2]],
color: 0x097A53
},
{
start: [[-1, -1], [-1, -2], [-1, -3], [-2, -1], [-2, -3]],
end: [[-1, -6], [-1, -8], [-2, -6], [-2, -7], [-2, -8]],
trap: [[-1, -7], [-6, -2]],
color: 0x1B2991
}
];
因为不同关卡使用的道具是不一样的,boxes就是盛放每一关小方块的盒子,而绕非定轴转动的主角就是这个group,因为Object3D转动都是绕穿过中心的轴转动的,所以我们需要将小方块放到一个组中,并且让小方块相对组中心产生偏移,这样旋转组,我们看小方格的转动就是绕非定轴的转动了。box3在3D空间中表示一个盒子或立方体。其主要用于表示物体在世界坐标中的边界框,我前面也讲过,不会的也可以往前翻翻,它所能完成的功能,我们通过计算也都可以完成,但是它类似于一个方法类,可以极大的简化我们的计算,稍后我会用到一些。uniforms是向着色器传入一些变量值的,这篇暂时用不到。square储存着每一关的数据,start是初始位置,end是结束位置,trap是陷阱位置,color是小方块的颜色。位置坐标我们稍后再研究。
2. 布局和初始化小方块
首先看一下我是咱们布局的(这个因人而异)。
捕获3333.PNG
看这个图大家就懂了,我是将逻辑转体的面放在了XOZ面上,并将平面放在了x和z的负半轴,因此他们的坐标都是负值,每一个格子的边长都是10,所以关卡数据start: [-1, -1, -1, -2]代表01格和08格,这样我们就可以将坐标映射到格子上。有了这个映射我们很容易根据数据初始化小方格。
initBox() {
let geom = new THREE.BoxGeometry(10, 10, 10);
let mate = new THREE.MeshBasicMaterial({color: square[this.game].color, transparent: true, opacity: .8});
let mesh = new THREE.Mesh(geom, mate);
boxes = [];
square[this.game].start.forEach((d,i) => {
let meshCopy = mesh.clone();
meshCopy.position.set(d[0] * 10+ 10 / 2, 10 / 2, d[1] * 10 + 10 / 2);
meshCopy.name = 'box-' + i;
boxes.push(meshCopy);
scene.add(meshCopy)
})
this.computedBox3();
},
这段代码比较简单,小做出一个小方块的Mesh,然后根据映射关系,将方块的拷贝放到该放的位置,并将小方块都放在boxes中。在每一关初始化方块后,我们都要计算一下这些小方块集合的box3,因为有了小放块集合很容易得到box3,而有了box3我们又很容易知道小方块集合的边界和中心。
3. 实现非定轴旋转
现在我们有了所有小方块的集合boxes和box3,现在我们就根据上下左右的点击事件实现非定轴转动,先看下图。
捕获5555.PNG
捕获66666.PNG
就拿这一关来说,假如我们让它向右转,图一的图形会以右下角那条边旋转到图二,下面来看看向右转的代码。
var offset = new THREE.Vector3(box3.max.x, 0, 0);
group.position.copy(offset);
boxes.forEach(d => {
d.position.sub(offset);
group.add(d);
})
scene.add(group);
这里是最难理解的地方,因为我们的小方格的之前的matrix就已经是matrixWorld了(因为在scene.children中)将他们添加到一个组,再旋转组肯定得不到我们想要的结构(因为新加的组默认还是在原点),所以呢这里我们来了一个乾坤大挪移,将小方格向右移,将组向左移动相同的向量。
捕获8888.png
这样子小方块就在这个位置了(将入组之后,就相当于在组的这个位置),这样子旋转后,就成了我们想要的样子,而这个向量就是这个offset,box3.max.x是小方块集boxes的x方向的上限。再旋转完之后呢,我们又要把组去掉(这个组就像一个壳一样,转完了就脱掉哈哈)。
awayFromGroup() {
boxes.forEach(d => {
var trans = new THREE.Vector3();
d.matrixWorld.decompose(trans, new THREE.Quaternion(), new THREE.Vector3());
d.position.copy(trans);
d.updateMatrixWorld();
scene.add(d)
})
scene.remove(group);
this.computedWin();
this.computedBox3();
},
这里我们找到小方块的世界矩阵,找到位置向量trans就可以,然后将小方格重新赋予位置,这里将小方格直接添加到场景中。这样子就完成了乾坤大挪移,其他的方向也都类似哦,别忘了在计算box3哦,因为下一步还要使用哦,
这一篇就先讲绕非定轴转动啦,对于新手来说,这确实需要理解一下,那就先讲到这了,下一篇继续。
转载请注明地址:郭先生的博客
- Phoenix - Hbase与SQL
- 2018年,让你的数据库变更快的十个建议
- Hadoop如何使用Zookeeper来保障高可用?
- HTTP 压力测试工具 wrk
- 理解 Linux shell 中的一个方言:2>&1
- 大家知道什么是git中的 .gitignore吗?
- MySQL 8.0 新特性 :隐藏索引 Invisible Indexes
- 如何监控MySQL的复制延迟?
- Uber 的 Docker Mysql 应用
- Dubbo源码-从HelloWorld开始
- 【深度学习】用PaddlePaddle进行车牌识别(二)
- JavaScript 10分钟入门
- 外键约束
- OpenCV3.x中UMat介绍与使用
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- pytest文档46-关于https请求警告问题
- pytest文档45-allure添加环境配置(environment)
- Pytest fixture参数化params
- Python 批量合并 Excel
- 用 Python 了解一下最炫国漫《雾山五行》
- Python 基础(六):列表与元组
- Word 批量转 PDF
- Python 数据分析(一):NumPy 基础知识
- 每日一题 | 环形排列问题
- 每日一题 | QQ群撩妹问题
- 每日一题 | 老板出的下棋问题
- Qt音视频开发12-mpv解码播放
- 算法专题 | 10行代码实现的最短路算法——Bellman-ford与SPFA
- 每日一题 | 土豪割草问题
- 高阶面试:伯努利过程