你玩过第一人称的射击游戏吗?大作CF,CS类型的。本教程,我们将模拟相同的相机运动:摄像机在地面,将和地面产生碰撞效果,并可以与场景中的任何其他模型也会发生碰撞。

如何实现碰撞

为了实现这种效果,我们必须要做三个步骤:

定义并应用重力

首先要做的是定义重力矢量,定义重力。在地球这样的世界中,重力的方向是沿Y轴向下,我们可以随意改变它

scene.gravity = new BABYLON.Vector3(0, -9.81, 0);

重力可以应用于你在代码中定义的相机:

camera.applyGravity = true;

定义椭圆体

下一个重要的步骤是在我们的相机周围定义椭球体。这个椭球代表我们玩家的尺寸:当一个模型与这个椭球体接触时会发生碰撞事件,防止我们的相机太靠近这个模型:


Babylon.js的相机上的椭球的默认值为(0.5,1,0.5),但你可以同过自己的修改默认值。在下面的例子中,我们将相机的椭球修改的比默认的大一些:

camera.ellipsoid = new BABYLON.Vector3(1, 1, 1);

注意,相机的椭球体是偏移的,以将相机视点设置到椭球体的顶部。你可以通过更新camera.ellipsoidOffset属性来控制此行为。
相机的最终位置计算:

finalPosition = position - vec3(0,ellipsoid.y,0)+ ellipsoidOffset

应用碰撞

完成之前的配置以后,最后一步是设置开启场景中的碰撞检测:

// 开启碰撞
scene.collisionsEnabled = true;
camera.checkCollisions = true;

并开启哪些模型可以与相机产生碰撞:

ground.checkCollisions = true;
box.checkCollisions = true;

是不是很简单,你可以访问官方案例查看案例:官方案例
此案例中,相机将于地面发生碰撞,离开地面会一直坠落。并且靠近箱子,也会产生碰撞,无法穿过。

模型与模型的碰撞

你还可以使用mesh.ellipsoid属性和mesh.moveWithCollisions(velocity)函数对模型执行相同的操作。此函数将尝试根据给定的速度移动网格,并检查当前模型与激活了checkCollisions的所有模型之间是否产生了碰撞。
你还可以使用mesh.ellipsoidOffset在模型上移动椭球体(默认情况下,椭球体在网格上居中)

var speedCharacter = 8;
var gravity = 0.15;
var character = "你的模型";character.ellipsoid = new BABYLON.Vector3(0.5, 1.0, 0.5);
character.ellipsoidOffset = new BABYLON.Vector3(0, 1.0, 0);var forwards = new BABYLON.Vector3(parseFloat(Math.sin(character.rotation.y)) / speedCharacter, gravity, parseFloat(Math.cos(character.rotation.y)) / speedCharacter);
forwards.negate();
character.moveWithCollisions(forwards);
//或者
var backwards = new BABYLON.Vector3(parseFloat(Math.sin(character.rotation.y)) / speedCharacter, -gravity, parseFloat(Math.cos(character.rotation.y)) / speedCharacter);
character.moveWithCollisions(backwards);

下面,查看一下官方案例演示:点击此处

弧形旋转相机

ArcRotateCamera也可以实现碰撞检测,但不会和自由相机一样沿着障碍物旋转,当产生碰撞时,相机不会移动。
开启碰撞,只需要设置camera.checkCollisions = true,你可以使用以下代码设置相机的碰撞半径:

camera.collisionRadius = new BABYLON.Vector3(0.5, 0.5, 0.5)

