JAVA人物转体怎么实现_three.js 制作逻辑转体游戏（上）

最新推荐文章于 2024-02-01 22:07:16 发布

国家级做梦冠军

最新推荐文章于 2024-02-01 22:07:16 发布

阅读量277

点赞数

文章标签： JAVA人物转体怎么实现

本文链接：https://blog.csdn.net/weixin_32943807/article/details/114862486

版权

今天郭先生又出来制作游戏了，最近有小伙伴要做一个逻辑转体小游戏，我怎么能不先来试试呢。玩法可以看上面的连接，下面附几张图。线案例请点击博客原文。

游戏规则不懂得可以看自行百度哈，其实玩起来还挺有难度的。关于这个问题，对于新手来说，主要需要克服两个困难。一是这个模型的旋转轴不是固定的，每一次的旋转都是以不同的一个边为轴进行的。二是需要根据关卡数据渲染终点位置和陷阱(这里使用shader)。那么我们今天就来完成第一个难点，如何让几何体动态的绕非定轴转动。我们还是一步一步来。

1. 关卡数据以及其他变量的设置

对于一个闯关类型的游戏，设置好关卡数据和结构是十分必要的，能够让代码简介高效。

var boxes = [], group = newTHREE.Group(), box3, uniformsvar 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. 布局和初始化小方块

首先看一下我是咱们布局的(这个因人而异)。

看这个图大家就懂了，我是将逻辑转体的面放在了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= newTHREE.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();