WEBGL学习笔记（七）：实践练手1-飞行类小游戏之游戏控制

接上一节，游戏控制首先要解决的就是碰撞检测了

这里用到了学习笔记（三）射线检测的内容了

以鸟为射线原点，向前、上、下分别发射3个射线，射线的长度较短大概为10~30.

根据上一节场景的建设，我把y轴设为前进方向，z轴设为高度~

如果射线返回有结果，那么说明鸟遇到了障碍物。代码如下：

                var raycaster1 = new THREE.Raycaster(birdmesh.position, new THREE.Vector3(0, 1, 0), 0, 30)

                var raycaster2 = new THREE.Raycaster(birdmesh.position, new THREE.Vector3(0, 0, 1), 0, 10)

                var raycaster3 = new THREE.Raycaster(birdmesh.position, new THREE.Vector3(0, 0, -1), 0, 10)

                //

                var intersections1 = raycaster1.intersectObjects(objects);

                var intersections2 = raycaster2.intersectObjects(objects);

                var intersections3 = raycaster3.intersectObjects(objects);

                //如果前方有物体，向前速度为0

                if (intersections1.length > 0)

                {

                    velocity.y = 0;

                }

                //如果上方有物体，向上速度为0或为负值

                if (intersections2.length > 0 )

                {

                    if (velocity.z > 0)

                    {

                        velocity.z = 0;

                    }

                }

                //如果下方有物体，向下速度为0或为正值

                if (intersections3.length > 0) {

                    if (velocity.z < 0)

                    {

                        velocity.z = 0;

                    }

                }

                if (birdmesh.position.z < 10)

                {

                    birdmesh.position.z = 10;

                }

                if (birdmesh.position.z > 575) {

                    birdmesh.position.z = 575;

                }

                if (velocity.y==0)

                {

                    alert('您已死亡！');

                }

其次需要解决的就是飞行前进和重力下降的问题

首先新建一个

var velocity = new THREE.Vector3();

用velocity.x和.y以及.z来表示像3个方向的速度。

y方向为前进方向，给定一个固定值就行，检测到碰撞停止。

x方向不用管，因为x方向没有运动。

z方向为高度方向，要做到鼠标点击飞高一段距离，然后重力下降。

首先鼠标点击给定一个固定的向上的速度，然后速度加速递减（重力效果），代码如下

                    window.addEventListener('mousedown', function (event) {

                        velocity.z = 500;
                        mixer.clipAction(clip).setDuration(0.1).play();
                        
                        
                       
                    }, false);

                    window.addEventListener('mouseup', function (event) {
                        
                        mixer.clipAction(clip).setDuration(1).play();

                    }, false);

var delta = clock.getDelta();

                //这里100就是速度的一个因子，数值越大，重力效果越明显;

                velocity.z -= 9.8 * 100 * delta;

                birdmesh.position.z += velocity.z*delta;

                birdmesh.position.y += velocity.y * delta;

                velocity.y = 200;

另外上面代码仔细观察，你会发现鼠标点击和松开给定的鸟煽动翅膀的速度是不一样的

mixer.clipAction(clip).setDuration(1).play()

这是为了达到点击鼠标有鸟在努力向上飞的视觉效果~。

先写到这。全部源码先贴在这吧，其实上传工程的效果是最好的，但还没整理好。这个练手还没完！

预告后面两节

后1节：飞行类小游戏转置为win10通用UWP应用（我将上传至微软商店，敬请期待！）

后2节：飞行类小游戏转置为手机安卓应用

最后目前全部源码~

