8 Babylonjs基础入门 相机,模型碰撞和重力效果
你玩过第一人称的射击游戏吗?大作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基础入门 相机,模型碰撞和重力效果相关推荐
- 5 Babylonjs基础入门 相机
在Babylon.js中,最常用的两个相机有可能是: 用于第一人称运行的通用相机 用于查看物体的弧形旋转相机 虽然随着WebVR的出现,这可能会改变. 对于创建的相机对象,必须要将相机附加到canva ...
- 16 Babylonjs基础入门 阴影
在本节中,我们将学习如何在Babylon.js中创建阴影.阴影现在实现的是动态阴影,它们会根据光源动态生成.你可能需要首先查看一个案例:点击这里. 实现阴影 使用Babylon.js的ShadowGe ...
- babylon101| 08. Cameras, Mesh Collisions and Gravity(相机、碰撞和重力)
在本教程中,我们将模拟摄像机运动,摄像机在地板上,与地面发生碰撞,并可能与场景中的任何对象发生碰撞,实现步骤如下: 1.Define and apply gravity 定义并添加重力 首先要做的是 ...
- 13 Babylonjs基础入门 粒子
创建粒子 本教程将讨论Babylon.js中的粒子系统.粒子通常是小型的精灵,用于模拟难以再现的现象,如火,烟,水,或抽象的视觉效果,如魔法闪光和技能特效.这是通过一个区域发出很多粒子组成的云来完成的 ...
- 14 Babylonjs基础入门 环境搭建
现在,我们已经学了很多的东西,了解了光,精灵,粒子,材质.但是场景中还缺少一样东西:合适的环境.接下来,我们将从简单的场景颜色(clearColor)开始,再到设置场景的天空盒子,然后使用雾来实现场景 ...
- 6 Babylonjs基础入门 光源
光源会在照射方式和颜色方面影响模型网格的显示效果.除非你开启阴影效果,要不然光线可以穿透所有的网格.场景默认的光源数量为4个,可以通过修改增加. 光源的类型 在Babylon.js中,有四种光源的类型 ...
- 12 Babylonjs基础入门 精灵图
在本教程中,我们将学习如何使用精灵图.精灵图是2D的图像/动画,并且始终朝向相机,我们将使用它来显示带有alpha通道(透明度)的图像. 如今,精灵通常用于显示动画角色和例子,以及模拟像树木这样的复杂 ...
- 前端基础入门学习线路之CSS渐变色效果的实现方法
通过CSS border-radius,我向大家展示了如何实现方形元素的圆角效果,这解决了以前美工画出这种效果而开发人员无法实现的问题.CSS渐变色(Gradients)也是一个类似的技术.现在火狐, ...
- Babylonjs 基础教程与填坑①入门常用网址
入坑babylon.js一段时间了,现在项目上线了,整理一下基础的入坑姿势和部分填坑技巧,记录一下遇到过的一些问题. babylonjs大法好,在webgl领域,国内社区活跃度还比不过three,入坑 ...
最新文章
- php mongodb 子查询,MongoDB数组子查询elemMatch
- (转)PowerHA完全手册(一,二,三)
- yearProgress.vue
- java课程设计学生信息管理系统。
- groovy脚本一键360加固多渠道打包
- [数据挖掘案例]逻辑回归LR模型实现电商商品个性化推荐
- ios模拟器安装证书
- flutter之dart语言发展
- mysql函数百分比_mysql window函数计算百分比
- 记录双十一微信群抢楼的脚本
- 微信小程序getday方法_日期getDay()方法和JavaScript中的示例
- 《Adobe Illustrator CS6中文版经典教程(彩色版)》目录—导读
- 水滴IP:如何换IP?换IP最简单的方法在这里!
- Beautifulsoup模块
- 关于Jonathan S. Weissman与RIT(罗切斯特理工学院,位于纽约)
- android 短信 代码错误,android – Firebase手机身份验证错误:短信代码已过期
- Vue-change和input事件
- tensorfow/model下object_detection训练错误记录
- numpy的常用函数
- 浅析M-lag技术(后附华为交换机配置命令)