3D游戏开发.docx

3D游戏开发3D游戏开发公维计算机图形和二维计算机图形的不同之处在于计算机存储了几何数据的三维表示，其用于计算和绘制最终的二维图像。除了游戏开发者之外，可能大部分的开发者所接触的开发过程都是2D应用的开发过程。与2D应用开发相比，3D应用拥有更炫的运行效果，更加真实和沉浸式的交互体验；除了在游戏开发中广泛使用之外也可以使用在地图、VR等领域。在H5中开发3D应用需要借助于 canvas 提供的 webgl 上下文对象。canvascanvas 是一个可以使用JavaScript来绘制图形的HTML元素，它可以用于绘制图表、制作图片构图或者制作动画。 canvas 因运行环境而异提供了多个上下文供开发者使用，比如我们通常使用到的绘制图表如分时K线、柱状图、折线图都是使用其2D上下文。而本文中要实现的“跳一跳复刻版”将要使用其webgl上下文以绘制3D图形。canvas.getContext(2d);canvas.getContext(webgl);webGLWebGL（Web Graphics Library）在 GPU 中运行。因此需要使用能够在 GPU 上运行的代码。这样的代码需要提供成对的方法（其中一个叫顶点着色器， 另一个叫片段着色器），并且使用一种类 C/C++ 的强类型语言GLSL（OpenGL Shading Language)。 每一对方法组合起来称为一个 program（着色程序）。简而言之，WebGL是一种在任何可兼容的网页浏览器中渲染3D图形的JavaScript API，但是直接使用WebGL来绘制图形需要很多额外的知识以及大量的开发成本，由此 Three.js 这一3D应用的开发框架应运而生。WebGL在浏览器中的支持情况如下图所示：three.jsthree.js = three + js 。three.js是使用js来绘制3D程序的库。three.js将许多webgl中的概念封装为易于操作的类目，让开发者可以以面向对象的方法使用其开发3D应用。three.js的出现大大降低了开发基于WebGL的3D应用的门槛。本文中重点的内容就是基于three.js开发实现“跳一跳”的Light版。但在正式的进入开发之前我们需要先了解一下两组Three.js中的重要的概念，这是我们进入核心内容的关键知识储备。一、场景（Scene）、渲染器（Renderer）、摄像机（Camera）此三大组件是创建3D图形的必备组件。其中：1. 场景用来容纳图形元素。场景是一切被渲染物体的容器，物体只有添加到场景中，才会被WebGL引擎渲染和处理。2. 相机的作用是定义可视域，即确定哪些物体是可见的。3. 渲染器则负责决定如何渲染出图像。二、形状（Geometry）、材质（Material）、模型（Mesh）此三大组件是构建可供渲染的物体的关键组件。其中：1. 形状即是点的集合，代表在3D的坐标系下的各种几何形状，几何形状和具体的物体展示是无关的。常用的几何形状包好立方体、球体、圆柱体等。2. 材质与图形表示方法是相关的，比如我们下文中将要使用到的MeshLambertMaterial材质就是常用材质的一种，材质决定了最终模型对光照的反应，Lambert材质一般用来表示只有漫反射的物体，如塑料；而phong材质用来表示有镜面反射的物体，如镜子。3. 模型是指最终的网格模型，也就是最终可展示物体效果。模型=形状+材质。【使用Light完成跳一跳复刻版】在Light体系下实现“跳一跳”小游戏并不复杂，除了以上需要的对Three.js的了解之外，其余知识要求与普通的light程序并无二致，在这里也不再涉及light工程具体的创建和开发流程，如有需要可以参考Light文档；由微信中“跳一跳”中的视图范围可以看出游戏界面可以由单个Light视图完成，具体的开发目录如下所展示：light/├──app.js├──app.less├──css│├──reset.css│└──style.less├── images├── index.html├── lib│├──package.json│└── px2rem.js├──project.json├──ui│└──ui.vue└── view└──game.vue其中 view/game.vue 为游戏界面，主要处理“挑一挑”工程初始化、计分、重置等关联功能，是本实例的核心代码的入口位置；如前所述，3D引擎初始化需要借助于 canvas 的3D渲染上下文，所以 view/game.vue 必须使用canvas ref=canvas/canvas 来初始化canvas的可操作对象，并通过对canvas当前dom节点引用的操作完成获取3D上下文的流程。完成上下文环境的初始化之后