<!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 src="js/controls/OrbitControls.js"></script>

    <script>

        if (!Detector.webgl) Detector.addGetWebGLMessage();

            var camera, scene, renderer;

            var clock = new THREE.Clock();

            //var controls;

            var velocity = new THREE.Vector3();

            var birdmesh;

            var objects = [];

            init();

            animate();

            function init()

            {

                container = document.createElement( 'div' );

                document.body.appendChild( container );

//

                camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 1, 100000);

                camera.up.set(0, 0, 1);

                camera.lookAt(new THREE.Vector3(-1, 1, 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 );

                //------添加内容

                //---地板，平面

                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);

                ////箱子1

                //geometry = new THREE.BoxGeometry(2, 2, 2);

                //material = new THREE.MeshBasicMaterial({color:0x000000});

                //mesh = new THREE.Mesh(geometry, material);

                //mesh.position.set(0,0,0);

                //scene.add(mesh);

                ////箱子2

                //geometry = new THREE.BoxGeometry(2, 2, 2);

                //material = new THREE.MeshBasicMaterial({ color: 0xff0000 });

                //mesh = new THREE.Mesh(geometry, material);

                //mesh.position.set(100, 0, 0);

                //scene.add(mesh);

                ////箱子3

                //geometry = new THREE.BoxGeometry(2, 2, 2);

                //material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

                //mesh = new THREE.Mesh(geometry, material);

                //mesh.position.set(0, 100, 0);

                //scene.add(mesh);

                ////箱子4

                //geometry = new THREE.BoxGeometry(2, 2, 2);

                //material = new THREE.MeshBasicMaterial({ color: 0x0000ff });

                //mesh = new THREE.Mesh(geometry, material);

                //mesh.position.set(0, 0, 100);

                //scene.add(mesh);

                //天空盒

                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);

                //连续障碍物

                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);

                }

                //鸟

                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();

                    window.addEventListener('mousedown', function (event) {

                        velocity.z = 500;

                        mixer.clipAction(clip).setDuration(0.1).play();

                    }, false);

                    window.addEventListener('mouseup', function (event) {

                        mixer.clipAction(clip).setDuration(1).play();

                    }, false);

                } );

                renderer = new THREE.WebGLRenderer({ antialias: true });

                renderer.setPixelRatio(window.devicePixelRatio);

                renderer.setSize(window.innerWidth, window.innerHeight);

                container.appendChild( renderer.domElement );

                //控制

                //var controls = new THREE.OrbitControls(camera, renderer.domElement);

                //controls.addEventListener('change', render);

                //controls.target.set(0, 0, 0);

                //controls.update();

                //

                window.addEventListener('resize', function onWindowResize(event) {

                    renderer.setSize(window.innerWidth, window.innerHeight);

                    camera.aspect = 0.5 * window.innerWidth / window.innerHeight;

                    camera.updateProjectionMatrix();

                }, false);

            }

            //

            function animate() {

                requestAnimationFrame( animate );

                render();

            }

            function render() {

                var delta = clock.getDelta();

                //这里100就是速度的一个因子，数值越大，重力效果越明显,等效于velocity.y =(velocity.y*0.01- 9.8  * delta)*100;

                velocity.z -= 9.8 * 100 * delta;

                birdmesh.position.z += velocity.z*delta;

                birdmesh.position.y += velocity.y * delta;

                velocity.y = 200;

                var raycaster1 = new THREE.Raycaster(birdmesh.position, new THREE.Vector3(0, 1, 0), 0, 30)

                var raycaster2 = new THREE.Raycaster(birdmesh.position, new THREE.Vector3(0, 0, 1), 0, 10)

                var raycaster3 = new THREE.Raycaster(birdmesh.position, new THREE.Vector3(0, 0, -1), 0, 10)

                //

                var intersections1 = raycaster1.intersectObjects(objects);

                var intersections2 = raycaster2.intersectObjects(objects);

                var intersections3 = raycaster3.intersectObjects(objects);

                //是否检测到               

                if (intersections1.length > 0)

                {

                    velocity.y = 0;

                }

                if (intersections2.length > 0 )

                {

                    if (velocity.z > 0)

                    {

                        velocity.z = 0;

                    }

                }

                if (intersections3.length > 0) {

                    if (velocity.z < 0)

                    {

                        velocity.z = 0;

                    }

                }

                if (birdmesh.position.z < 10)

                {

                    birdmesh.position.z = 10;

                }

                if (birdmesh.position.z > 575) {

                    birdmesh.position.z = 575;

                }

                if (velocity.y==0)

                {

                    alert('您已死亡！');

                }

                mixer.update(delta);

                camera.position.set(birdmesh.position.x+100, birdmesh.position.y - 50, birdmesh.position.z);

                renderer.clear();

                renderer.render( scene, camera );

            }

    </script>

</body>

</html>

