WEBGL学习笔记（六）：实践练手1-飞行类小游戏场景搭建
游戏已经做好，但是博客园不能支持哈，我在我的独立博客里面加入了这个游戏。
加载时候会黑屏，等待数秒即可，点击这里体验试玩：FlappyBird3d游戏试玩
不写代码，没有长进。
开始写一个3d小游戏吧~估计这一篇写不完的，先写一个框架。基本上所有的都是这个套路
<!DOCTYPE html> <html lang="en"> <head> <title>练手</title> <meta charset="utf-8"> </head> <body> <script src="build/three.js"></script> <script src="js/Detector.js"></script> <script>
//检测浏览器是否支持webgl if (!Detector.webgl) Detector.addGetWebGLMessage(); var SCREEN_WIDTH = window.innerWidth; var SCREEN_HEIGHT = window.innerHeight;
//全局变量
var camera, scene, renderer;
//初始化和游戏循环动画（一般都是这样代码重构的）
init();
animate(); function init() { container = document.createElement( 'div' ); document.body.appendChild( container ); //摄像头 camera = new THREE.PerspectiveCamera( 40, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 ); camera.position.y = 300; camera.target = new THREE.Vector3( 0, 150, 0 );
//场景 scene = new THREE.Scene(); scene.add( new THREE.HemisphereLight( 0x443333, 0x222233 ) ); var light = new THREE.DirectionalLight( 0xffffff, 1 );
//光源 light.position.set( 1, 1, 1 ); scene.add( light ); //渲染器 renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); container.appendChild( renderer.domElement );
//~~~在下面添加3d对象。
//~~~
//固定写法，当窗体尺寸变化，渲染器进行相应处理 window.addEventListener('resize', onWindowResize, false); } // function onWindowResize( event ) { SCREEN_WIDTH = window.innerWidth; SCREEN_HEIGHT = window.innerHeight; renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT ); camera.aspect = 0.5 * SCREEN_WIDTH / SCREEN_HEIGHT; camera.updateProjectionMatrix(); } //游戏循环 function animate() { requestAnimationFrame( animate ); render(); } //渲染
function render() { renderer.clear(); renderer.render( scene, camera ); } </script> </body> </html>
现在这个模型什么都没有添加，我准备练手写一个飞行类的小游戏。场景设置如下：
控制和飞行碰撞不是这篇文章中解决的问题~主要是搭建场景。首先是地板，地板是一个平面。
首先这是一个飞行类的小游戏，类似3d版的flappybird吧。
1.首先插入地板，地板是一个平面。
geometry = new THREE.PlaneGeometry(512, 200000); //geometry.rotateX(-Math.PI / 2); var texture = new THREE.TextureLoader().load('img/dd.jpg'); texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(8, 800) material = new THREE.MeshBasicMaterial({ map: texture }); //material = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } ); mesh = new THREE.Mesh(geometry, material); mesh.position.set(0, 0, 0); scene.add(mesh); objects.push(mesh);
2.添加天空盒。
var textureLoader = new THREE.TextureLoader(); var materials = [ new THREE.MeshBasicMaterial({ map: textureLoader.load('img/px.jpg') }), // right new THREE.MeshBasicMaterial({ map: textureLoader.load('img/nx.jpg') }), // left new THREE.MeshBasicMaterial({ map: textureLoader.load('img/py.jpg') }), // top new THREE.MeshBasicMaterial({ map: textureLoader.load('img/ny.jpg') }), // bottom new THREE.MeshBasicMaterial({ map: textureLoader.load('img/pz.jpg') }), // back new THREE.MeshBasicMaterial({ map: textureLoader.load('img/nz.jpg') }) // front ]; mesh = new THREE.Mesh(new THREE.BoxGeometry(100000, 100000, 100000, 7, 7, 7), new THREE.MultiMaterial(materials)); mesh.scale.x = -1; scene.add(mesh);
3.添加障碍物
//连续障碍物 for (var i = 0; i < 50;i++) { var ht=Math.random() * 450; geometry = new THREE.BoxGeometry(80, 20, ht); material = new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff }); mesh = new THREE.Mesh(geometry, material); mesh.position.x =0; mesh.position.y = (i+1) * 500; mesh.position.z = ht / 2; scene.add(mesh); objects.push(mesh); geometry = new THREE.BoxGeometry(80, 20, 450-ht); mesh = new THREE.Mesh(geometry, material); mesh.position.x = 0; mesh.position.y = (i + 1) * 500; mesh.position.z = ht + 140 + (450 - ht) / 2; scene.add(mesh); objects.push(mesh); }
4.插入鸟，这个鸟是会扇动翅膀的，关于怎么让鸟会动~请看上一节！
//鸟 var loader = new THREE.JSONLoader(); loader.load( "models/animated/flamingo.js", function( geometry ) { geometry.computeVertexNormals(); geometry.computeMorphNormals(); var material = new THREE.MeshPhongMaterial( { color: 0xffffff, morphTargets: true, morphNormals: true, vertexColors: THREE.FaceColors, shading: THREE.SmoothShading } ); birdmesh = new THREE.Mesh( geometry, material ); birdmesh.position.x = 0; birdmesh.position.y = 0; birdmesh.position.z = 200; birdmesh.scale.set(0.2, 0.2, 0.2); birdmesh.rotateX(-Math.PI / 2); birdmesh.rotateZ(Math.PI); scene.add(birdmesh); mixer = new THREE.AnimationMixer(birdmesh); var clip = THREE.AnimationClip.CreateFromMorphTargetSequence('bd', geometry.morphTargets, 30); mixer.clipAction(clip).setDuration(1).play();
这样3d场景就搭建完成了，最终结果是这样的（请原谅我根本没有美工的天分！）
场景搭建就到这里吧~个人觉得效果还是不错的，下一篇文章添加游戏控制。
。