8 Babylonjs基础入门 相机,模型碰撞和重力效果相关推荐

  1. 5 Babylonjs基础入门 相机

    在Babylon.js中,最常用的两个相机有可能是: 用于第一人称运行的通用相机 用于查看物体的弧形旋转相机 虽然随着WebVR的出现,这可能会改变. 对于创建的相机对象,必须要将相机附加到canva ...

  2. 16 Babylonjs基础入门 阴影

    在本节中,我们将学习如何在Babylon.js中创建阴影.阴影现在实现的是动态阴影,它们会根据光源动态生成.你可能需要首先查看一个案例:点击这里. 实现阴影 使用Babylon.js的ShadowGe ...

  3. babylon101| 08. Cameras, Mesh Collisions and Gravity(相机、碰撞和重力)

    在本教程中,我们将模拟摄像机运动,摄像机在地板上,与地面发生碰撞,并可能与场景中的任何对象发生碰撞,实现步骤如下: 1.Define and apply gravity  定义并添加重力 首先要做的是 ...

  4. 13 Babylonjs基础入门 粒子

    创建粒子 本教程将讨论Babylon.js中的粒子系统.粒子通常是小型的精灵,用于模拟难以再现的现象,如火,烟,水,或抽象的视觉效果,如魔法闪光和技能特效.这是通过一个区域发出很多粒子组成的云来完成的 ...

  5. 14 Babylonjs基础入门 环境搭建

    现在,我们已经学了很多的东西,了解了光,精灵,粒子,材质.但是场景中还缺少一样东西:合适的环境.接下来,我们将从简单的场景颜色(clearColor)开始,再到设置场景的天空盒子,然后使用雾来实现场景 ...

  6. 6 Babylonjs基础入门 光源

    光源会在照射方式和颜色方面影响模型网格的显示效果.除非你开启阴影效果,要不然光线可以穿透所有的网格.场景默认的光源数量为4个,可以通过修改增加. 光源的类型 在Babylon.js中,有四种光源的类型 ...

  7. 12 Babylonjs基础入门 精灵图

    在本教程中,我们将学习如何使用精灵图.精灵图是2D的图像/动画,并且始终朝向相机,我们将使用它来显示带有alpha通道(透明度)的图像. 如今,精灵通常用于显示动画角色和例子,以及模拟像树木这样的复杂 ...

  8. 前端基础入门学习线路之CSS渐变色效果的实现方法

    通过CSS border-radius,我向大家展示了如何实现方形元素的圆角效果,这解决了以前美工画出这种效果而开发人员无法实现的问题.CSS渐变色(Gradients)也是一个类似的技术.现在火狐, ...

  9. Babylonjs 基础教程与填坑①入门常用网址

    入坑babylon.js一段时间了,现在项目上线了,整理一下基础的入坑姿势和部分填坑技巧,记录一下遇到过的一些问题. babylonjs大法好,在webgl领域,国内社区活跃度还比不过three,入坑 ...

最新文章

  1. php mongodb 子查询,MongoDB数组子查询elemMatch
  2. (转)PowerHA完全手册(一,二,三)
  3. yearProgress.vue
  4. java课程设计学生信息管理系统。
  5. groovy脚本一键360加固多渠道打包
  6. [数据挖掘案例]逻辑回归LR模型实现电商商品个性化推荐
  7. ios模拟器安装证书
  8. flutter之dart语言发展
  9. mysql函数百分比_mysql window函数计算百分比
  10. 记录双十一微信群抢楼的脚本
  11. 微信小程序getday方法_日期getDay()方法和JavaScript中的示例
  12. 《Adobe Illustrator CS6中文版经典教程(彩色版)》目录—导读
  13. 水滴IP:如何换IP?换IP最简单的方法在这里!
  14. Beautifulsoup模块
  15. 关于Jonathan S. Weissman与RIT(罗切斯特理工学院,位于纽约)
  16. android 短信 代码错误,android – Firebase手机身份验证错误:短信代码已过期
  17. Vue-change和input事件
  18. tensorfow/model下object_detection训练错误记录
  19. numpy的常用函数
  20. 浅析M-lag技术(后附华为交换机配置命令)

热门文章

  1. 生活小知识,生活要认真,驱蚊驱虫驱苍蝇大法
  2. 阿里fastjson框架基础
  3. java 使用Spire.Doc实现Word文档插入图片
  4. 数字游戏 -- 寻找缺失的数字
  5. jmeter录制手机脚本
  6. 计算机电源指示灯量一下就灭,开机硬盘指示灯闪了一下就不亮是怎么回事
  7. 薪酬缩水,“裸辞”奋战25天三面美团,交叉面却被吊打,我太难了
  8. Tomcat启动时报错:A child container failed during start解决方案-clean
  9. Linux基本命令---2
  10. vs 2013 必须先停止生成方可关闭解决方案