WEBGL学习笔记（七）：实践练手1-飞行类小游戏之游戏控制的更多相关文章

Typescript 学习笔记四：回忆ES5 中的类
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
（转）Qt Model/View 学习笔记 (七)——Delegate类
Qt Model/View 学习笔记 (七) Delegate 类概念与MVC模式不同,model/view结构没有用于与用户交互的完全独立的组件.一般来讲, view负责把数据展示给用户,也 ...
java jvm学习笔记七（jar包的代码认证和签名）
欢迎装载请说明出处:http://blog.csdn.net/yfqnihao 前言: 如果你循序渐进的看到这里,那么说明你的毅力提高了,jvm的很多东西都是比较抽像的,如果不找相对应的代码来辅助理解 ...
java之jvm学习笔记五(实践写自己的类装载器)
java之jvm学习笔记五(实践写自己的类装载器) 课程源码:http://download.csdn.net/detail/yfqnihao/4866501 前面第三和第四节我们一直在强调一句话,类 ...
Learning ROS for Robotics Programming Second Edition学习笔记(七) indigo PCL xtion pro live
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...
Typescript 学习笔记七：泛型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
python3.4学习笔记(七) 学习网站博客推荐
python3.4学习笔记(七) 学习网站博客推荐深入 Python 3http://sebug.net/paper/books/dive-into-python3/<深入 Python 3& ...
Go语言学习笔记七：函数
Go语言学习笔记七: 函数 Go语言有函数还有方法,神奇不.这有点像python了. 函数定义 func function_name( [parameter list] ) [return_types ...
webgl学习笔记五-纹理
写在前面建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放术语 : 纹理 :图像图形装配区域 :顶点着色器顶点坐标 ...

随机推荐

**ML : ML中的最优化方法
前言: 在机器学习方法中,若模型理解为决策模型,有些模型可以使用解析方法.不过更一般的对模型的求解使用优化的方法,更多的数据可以得到更多的精度. AI中基于归纳的方法延 ...
OpenCV: kalman滤波的代码段
序言:在我的疲劳检测工程 AviTest中!显示框为320*240,使用OpenCV的kalman滤波算法,可以实现简单的锁相追踪-实现对眼球的位置锁定. 代码如下: CvPoint Wishchin ...
js手机移动端选择插件 mobileSelect.js
一.mobileSelect获取方法 mobileSelect支持单选.多级联动.自定义回调函数.二次渲染.最新版本下载地址[2017-09-21更新]: https://github.com/onl ...
物理cpu与逻辑cpu概述
物理cpu与逻辑cpu概述(本博客属于转载部分内容:主要学习目的用于大数据平台Hadoop之yarn资源调度的配置) 一.yarn资源调度器中主要的资源分类 1.memory(内存) 2. ...
jupyter notebook主目录修改
转自http://blog.csdn.net/c437yuyang/article/details/54836303 1.打开 cmd 输入命令 jupyter notebook --generate ...
[置顶] tcpflow 抓包
转自: http://www.rwifeng.com/jekyll/update/2015/04/16/how-to-tcpflow/ tcpflow 抓包 Apr 16, 2015 大家都知道 t ...
html第六节课
JavaScript 一.JavaScript简介 1.JavaScript是个什么东西? 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它与Java什么关系? 没有什么直接的联系 ...
使用Arcgis进行画面(线)并计算大小(长度)。
在使用Arcgis API for JavaScript进行做地图开发的过程中,在地图进行画线.画面是经常使用的功能.本文主要介绍这一功能. 本文适用Arcgis API版本:Arcgis API f ...
[MySQL优化案例]系列 — RAND()优化
众所周知,在MySQL中,如果直接 ORDER BY RAND() 的话,效率非常差,因为会多次执行.事实上,如果等值查询也是用 RAND() 的话也如此,我们先来看看下面这几个SQL的不同执行计划和 ...
phpstrom 汉化
-- ---------- _--------------------------------------------------- ------------------- ----- ------- ...

WEBGL学习笔记（七）：实践练手1-飞行类小游戏之游戏控制

WEBGL学习笔记（七）：实践练手1-飞行类小游戏之游戏控制的更多相关文章

随机推荐

热门专题