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