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场景就搭建完成了,最终结果是这样的(请原谅我根本没有美工的天分!)

 

 

场景搭建就到这里吧~个人觉得效果还是不错的,下一篇文章添加游戏控制。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

posted @ 2016-07-13 19:06  早一步是财富  阅读(1168)  评论(0编辑  收藏