想不想玩会动的桌子？不过这种物理现象可不咋容易出现。别急，慢慢研究，科技正不断发展。要不来试下，微风轻轻吹过的感觉怎么样？接下来我给大家简单讲讲，怎么在游戏中弄出真实的自然风。这个玩法特有趣，设定下风的反应模型与加点风元素后，真实感就更上了一层楼。
为3D模型添加风敏度
想感受真正的风吹感觉吗？很简单，只需要给3D物体加上个叫‘风敏感度’的设定，然后给每一个顶点设上‘风属性’就行了。这样电脑就能准确算出每个点受多少风力影响，控制每个物品摇曳生姿，让画面看起来更加逼真吸引人！
好，一起来感受下”风”的乐趣！我们先做个Perlin噪音图，这样就能知道哪里有风了~还能看到风的强弱用线条表示出来。想更真实地感受到风的话，就试试转动图片，看看风是怎么吹过来的。别忘了设定图像区域不然就像没头苍蝇似的到处乱跑咯。
创建简单的3D风效果
咱们试试用Three.js搞个有暴风雨效果的真3D画，比如《程序草地》里的那种。首先挑张漂亮点的地图，然后把每根草想象成90度翻转的圆锥，大约和地图一样大就好。
想要用 Three.js 做个三维游戏？先搜他了解一下！接着我们要链接好摄像头鼠标这些设备。让照明更丰富是个好主意！接下来，用上 initGrass和initTerrain这俩方法，种植一片绿油油的草地和山丘。比如 initGrass，设置 15×15棵草，随机给每棵草加些点缀，不是超有意思嘛!
搞定那些小草后，别忘了加点风感，因为底端的草地防风效果好些，顶上的部位更易被吹斜。有了这”风”功能，每个小草都能根据所在高度，摆出各种酷炫外形
优化并扩展
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()
记住，除了基本的设置和动画，我们还能让这个小景观变得更加花哨！比如说加上染色特效（就是shader啊），这样视觉效果就会非常好啦；另外，你还可以试着加入一些互动环节，让大家都来摸摸碰碰小景观；如果还是觉得不够爽快的话，那就再试试加一些音效或者粒子系统之类的东西，保证你们玩的开心到飞起！
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
玩游戏最重要的就是性能得好，还能适配各种设备！合理运用资源，抓紧时间，按设备适当调设，这样游戏就会跑得飞快，让大家玩得过瘾~
你知道，做个3D游戏可不简单，得多琢磨琢磨。学好物理引擎和图形技术，再懂点儿编程，游戏就会真实又好看，玩着老带劲了！
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 )
。
评论0