当前位置: 首页 > 服务 > 艺源智库
【小程序】小程序•小故事(16)——小游戏渲染
时间:2018-07-26 15:30:19
文章发布:杜凯
原创作者:文雨晨
来源:微信开发者

《跳一跳》小游戏在 2017年12月28日正式发布,一周内 DAU 突破一亿,为小游戏开放生态赢得口碑。它操作简单,节奏轻快,凭借着快速复活机制以及强大的社交属性掀起了一股全民潮流。


其实,这个小游戏里仅有两个元素,黑色小人和各色基座。游戏规则也很简单,起跳前,小黑人压缩自己的身体来蓄力,根据蓄力时间决定距离来跳到下一个基座上。

 

今天的小故事,想要跟大家分享小游戏的渲染能力,我们以跳一跳唱片机为例,简要介绍一下如何展现一个三维物体~ ( 3D渲染引擎选用 Three.js )




步骤一

创建一个场景 Scene


游戏的容器,用来放置光源,照相机和唱片机。


let scene = new THREE.Scene()


步骤二

选择合适的照相机 Camera


抽象来说,照相机定义了三维空间到二维屏幕的投影方式。


因投影方式不同,相机又分为透视投影相机正交投影相机


透视投影中的四棱柱和正交投影中的立方体被称为视景体,它是三维世界里屏幕上可见的区域,也就是照相机的视野。


视景体外的物体会被剪裁掉不参与渲染。透视投影更接近真实世界,有近大远小的感觉。而正交投影将物体以原比例平行投影到近剪裁面上,不会有大小缩放。


在跳一跳中我们使用了正交投影相机。



let camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, near, far )


步骤三

创建光源 light


let ambientLight = new THREE.AmbientLight(0xffffff, 0.8);

let directionalLight = new THREE.DirectionalLight(0xffffff, 0.28);


创建一个环境光和直射光, 环境光没有特定光源,它将光线均匀照射在场景中。直射光模拟真实世界太阳光。


步骤四

定义几何体 Geometry,

材质 Material,合成 Mesh


Geometry 几何体,定义了一个物体的形状,包含顶点,线,面和法向量等信息。


let boxGeometry = new THREE.BoxGeometry(2, 2, 2)


对于唱片机我们创建了三个几何体,两个长方体和一个圆柱体。



Material 材质,定义了一个物体的外观,例如颜色,透明度,光照属性,融合模式。

 

顶部透明盖子,底座和唱片的使用的Lambert材质,这种材质只考虑漫反射而不考虑镜面反射, 通常用于创建较暗淡无高光的物体, 其中 texture 是纹理贴图,我们通过纹理映射将这个二维图像贴到三维的方块上。


let transparentMaterial = new THREE.MeshLambertMaterial({ color: ‘white’, transparent: true, opacity: 0.5, map: texture })


最后我们通过 Mesh 我们将材质应用到几何体上。



标签: 小程序
*版权申明:本站部分文章由艺源科技收集整理,不代表我们的观点。如果这篇转载侵犯您的版权,请及时联系我们删除!
为您推荐
最新文章