制作3D小汽车游戏(上)
之前一段时间家里和公司的事太多,一直没有时间写博客,最近腾出一段时间,看了一遍官方的examples,收货颇多,想整理一点东西出来,又苦于没有好的东西,three写点东西真是太难了。好吧,今天郭先生就写一个小汽车的3D游戏,如下图
这个游戏几乎没用新的知识点,用了只有有向包围盒OBB。官方demo,线案例请点击博客原文。但是在做游戏之前先来复习几个知识。
1 有向包围盒OBB
在之前的文章有专门写过Box3盒模型,它属于轴对齐包围盒,而OBB包围盒是一种有向的包围盒,显而易见他们的最大区别就是包围盒是否随模型转动,从他们的构造参数就可以看出一些特征
Box3( min : Vector3, max : Vector3 )
min - Vector3 表示包围盒的下边界。 默认值是( + Infinity, + Infinity, + Infinity )。
max - Vector3 表示包围盒的上边界。 默认值是( - Infinity, - Infinity, - Infinity )。
OBB( center : Vector3, halfSize : Vector3, rotation : Matrix3 )
center - Vector3 表示包围盒的中心。 默认值是( 0, 0, 0 )。
halfSize - Vector3 表示包围盒的中心。 默认值是( 0, 0, 0 )。
rotation - Matrix3 表示包围盒的中心。 默认值是( 1, 0, 0, 0, 1, 0, 0, 0, 1 )。
OBB的rotation是一个三维矩阵(而不是欧拉角,注意区别Object3D的rotation属性),它里面包含着盒模型的方向信息,除此之外几乎和Box3相同,OBB的方法和Box3也几乎相同。
2 欧拉角
在做游戏的过程中我们也需要了解一下欧拉角,它的前三个参数可以十分方便的表示旋转,但是如果绕多个轴同时旋转的时候可能就会遇到难以解决的问题了,这个时候可能就会用到第四个参数order。下面我们举个例子。
如上图有两个几何体(模拟两个轮子)mesh1和mesh2,mesh1车轴在z轴,mesh2在x轴。现在我们只让他们沿车轴转动,只需要改变一个参数即可。
mesh1.rotation.copy(new THREE.Euler(0, 0, z));
mesh2.rotation.copy(new THREE.Euler(x, 0, 0));
但是当我们现在不仅要让他们沿车轴滚动,还需要沿着y轴传动,具体转动如下
mesh1.rotation.copy(new THREE.Euler(0, y, z));
mesh2.rotation.copy(new THREE.Euler(x, y, 0));
但是得到的结果和我们想要的就不大一样了,mesh1沿着y轴转动的同时沿可以沿着z轴转动,而mesh2旋转就很奇怪。这件事就是因为欧拉角三个维度的旋转是有顺序的,在mesh1中y轴的转动不会受到z轴的影响,因为沿y轴会先于z轴旋转,而mesh2中y轴的转动就会受到x轴的影响,因此我们需要欧拉角的第四个参数order
mesh2.rotation.copy(new THREE.Euler(x, y, 0, 'YZX'));
这样就可以正常旋转了
3 游戏中用到的变量和常量
这节只说一下用到的变量,下一节在继续说。
let camera, camera2, scene, scene2;
let car = new THREE.Group(), orthoCar = new THREE.Group(), carHalfSize = new THREE.Vector3(), tyreArray = [], steering_wheel, buildObbArray = [];
const carHeight = 10, rotateMax = Math.PI / 6, speedCorrection = 0.04, rotateCorrection = 0.002,
let speed = 0, rotateTyre = 0, rotateRun = 0, rotateVector = new THREE.Vector3(1,0,0);
let view = 0;
camera, camera2: 分别是透视相机和正交投影相机
scene, scene2: 分别是主场景和小地图场景
car: 小车模型
orthoCar: 小地图中的小车模型
carHalfSize: 小车半长宽高数据
tyreArray: 包含小车四个轮子的组
steering_wheel: 小车的方向盘
buildObbArray: 建筑物数组
carHeight: 车高
rotateMax: 车转弯最大角度
speedCorrection, rotateCorrection: 速度系数和角度系数
speed: 车速
rotateTyre: 车轮相对于车的角度
rotateRun: 车相对于场景的旋转角度
rotateVector: 车前进方向向量,和rotateRun意义相同(表现形式不同)
ivew: 车的视角,0代表车内,1代表车外
下一节我们接着说。
转载请注明地址:郭先生的博客
制作3D小汽车游戏(上)的更多相关文章
- 制作3D小汽车游戏(下)
书接上回,这一节我们分模块说一说怎么写一个这样的游戏 1. 初始化场景.相机和渲染器 这几乎是绘制three必须做的事情,我们有两套场景和相机,一个是主场景和相机,另一个是小地图的场景和相机(用来俯视 ...
- 张瀚荣:如何用UE4制作3D动作游戏
转自:http://www.gamelook.com.cn/2015/06/218267 GameLook报道/ 6月5日,2015年第三期GameLook开放日‧虚幻引擎专场活动在上海正式举行,此次 ...
- 基于html5制作3D拳击游戏源码下载
今天给大家分享一款基于HTML5实现的3d拳王游戏源码.这款实例适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器. 在线预览 ...
- iOS 10 SceneKit 新特性 – SceneKit 制作 3D 场景框架
来源:scauos(@大朕东) 链接:http://www.jianshu.com/p/b30785bb6c97 开头语: 今天的主题是探索iOS10 SceneKit的新功能,你可以观看今年WWDC ...
- Unity3D实现3D立体游戏原理及过程
Unity3D实现3D立体游戏原理及过程 183 0 0 下面的教程是我今天整理的资料,教大家一步步完成自己的3D立体游戏,并向大家介绍一些3D成像的原理. 理论上,每个普通的非立体3 ...
- 用Phaser来制作一个html5游戏——flappy bird (二)
在上一篇教程中我们完成了boot.preload.menu这三个state的制作,下面我们就要进入本游戏最核心的一个state的制作了.play这个state的代码比较多,我不会一一进行说明,只会把一 ...
- 用Phaser来制作一个html5游戏——flappy bird (一)
Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏.在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏:Flappy Bird,希 ...
- 斗牛app上架应用宝、牛牛手机游戏推广、百人牛牛app应用开发、棋牌游戏上传、手游APP优化
联系QQ:305-710439斗牛app上架应用宝.牛牛手机游戏推广.百人牛牛app应用开发.棋牌游戏上传.手游APP优化 iOS开发iPhone/iPad平台安卓手机软件开发机型覆盖范围 超过113 ...
- 用webgl打造自己的3D迷宫游戏
用webgl打造自己的3D迷宫游戏 2016/09/19 · JavaScript · WebGL 原文出处: AlloyTeam 背景:前段时间自己居然迷路了,有感而发就想到写一个可以让人迷路 ...
随机推荐
- leetcode152. 乘积最大子序列
给定一个整数数组 nums ,找出一个序列中乘积最大的连续子序列(该序列至少包含一个数).示例 1:输入: [2,3,-2,4]输出: 6解释: 子数组 [2,3] 有最大乘积 6.示例 2:输入: ...
- leetcode137. 只出现一次的数字 II
给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现了三次.找出那个只出现了一次的元素.说明:你的算法应该具有线性时间复杂度. 你可以不使用额外空间来实现吗?示例 1:输入: [2,2 ...
- JVM(三)-java虚拟机类加载机制
概述: 上一篇文章,介绍了java虚拟机的运行时区域,Java虚拟机根据不同的分工,把内存划分为各个不同的区域.在java程序中,最小的运行单元一般都是创建一个对象,然后调用对象的某个 方法.通过上一 ...
- sqli-labs-master less05 前 知识点学习
1. left()函数: left(a,b)从左侧截取a的前b位,正确则返回1,错误则返回0 例: select left(database(),1)='s' 结果返回1 先查询数据库 datab ...
- FPGA 串口
VerilogHDL那些事儿_建模篇(黑金FPGA开发板配套教程) 作者:akuei2 说明:参照该书将部分程序验证学习一遍 学习时间:2014年5月3号 主要收获: 1. 对串口有初步了解: 2. ...
- 05 python开发之文件处理
05 python开发之文件处理 目录 05 python开发之文件处理 5 文件处理 5.1 字符编码 5.1.1 基本概念 5.1.2 发展历程 5.1.3 使用 5.2 文件处理基础 5.2.1 ...
- moviepy音视频剪辑:mask clip遮罩剪辑、遮片、蒙版的作用以及其包含的构成内容
☞ ░ 前往老猿Python博文目录 ░ 在阅读moviepy的类ImageClip的构造方法代码时,对于其中涉及遮罩的处理没有理解,到处查找遮罩的资料没有查到,最后到moviepy的官网上尝试了一下 ...
- PyQt(Python+Qt)学习随笔:invisibleRootItem方法访问QTreeWidget树型部件的隐形根节点
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 我们知道在数据结构上来说,任何树都是有根节点的,但我们在QTreeWidget对象中并没有看到界面上 ...
- pytorch SubsetRandomSampler 用法和说明
官网:https://pytorch.org/docs/stable/data.html?highlight=subsetrandomsampler#torch.utils.data.SubsetRa ...
- 获取radio的值及重置radio
获取:$('input[name=age]:checked').val(); 重置:$('input:radio[name=age]').prop('checked',false);