如何运用three.js技术实现一个立体推箱子游戏的三维效果？

本文共计1109个文字，预计阅读时间需要5分钟。

今天早先发现大家更愿意看我做的three.js小作品，今天我就发一个3D版本推箱子游戏。其实webGL有很多框架，three.js并不适合做游戏引擎，但可以尝试做一些小游戏。在线案例请点击查看。

今天郭先生发现大家更喜欢看我发的three.js小作品，今天我就发一个3d版本推箱子的游戏，其实webGL有很多框架，three.js并不合适做游戏引擎，但是可以尝试一些小游戏。在线案例请点击

要制作一个推箱子游戏，正常要有以下4个步骤

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

下面我们上代码分析代码

1. 定义数组

这四个数组分别是墙的数组、地面的数组、箱子初始位置数组和目标数组。