怎样开发优秀的HTML5游戏-迪斯尼《寻找奥兹之路》游戏技术详解（二）

来源：动视网责编：小采时间：2020-11-27 15:11:57

怎样开发优秀的HTML5游戏-迪斯尼《寻找奥兹之路》游戏技术详解（二）

怎样开发优秀的HTML5游戏-迪斯尼《寻找奥兹之路》游戏技术详解（二）:（接上文）桌面游戏通常创建于一个核心的物理引擎。因此，要在3D世界中模拟一个柔软的物体，需要一个完整的物理模拟器，并且建立一种可信的行为。 WebGL和JavaScript还不能奢华到可以运行一个完全成熟的物理模拟器。因此，在这个游戏中我们必须找到一种方式来

推荐度：

点击下载本文 文档为doc格式

导读怎样开发优秀的HTML5游戏-迪斯尼《寻找奥兹之路》游戏技术详解（二）:（接上文）桌面游戏通常创建于一个核心的物理引擎。因此，要在3D世界中模拟一个柔软的物体，需要一个完整的物理模拟器，并且建立一种可信的行为。 WebGL和JavaScript还不能奢华到可以运行一个完全成熟的物理模拟器。因此，在这个游戏中我们必须找到一种方式来

（接上文）桌面游戏通常创建于一个核心的物理引擎。因此，要在3D世界中模拟一个柔软的物体，需要一个完整的物理模拟器，并且建立一种可信的行为。

WebGL和JavaScript还不能奢华到可以运行一个完全成熟的物理模拟器。因此，在这个游戏中我们必须找到一种方式来创建风的效果。

我们在3D模型中为每一个对象嵌入“风敏度”的信息。3D模型的每个顶点有一个“风属性”，指定顶点应该要受到风速多大程度的影响。所以，这指定了3D物体的风敏度。然后，我们需要创建“风”本身。

我们通过创建包含Perlin噪声的图像来实现。此图片意在覆盖一块确定区域的风。所以，一个考虑它的好方法是，想象3D场景中一个特定矩形区域中像噪音一样覆盖一个画面的云。这幅图片每个像素的灰度值指定在一个特定的时刻3D区域中风力有多强。

为了创建风的效果，图像以恒定的速度和特定的方向即风的方向移动。并且为了确保“风的区域”不会影响场景中的任何内容，我们将风的图像环绕边界，限制于效果的区域内。

一个风的简单3D教程

现在，让我们通过Three.js在简单的3D场景创建一个风的效果。

我们将在一个简单的“程序草地”中创建风。

首先，让我们创建场景。我们将有一个简单的、质感平坦的地面。然后每一根草将简单地用倒立的圆锥展现。

布满小草的地面

下面是如何在Thress.js中用CoffeeScript创建这个简单的场景。

首先我们要设置Three.js，并把它与摄像头、鼠标，以及一些灯光结合在一起：

constructor: ->

 @clock = new THREE.Clock()

 @container = document.createElement( 'p' );
 document.body.appendChild( @container );

 @renderer = new THREE.WebGLRenderer();
 @renderer.setSize( window.innerWidth, window.innerHeight );
 @renderer.setClearColorHex( 0x808080, 1 )
 @container.appendChild(@renderer.domElement);

 @camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 );
 @camera.position.x = 5;
 @camera.position.y = 10;
 @camera.position.z = 40;

 @controls = new THREE.OrbitControls( @camera, @renderer.domElement );
 @controls.enabled = true

 @scene = new THREE.Scene();
 @scene.add( new THREE.AmbientLight 0xFFFFFF )

 directional = new THREE.DirectionalLight 0xFFFFFF
 directional.position.set( 10,10,10)
 @scene.add( directional )

 # Demo data
 @grassTex = THREE.ImageUtils.loadTexture("textures/grass.png");
 @initGrass()
 @initTerrain()

 # Stats
 @stats = new Stats();
 @stats.domElement.style.position = 'absolute';
 @stats.domElement.style.top = '0px';
 @container.appendChild( @stats.domElement );
 window.addEventListener( 'resize', @onWindowResize, false );
 @animate()

initGrass和initTerrain函数调用分别用小草和地面填充场景：

initGrass:->
 mat = new THREE.MeshPhongMaterial( { map: @grassTex } )
 NUM = 15
 for i in [0..NUM] by 1
 for j in [0..NUM] by 1
 x = ((i/NUM) - 0.5) * 50 + THREE.Math.randFloat(-1,1)
 y = ((j/NUM) - 0.5) * 50 + THREE.Math.randFloat(-1,1)
 @scene.add( @instanceGrass( x, 2.5, y, 5.0, mat ) )

instanceGrass:(x,y,z,height,mat)->
 geometry = new THREE.CylinderGeometry( 0.9, 0.0, height, 3, 5 )
 mesh = new THREE.Mesh( geometry, mat )
 mesh.position.set( x, y, z )
 return mesh

在此我们创建了一个格子，由15*15的小草组成。我们添加了一个随机数到每根小草的位置，让它们不会因为排列的太整齐而有些古怪。

此地形仅仅是一个水平面，放置在这些小草的根部（Y = 2.5）。

initTerrain:->
 @plane = new THREE.Mesh( new THREE.PlaneGeometry(60, 60, 2, 2), new THREE.MeshPhongMaterial({ map: @grassTex }))
 @plane.rotation.x = -Math.PI/2
 @scene.add( @plane )

所以到目前为止，我们所做的只是简单地创建了一个Three.js场景，并且添加了一些小草，由程序生成的倒立圆锥创建，以及一个简单的地面。

到目前为止没有任何特别之处。

现在是添加风的时候了。第一件事，我们希望把风敏度信息嵌入到草的3D模型中。

我们要把此信息以自定义属性嵌入到小草3D模型的每个顶点中。我们将要使用的规则是：每个小草模型的底部（圆锥体的顶）具有的风敏度为0，因为它贴在地面上。小草模型（圆锥体的底部）的顶部具有最大的风敏度，因为它远离地面。

下面是如何重写instanceGrass函数来为小草的3D模型添加风敏度作为自定义参数。

instanceGrass:(x,y,z,height)->

 geometry = new THREE.CylinderGeometry( 0.9, 0.0, height, 3, 5 )

 for i in [0..geometry.vertices.length-1] by 1
 v = geometry.vertices[i]
 r = (v.y / height) + 0.5
 @windMaterial.attributes.windFactor.value[i] = r * r * r

 # Create mesh
 mesh = new THREE.Mesh( geometry, @windMaterial )
 mesh.position.set( x, y, z )
 return mesh

怎样开发优秀的HTML5游戏-迪斯尼《寻找奥兹之路》游戏技术详解（二）

推荐度：

点击下载本文 文档为doc格式

标签：如何游戏 html5

热门焦点

怎样开发优秀的HTML5游戏-迪斯尼《寻找奥兹之路》游戏技术详解（二）

怎样开发优秀的HTML5游戏-迪斯尼《寻找奥兹之路》游戏技术详解（二）

怎样开发优秀的HTML5游戏-迪斯尼《寻找奥兹之路》游戏技术详解（二）

最新推荐

猜你喜欢

热门推荐