three.js 制作一个三维的推箱子游戏

1. 定义一些数组，要有开始箱子数组、结束箱子数组、地面数组还有墙面数组，有这四个数组就可以组成一个关卡。
2. 根据数组初始化地面墙面箱子和目标地点标志物。
3. 使用FirstPersonControls控制器，控制相机移动，根据地面箱子和墙面算出可移动区域。
4. 根据相机正对箱子时，用鼠标点击箱子，控制箱子移动，并做成功性校验。

1. 定义数组

```wallArr = [[0, 0], [1, 0], [2, 0], [3, 0], [3, 1], [4, 1], [4, 2], [4, 3], [5, 3], [5, 4], [5, 5], [5, 6], [4, 6], [3, 6], [2, 6], [1, 6], [0, 6], [0, 5], [0, 4], [0, 3], [0, 2], [0, 1]]
scopeArr = [[1, 1], [2, 1], [1, 2], [2, 2], [3, 2], [1, 3], [2, 3], [1, 4], [4, 4], [1, 5], [2, 5], [3, 5], [4, 5]];
boxArr = [[3, 3], [2, 4], [3, 4]];
targetArr = [[2, 2], [1, 3], [2, 3]]; ```

2. 根据箱子初始位置数组初始化箱子

```initBox() {
if (boxGroup) {
scene.remove(boxGroup)
}
boxGroup = new THREE.Group();
boxGroup.name = 'box_group'
boxArr.forEach(d => {
var boxGeom = new THREE.BoxGeometry(40, 40, 40);
var boxMate = [];
boxGeom.faces.forEach(d => boxMate.push(new THREE.MeshBasicMaterial({ map: textureBox })))
var boxMesh = new THREE.Mesh(boxGeom, boxMate);
boxMesh.position.set(d[0] * 40 - 20, 20, d[1] * 40 - 20);
boxMesh.name = 'box';
})
//判断是否赢得比赛
this.isWinner(boxArr, targetArr)
}```

3. 根据地面数组初始化地面

```initGround() {
textureGround.wrapS = textureGround.wrapT = THREE.RepeatWrapping;
textureGround.repeat.set(50, 50);
textureGroundNormal.wrapS = textureGroundNormal.wrapT = THREE.RepeatWrapping;
textureGroundNormal.repeat.set(50, 50);
var materialGround = new THREE.MeshPhongMaterial({
map: textureGround
})
materialGround.normalMap = textureGroundNormal;
materialGround.specularMap = textureGroundSpecular;
var ground = new THREE.Mesh(new THREE.PlaneGeometry(1000, 1000, 1, 1), materialGround);
ground.rotation.x = - Math.PI / 2;
}```

4. 根据墙数组初始化地面

```initWall() {
wallArr.forEach(d => {
var wallBox = new THREE.BoxGeometry(40, 40, 40);
var material = new THREE.MeshPhongMaterial({
map: normal,
bumpMap: bump,
bumpScale: 1
})
var wall = new THREE.Mesh(wallBox, material);
wall.position.x = d[0] * 40 - 20;
wall.position.y = 20;
wall.position.z = d[1] * 40 - 20;
})
}```

5. 根据目标数组初始化目标物

```initTarget() {
let hongqi = object.children[0];
targetArr.forEach(d => {
hongqi.position.set(d[0] * 40 - 20, -50, d[1] * 40 - 20)
hongqi.scale.set(0.12, 0.12, 0.12)
hongqi.material = new THREE.MeshNormalMaterial({ side: THREE.DoubleSide });
})
})
}```

6. 监听箱子的点击事件

```initEventListener() {
raycaster = new THREE.Raycaster();
event.preventDefault();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
}, false)
if (scene.children && scene.getObjectByName('box')) {
raycaster.setFromCamera(mouse, camera);
let intersects = raycaster.intersectObjects(scene.getObjectByName('box_group').children);
if (intersects[0] && intersects[0].object.name == 'box') {
this.computeMove(intersects[0].object, camera.position);
}
}
})
}```

7. 监听游戏成功

```isWinner(arr1, arr2) {
let boo = true; //true为赢
arr1.forEach(d => {
let res = arr2.some(dd => {
return d[0] == dd[0] && d[1] == dd[1]
})
if(!res) {
boo = false;
}
})
if(boo) {
setTimeout(() => {
},100)
}
}```

0 条评论

• 听说玩这些游戏能提升编程能力？

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

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

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

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

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

• HTML5 游戏引擎深度测评

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

• HTML5游戏引擎深度测评

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

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

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

• HTML5 学习总结（四）——canvas绘图、WebGL、SVG

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

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

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

• Oculus + Node.js + Three.js 打造VR世界

Oculus Rift 是一款为电子游戏设计的头戴式显示器。这是一款虚拟现实设备。这款设备很可能改变未来人们游戏的方式。 周五Hackday Showcase的...

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

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

• 技术干货分享：如何选择 HTML5 游戏引擎

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

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

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

• 干货分享：如何选择HTML5引擎？至关重要！

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

• 程序员带你回味童年，一起用C语言做一个“推箱子”玩！【文末源码】

还记得我们曾经的那个推箱子吗，记得小时候家里只有按键的诺基亚的时候，推箱子、贪吃蛇都是我天天最经常玩的游戏，然后最近正好有小伙伴问我有没有做过相关的开发，所以今...

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

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

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

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

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

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

• 懂技术又懂艺术的creative developer | Mix群聊

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

• 元宇宙相关的前端技术

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