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动画，这样我们就完成了一个逻辑转体的游戏，游戏玩起来还是比较有意思的。

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

巴特西

three.js 制作逻辑转体游戏（下）

1. 根据数据渲染陷阱和目标区域

2. 对是否可以旋转进行判定

3. 获胜的判定

最新文章

热门文章