专栏首页郭先生的博客three.js 制作逻辑转体游戏(上)

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哦,因为下一步还要使用哦,

这一篇就先讲绕非定轴转动啦,对于新手来说,这确实需要理解一下,那就先讲到这了,下一篇继续。

转载请注明地址:郭先生的博客

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • three.js 制作逻辑转体游戏(下)

    上一篇已经对绕非定轴转动有所了解,这篇郭先生继续说一说逻辑转体游戏的制作,这部分我们同样会遇到一些小问题,首先是根据数据渲染陷阱和目标区域,然后是对可以转动的判...

    郭先生的博客
  • HTML5游戏引擎深度测评

    最近看到网上一篇文章,标题叫做《2016年 最火的 15 款 HTML5 游戏引擎》。目前针对HTML5游戏的解决方案已经非常多,但谁好谁差却没有对比性资料。特...

    李海彬
  • HTML5 游戏引擎深度测评

    最近看到网上一篇文章,标题叫做《 2016年 最火的 15 款 HTML5 游戏引擎 》。目前针对HTML5游戏的解决方案已经非常多,但谁好谁差却没有对比性资料...

    李海彬
  • 在微信小游戏中使用three.js显示3D图形

    笔者之前从未接触过微信小程序和WebGL的开发,但是却一直有留意相关技术的发展,大概听说原来微信小程序是不支持WebGL 3D技术的。这次借着微信大力推广小游戏...

    bering
  • H5游戏开发:游戏引擎入门推荐

    很多刚刚接触到游戏开发,准备大展拳脚的小鲜肉们,往往在技术选型这第一关就栽了跟头。毕竟网络上的游戏引擎良莠不齐,官网上相关资料也比较少,而选择一个适合的游戏引擎...

    bering
  • 利用 three.js 开发微信小游戏的尝试

    这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧。

    bering
  • 干货分享:如何选择HTML5引擎?至关重要!

    原生手游市场已是红海,腾讯、网易等寡头独霸天下,H5游戏市场成为下一个风口。然而,有一些H5游戏开发团队由于选择引擎不慎导致项目甚至团队夭折。如...

    Layabox Charley
  • 听说玩这些游戏能提升编程能力?

    电子游戏和编程充满联系。从雅达利兴盛的年代开始,游戏就已经开始影响一代又一代程序员。他们开发游戏,在游戏过程中获得快乐。随着机器学习的兴起,程序员们让人工智能学...

    灵魂画师牧码
  • 技术干货分享:如何选择 HTML5 游戏引擎

    原生手游市场已是红海,腾讯、网易等寡头独霸天下,H5游戏市场或将成为下一个风口。据笔者所知,很多H5游戏开发团队由于选择引擎不慎导致项目甚至团队夭折。如何选择适...

    李海彬
  • 【Golang语言社区前端编程】如何选择 H5 游戏引擎

    原生手游市场已是红海,腾讯、网易等寡头独霸天下,H5游戏市场或将成为下一个风口。据笔者所知,很多H5游戏开发团队由于选择引擎不慎导致项目甚至团队夭折。如何选择适...

    李海彬
  • three.js 制作一个三维的推箱子游戏

    今天郭先生发现大家更喜欢看我发的three.js小作品,今天我就发一个3d版本推箱子的游戏,其实webGL有很多框架,three.js并不合适做游戏引擎,但是可...

    郭先生的博客
  • 微信小游戏 - 初体验

    在月活用户近9亿的社交平台上做小游戏,是胆战心惊了点,毕竟游戏脱离控制、变身国民爆款可能是分分钟的事。

    腾讯NEXT学位
  • 懂技术又懂艺术的creative developer | Mix群聊

    条漫的灵感,来源于谷歌的storyboard生成技术,将任何图像集(如视频剪辑或相册)转换为故事板。通过互动的方式完成内容创作,这样用户就可以探索并找到最适合他...

    mixlab
  • webgl图库研究(包括BabylonJS、Threejs、LayaboxJS、SceneJS、ThingJS等框架的特性、适用范围、支持格式、优缺点、相关网址)

    为实现企业80%以上的生产数据进行智能转化,在烟草、造纸、能源、电力、机床、化肥等行业,赢得领袖企业青睐,助力企业构建AI赋能中心,实现智能化转型升级。“远...

    acoolgiser
  • HTML5 学习总结(四)——canvas绘图、WebGL、SVG

    一、Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技...

    张果
  • 元宇宙趋势下的前端现状

    作为大家口中的“互联网的最终形态”,需要如今大热的包括 AR、VR、5G、云计算、区块链等软硬件技术的成熟。才能构建出一个去中心化的、不受单一控制的、永续的、不...

    ConardLi
  • 你知道几种前端动画的实现方式?

    随着互联网的持续发展,H5 页面作为与用户直接交互的表现层越来越复杂,呈现的形式也越来越丰富,从而也要求 H5 页面具有更多的花样性及动画效果。那前端实现动画效...

    2020labs小助手
  • 元宇宙趋势下的前端现状

    作为大家口中的“互联网的最终形态”,需要如今大热的包括 AR、VR、5G、云计算、区块链等软硬件技术的成熟。才能构建出一个去中心化的、不受单一控制的、永续的、不...

    winty
  • 元宇宙趋势下的前端现状

    作为大家口中的“互联网的最终形态”,需要如今大热的包括 AR、VR、5G、云计算、区块链等软硬件技术的成熟。才能构建出一个去中心化的、不受单一控制的、永续的、不...

    程序IT圈

扫码关注云+社区

领取腾讯云代金券