使用 Three.js 实现跳一跳游戏

跳一跳是微信小程序^[3]的一个小游戏。长按屏幕让小人蓄力跳跃，进行游玩。按照小人跳跃盒子的数量，以及特殊盒子加分项计算得分。,十分简单：长按鼠标蓄力、放手，方块就会从一个盒子跳到另一个盒子。然而就是这个小动作，让你一旦开始就魔性地停不下来。,Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。,,,,常用的相机有两种：,符合人心理习惯，近大远小。,,远处和近处一样大,,使用​​CubeGeometry​​创建一个立方几何体，使用​​MeshLambertMaterial​​材质用来配置立方体渲染看上去暗淡不光亮的表面，该材质会对场景中的光源产生反应，这个材质可以配置一些其他属性如：颜色等。,场景​​Scene​​主要是由几何体模型和光​​Light​​构成，在实际开发过程中，大多数三维场景往往需要设置光源，通过不同的光源对模型模拟生活中的光照效果，尤其是为了提高Threejs的渲染效果更需要设置好光源，就像摄影师拍照要打灯一样。,直接通过WebGL渲染器WebGLRenderer^[6]的​​.setSize()​​方法设置渲染尺寸为浏览器body区域宽高度。,目前为止实现了一个雏形,,,定义一个方块数组，判断从第二块开始向左右两边随机出现。​​this.cubeStat.nextDir = Math.random() > 0.5 ? "left" : "right"​​ 如上图：(这是由两张图组成的),,使用​​Geometry​​几何体对象有一系列的顶点属性和方法，通过​​.scale()​​、​​.translate()​​、​​.rotateX()​​等方法可以对几何体本身进行缩放、平移、旋转等几何变换。注意本质上都是改变结合体顶点位置坐标数据。,,,,,[1]fwjzzz.gitee.io/jump: https://fwjzzz.gitee.io/jump,[2]gitee.com/fwjzzz/Jump: https://gitee.com/fwjzzz/Jump,[3]微信小程序: https://baike.baidu.com/item/微信小程序/20171697,[4]PerspectiveCamera: http://www.yanhuangxueyuan.com/threejs/docs/index.html#api/zh/cameras/PerspectiveCamera,[5]OrthographicCamera: http://www.yanhuangxueyuan.com/threejs/docs/index.html#api/zh/cameras/OrthographicCamera,[6]WebGLRenderer: http://www.yanhuangxueyuan.com/threejs/docs/index.html#api/zh/renderers/WebGLRenderer