three.js 制作逻辑转体游戏（下）
上一篇已经对绕非定轴转动有所了解，这篇郭先生继续说一说逻辑转体游戏的制作，这部分我们同样会遇到一些小问题，首先是根据数据渲染陷阱和目标区域，然后是对可以转动的判定，最后是获胜的判定。
1. 根据数据渲染陷阱和目标区域
首先我们P一张底图和陷阱图，如下图
就像这样，然后就是根据数据渲染陷阱和目标区域了，首先陷阱的个数是固定的，而目标区域是随小方块的数量而定，先看数据
end: [[-1, -4], [-1, -5]],
trap: [[-1, -7], [-6, -2]],这里我们看一下Shader怎么写的
let texture1 = new THREE.TextureLoader().load('/static/images/base/luojizhuanti.png');
let texture2 = new THREE.TextureLoader().load('/static/images/base/stack.png');
let trapArray = [];
let targetArray = new Array(7).fill('').map(() => new THREE.Vector2(0,0));
square[this.game].trap.forEach(d => {
trapArray.push(new THREE.Vector2(d[0], d[1]));
})
square[this.game].end.forEach((d,i) => {
targetArray[i] = new THREE.Vector2(d[0], d[1]);
})
uniforms = {
texture1: {
value: texture1
},
texture2: {
value: texture2
},
point0: {
value: trapArray[0]
},
point1: {
value: trapArray[1]
},
target: {
value: targetArray
}
}
uniforms[ "texture2" ].value.wrapS = uniforms[ "texture2" ].value.wrapT = THREE.RepeatWrapping;
let planeMate = new THREE.ShaderMaterial({
side: THREE.DoubleSide,
uniforms: uniforms,
vertexShader: `
varying vec2 vUv;
varying vec3 pos;
void main() {
vUv = uv;
pos = position;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
`,
fragmentShader: `
varying vec2 vUv;
varying vec3 pos;
uniform vec2 point0;
uniform vec2 point1;
uniform vec2 target[7];
uniform sampler2D texture1;
uniform sampler2D texture2;
void main() {
int index = 0;
vec2 newUv = vec2(vUv.x * 7.0, vUv.y * 8.0);
vec4 tcolor1 = texture2D( texture1, vUv );
vec4 tcolor2 = texture2D( texture2, newUv );
vec4 resultColor = tcolor1;
if (pos.x < point0.x * 10.0 + 45.0 && pos.x > point0.x * 10.0 + 35.0 && pos.y < - point0.y * 10.0 - 40.0 && pos.y > - point0.y * 10.0 - 50.0) {
resultColor = tcolor2;
} else if(pos.x < point1.x * 10.0 + 45.0 && pos.x > point1.x * 10.0 + 35.0 && pos.y < - point1.y * 10.0 - 40.0 && pos.y > - point1.y * 10.0 - 50.0) {
resultColor = tcolor2;
} else {
for(int i=0; i < 7; i++) {
if (pos.x < target[i].x * 10.0 + 45.0 && pos.x > target[i].x * 10.0 + 35.0 && pos.y < - target[i].y * 10.0 - 40.0 && pos.y > - target[i].y * 10.0 - 50.0) {
resultColor = vec4(1.0, 0.5, 0.0, 1.0);
}
}
}
gl_FragColor = resultColor;
}
`
})texture1和texture2是两个纹理图，trapArray是盛放陷阱的数组，targetArray是目标区域，默认长度是7，且默认值都是new THREE.Vector2(0,0)，然后我们将二维向量加到以上两个数组中，最后添加到uniforms中，最后传到ShaderMaterial中，顶点着色器我们只需要将position和ui传到片元着色器中，关键是片元着色器，首先我们先得到一个新uv，这个新uv是沿x方向重复7次，沿y方向重复8次，然后tcolor1和tcolor2分别是底图的颜色和重复了7*8的陷阱的颜色。if中是渲染第一个陷阱，else if是渲染第二个陷阱，else中循环target数组，渲染target区域，具体的判断其实很简单。这样我们就根据关卡渲染了陷阱。
2. 对是否可以旋转进行判定
因为小方块是不可以超过底图的边缘的，而且也不可以直接覆盖到陷阱上面，因为这个操作是在点击上下左右的时候就要先判断可行性，但是此时我们还没有转，所以我们就要先拷贝一个boxes，先进行旋转看看出没出界或者压没压到陷阱，我们是这样实现的。
judge(num) {
judgeGroup = new THREE.Group();
boxesCopy = [];
for(let i=0; i<boxes.length; i++) {
let geom = new THREE.BoxGeometry(ratio, ratio, ratio);
let mate = new THREE.MeshBasicMaterial({color: 0xffaa00, transparent: true, opacity: .8});
let mesh = new THREE.Mesh(geom, mate);
mesh.position.copy(boxes[i].position);
boxesCopy[i] = mesh;
}
if(num == 1) {
var offset = new THREE.Vector3(box3.max.x, 0, 0);
judgeGroup.position.copy(offset);
boxesCopy.forEach(d => {
d.position.sub(offset);
judgeGroup.add(d);
})
judgeGroup.rotation.z = - Math.PI / 2;
} else if(num == 2) {
var offset = new THREE.Vector3(box3.min.x, 0, 0);
judgeGroup.position.copy(offset);
boxesCopy.forEach(d => {
d.position.sub(offset);
judgeGroup.add(d);
})
judgeGroup.rotation.z = Math.PI / 2;
} else if(num == 3) {
var offset = new THREE.Vector3(0, 0, box3.min.z);
judgeGroup.position.copy(offset);
boxesCopy.forEach(d => {
d.position.sub(offset);
judgeGroup.add(d);
})
judgeGroup.rotation.x = - Math.PI / 2;
} else if(num == 4) {
var offset = new THREE.Vector3(0, 0, box3.max.z);
judgeGroup.position.copy(offset);
boxesCopy.forEach(d => {
d.position.sub(offset);
judgeGroup.add(d);
})
judgeGroup.rotation.x = Math.PI / 2;
}
judgeGroup.updateMatrixWorld();
let canPass = true;
boxesCopy.forEach(d => {
var trans = new THREE.Vector3();
d.matrixWorld.decompose(trans, new THREE.Quaternion(), new THREE.Vector3());
let x = Math.round((trans.x - 5) / 10);
let z = Math.round((trans.z - 5) / 10);
let y = Math.round((trans.y + 5) / 10);
if(x > -1 || x < -7 || z > -1 || z < -8) {
canPass = false;
} else {
square[this.game].trap.forEach(d => {
if(d[0] == x && d[1] == z && y == 1) {
canPass = false;
}
})
}
})
return canPass;
},boxesCopy就是对boxes进行的拷贝，num就是我们的上下左右操作，最后一个循环就是判断是否可翻转，x,y,z值分别对应我们的格子，if判断时候出界，因为x的界限就是-1,-7，z的界限就是-1,-8。else是判断是否压到陷阱，只要有一个成立，canPass就会变成false。这就完成了简单的旋转判断。
3. 获胜的判定
获胜的判定很简单，在每一个旋转之后，比较boxes和end数组，如果两个数组一样，那么就说明胜利了，代码如下
computedWin() {
let win = true;
let temp = [];
boxes.forEach(d => {
let x = Math.round((d.position.x - 5) / 10);
let z = Math.round((d.position.z - 5) / 10);
temp.push([x, z]);
})
square[this.game].end.forEach(d => {
if(!temp.some(dd => dd[0] == d[0] && dd[1] == d[1])) {
win = false;
}
})
if(win) {
this.win();
}
},最后加上一点tween动画，这样我们就完成了一个逻辑转体的游戏，游戏玩起来还是比较有意思的。
转载请注明地址：郭先生的博客
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-08-20 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录