96 lines
3.1 KiB
JavaScript
96 lines
3.1 KiB
JavaScript
import { BoxGeometry, Mesh, MeshBasicMaterial, Group } from 'three';
|
|
import { TextureLoader } from 'three/src/loaders/TextureLoader';
|
|
import { MotionEngine } from '../../lib/MotionEngine';
|
|
|
|
class PuzzleGame1 {
|
|
constructor(context, image, w, h) {
|
|
this.object = new Group();
|
|
const aq = new MotionEngine();
|
|
const pr = [[0, -1], [0, 1], [1, 0], [-1, 0], [0, 0], [0, 2]];
|
|
let d = 1.2;
|
|
|
|
let bm = new BoxGeometry(1, 1, 1);
|
|
let uv = bm.getAttribute('uv');
|
|
|
|
for (let i = 0; i < 6; i++) {
|
|
let s = [(i % w) / w, (i % h) / h];
|
|
//top left
|
|
uv.array[8 * i] = s[0];
|
|
uv.array[8 * i + 1] = s[1] + 1 / h;
|
|
//top right
|
|
uv.array[8 * i + 2] = s[0] + 1 / w;
|
|
uv.array[8 * i + 3] = s[1] + 1 / h;
|
|
//bottom left
|
|
uv.array[8 * i + 4] = s[0];
|
|
uv.array[8 * i + 5] = s[1];
|
|
//bottom right
|
|
uv.array[8 * i + 6] = s[0] + 1 / w;
|
|
uv.array[8 * i + 7] = s[1];
|
|
}
|
|
|
|
let material = new MeshBasicMaterial({
|
|
map: new TextureLoader().load(image)
|
|
});
|
|
//material.map.encoding = sRGBEncoding;
|
|
|
|
for (let i = 0; i < 6; i++) {
|
|
let b = bm.clone();
|
|
let mesh = new Mesh(b, material);
|
|
mesh.position.set((i % w) * d, (i % h) * d, 0);
|
|
let ri;
|
|
do {
|
|
ri = Math.floor(Math.random() * 6);
|
|
} while (ri == this.object.children.length);
|
|
mesh.rotation.set(pr[ri][0] * Math.PI / 2, pr[ri][1] * Math.PI / 2, 0);
|
|
mesh._ri = ri;
|
|
this.object.add(mesh);
|
|
}
|
|
|
|
this.object.children[0].onBeforeRender = () => {
|
|
this.update();
|
|
};
|
|
|
|
var check = () => {
|
|
if (!this.object.children.length) return false;
|
|
let i = 0;
|
|
for (let c of this.object.children) {
|
|
if (Math.abs(c.rotation.x - pr[i][0] * Math.PI / 2) > 0.0001 || Math.abs(c.rotation.y - pr[i][1] * Math.PI / 2) > 0.0001) return false;
|
|
i++;
|
|
}
|
|
return true;
|
|
};
|
|
|
|
let clickFn = (i) => {
|
|
if (!this.done && !aq.isActive(i.object)) {
|
|
i.object._ri = (i.object._ri + 1) % 6;
|
|
aq.add({
|
|
o: i.object,
|
|
a: { rotation: { x: pr[i.object._ri][0] * Math.PI / 2, y: pr[i.object._ri][1] * Math.PI / 2 } },
|
|
t: .5
|
|
});
|
|
}
|
|
};
|
|
|
|
this.object.children.forEach(c => {
|
|
context.clickable.add(c, clickFn);
|
|
});
|
|
|
|
this.update = () => {
|
|
aq.update();
|
|
if (aq.isIdle() && !this.done && check()) {
|
|
this.done = true;
|
|
this.object.children.forEach((c, i) => {
|
|
aq.add({
|
|
o: c,
|
|
a: { position: { x: i % w, y: i % h } },
|
|
t: 1,
|
|
f: i == 0 && this.onfinish
|
|
});
|
|
});
|
|
//context.dashboard.addPoints(10);
|
|
}
|
|
};
|
|
}
|
|
}
|
|
|
|
export { PuzzleGame1 } |