初学WebGL引擎-BabylonJS：第6篇-碰撞交错与挑选
【playground】-collisions（碰撞）
先贴官方源码（机器翻译版本）
var createScene = function () {
var scene = new BABYLON.Scene(engine);
// Lights
var light0 = new BABYLON.DirectionalLight("Omni", new BABYLON.Vector3(-2, -5, 2), scene);
var light1 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(2, -5, -2), scene);
// Need a free camera for collisions
var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, -8, -20), scene);
camera.attachControl(canvas, true);
//Ground
var ground = BABYLON.Mesh.CreatePlane("ground", 20.0, scene);
ground.material = new BABYLON.StandardMaterial("groundMat", scene);
ground.material.diffuseColor = new BABYLON.Color3(1, 1, 1);
ground.material.backFaceCulling = false;
ground.position = new BABYLON.Vector3(5, -10, -15);
ground.rotation = new BABYLON.Vector3(Math.PI / 2, 0, 0);
//Simple crate
var box = new BABYLON.Mesh.CreateBox("crate", 2, scene);
box.material = new BABYLON.StandardMaterial("Mat", scene);
box.material.diffuseTexture = new BABYLON.Texture("textures/crate.png", scene);
box.material.diffuseTexture.hasAlpha = true;
box.position = new BABYLON.Vector3(5, -9, -10);
//Set gravity for the scene (G force like, on Y-axis)
scene.gravity = new BABYLON.Vector3(0, -0.9, 0);
// Enable Collisions
scene.collisionsEnabled = true;
//Then apply collisions and gravity to the active camera
camera.checkCollisions = true;
camera.applyGravity = true;
//Set the ellipsoid around the camera (e.g. your player's size)
camera.ellipsoid = new BABYLON.Vector3(1, 1, 1);
//finally, say which mesh will be collisionable
ground.checkCollisions = true;
box.checkCollisions = true;
return scene;
}
自己随便摆动了下箱子（这个箱子看的我满满的回忆，好像上次看到在某仓库）
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>Babylon - Getting Started</title>
<!-- link to the last version of babylon -->
<script src="js/babylon.2.2.max.js"></script>
</head>
<style>
html, body {
overflow: hidden;
width : 100%;
height : 100%;
margin : 0;
padding : 0;
} #renderCanvas {
width : 100%;
height : 100%;
touch-action: none;
}
</style> <body>
<canvas id="renderCanvas"></canvas>
<script>
window.addEventListener('DOMContentLoaded', function() {
//获取画布对象
var canvas = document.getElementById('renderCanvas');
//加载巴比伦3D引擎
var engine = new BABYLON.Engine(canvas, true);
//创建场景
var createScene = function () {
var scene = new BABYLON.Scene(engine); // 还是灯关,这里是一个定向灯关
var light0 = new BABYLON.DirectionalLight("Omni", new BABYLON.Vector3(-2, -5, 2), scene);
// 还是灯关,这里是一个点光源
var light1 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(2, -5, -2), scene); // 一个简单可碰撞的相机
/**
*对比旧版本
*var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(9, 95,50), scene);
*
*/
var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, -8, -20), scene);
//附加控制
camera.attachControl(canvas, true); //地面
var ground = BABYLON.Mesh.CreatePlane("ground", 20.0, scene);
ground.material = new BABYLON.StandardMaterial("groundMat", scene);
ground.material.diffuseColor = new BABYLON.Color3(1, 1, 1);
ground.material.backFaceCulling = false;
ground.position = new BABYLON.Vector3(5, -10, -15);
ground.rotation = new BABYLON.Vector3(Math.PI / 2, 0, 0); //BOX结构的箱子
var box = new BABYLON.Mesh.CreateBox("crate", 2, scene);
box.material = new BABYLON.StandardMaterial("Mat", scene);
box.material.diffuseTexture = new BABYLON.Texture("map/crate.png", scene);
box.material.diffuseTexture.hasAlpha = true;
box.position = new BABYLON.Vector3(5, -9, -10); //我要拼凑一个曰
var sun="1,1;1,2;1,3;1,4;2,1;2,4;3,1;3,2;3,3;3,4;4,1;4,4;5,1;5,2;5,3;5,4";
for(var i=0;i<sun.split(';').length;i++){
var xy=sun.split(';')[i].split(',');
var x=parseInt(xy[1])*2;
var y=parseInt(xy[0])*2;
var box2 = new BABYLON.Mesh.CreateBox("crate"+x+y, 2, scene);
box2.material = new BABYLON.StandardMaterial("Mat", scene);
box2.material.diffuseTexture = new BABYLON.Texture("map/crate.png", scene);
box2.material.diffuseTexture.hasAlpha = true;
console.log(x+":"+y);
box2.position = new BABYLON.Vector3(x, y-11, -12);
box2.checkCollisions = true;
} //设置场景的动力(G重力, 基于Y轴)
scene.gravity = new BABYLON.Vector3(0, -0.9, 0); //设置场景碰撞
scene.collisionsEnabled = true; //设置相机的碰撞
camera.checkCollisions = true;
//设置相机的重力
camera.applyGravity = true; //将相机包围一个球形，用于碰撞
camera.ellipsoid = new BABYLON.Vector3(1, 1, 1); //地面设置碰撞
ground.checkCollisions = true;
//箱子设置碰撞
box.checkCollisions = true;
return scene;
}
//赋予该场景于变量
var scene = createScene();
//在引擎中循环运行这个场景
engine.runRenderLoop(function(){
scene.render();
});
//追加事件：帆布与大小调整程序
window.addEventListener('resize', function(){
engine.resize();
});
}); </script>
</body>
</html>
笔记：
本案例学的内容包括
1.场景重力
2.各对象碰撞属性开启
【playground】-intersections（交错）
源码
var createScene = function () {
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 70, new BABYLON.Vector3(5, 0, 0), scene);
camera.attachControl(canvas, true);
// Material
var matPlan = new BABYLON.StandardMaterial("matPlan1", scene);
matPlan.backFaceCulling = false;
matPlan.emissiveColor = new BABYLON.Color3(0.2, 1, 0.2);
var matBB = new BABYLON.StandardMaterial("matBB", scene);
matBB.emissiveColor = new BABYLON.Color3(1, 1, 1);
matBB.wireframe = true;
// Intersection point
var pointToIntersect = new BABYLON.Vector3(-30, 0, 0);
var origin = BABYLON.Mesh.CreateSphere("origin", 4, 0.3, scene);
origin.position = pointToIntersect;
origin.material = matPlan;
// Create two planes
var plan1 = BABYLON.Mesh.CreatePlane("plane1", 20, scene);
plan1.position = new BABYLON.Vector3(13, 0, 0);
plan1.rotation.x = -Math.PI / 4;
plan1.material = matPlan;
var plan2 = BABYLON.Mesh.CreatePlane("plane2", 20, scene);
plan2.position = new BABYLON.Vector3(-13, 0, 0);
plan2.rotation.x = -Math.PI / 4;
plan2.material = matPlan;
// AABB - Axis aligned bounding box
var planAABB = BABYLON.Mesh.CreateBox("AABB", 20, scene);
planAABB.material = matBB;
planAABB.position = new BABYLON.Vector3(13, 0, 0);
planAABB.scaling = new BABYLON.Vector3(1, Math.cos(Math.PI / 4), Math.cos(Math.PI / 4));
// OBB - Object boundind box
var planOBB = BABYLON.Mesh.CreateBox("OBB", 20, scene);
planOBB.scaling = new BABYLON.Vector3(1, 1, 0.05);
planOBB.parent = plan2;
planOBB.material = matBB;
// Balloons
var balloon1 = BABYLON.Mesh.CreateSphere("balloon1", 10, 2.0, scene);
var balloon2 = BABYLON.Mesh.CreateSphere("balloon2", 10, 2.0, scene);
var balloon3 = BABYLON.Mesh.CreateSphere("balloon3", 10, 2.0, scene);
balloon1.material = new BABYLON.StandardMaterial("matBallon", scene);
balloon2.material = new BABYLON.StandardMaterial("matBallon", scene);
balloon3.material = new BABYLON.StandardMaterial("matBallon", scene);
balloon1.position = new BABYLON.Vector3(6, 5, 0);
balloon2.position = new BABYLON.Vector3(-6, 5, 0);
balloon3.position = new BABYLON.Vector3(-30, 5, 0);
//Animation
var alpha = Math.PI;
scene.registerBeforeRender(function () {
//Balloon 1 intersection -- Precise = false
if (balloon1.intersectsMesh(plan1, false)) {
balloon1.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
} else {
balloon1.material.emissiveColor = new BABYLON.Color3(1, 1, 1);
}
//Balloon 2 intersection -- Precise = true
if (balloon2.intersectsMesh(plan2, true)) {
balloon2.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
} else {
balloon2.material.emissiveColor = new BABYLON.Color3(1, 1, 1);
}
//balloon 3 intersection on single point
if (balloon3.intersectsPoint(pointToIntersect)) {
balloon3.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
} else {
balloon3.material.emissiveColor = new BABYLON.Color3(1, 1, 1);
}
alpha += 0.01;
balloon1.position.y += Math.cos(alpha) / 10;
balloon2.position.y = balloon1.position.y;
balloon3.position.y = balloon1.position.y;
});
return scene;
}
效果
个人翻译
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>Babylon - Getting Started</title>
<!-- link to the last version of babylon -->
<script src="js/babylon.2.2.max.js"></script>
</head>
<style>
html, body {
overflow: hidden;
width : 100%;
height : 100%;
margin : 0;
padding : 0;
} #renderCanvas {
width : 100%;
height : 100%;
touch-action: none;
}
</style> <body>
<canvas id="renderCanvas"></canvas>
<script>
window.addEventListener('DOMContentLoaded', function() {
//获取画布对象
var canvas = document.getElementById('renderCanvas');
//加载巴比伦3D引擎
var engine = new BABYLON.Engine(canvas, true);
//创建场景
var createScene = function () {
var scene = new BABYLON.Scene(engine);
//还是光源
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 70, new BABYLON.Vector3(5, 0, 0), scene);
camera.attachControl(canvas, true); // 一个材质
var matPlan = new BABYLON.StandardMaterial("matPlan1", scene);
//背面处理
matPlan.backFaceCulling = false;
//发射光
matPlan.emissiveColor = new BABYLON.Color3(0.2, 1, 0.2); // 又一个材质
var matBB = new BABYLON.StandardMaterial("matBB", scene);
//发射光
matBB.emissiveColor = new BABYLON.Color3(1, 1, 1);
//线框？
matBB.wireframe = true; //<点相交的例子>
//一个定位向量
var pointToIntersect = new BABYLON.Vector3(-30, 0, 0);
//创建一个球
var origin = BABYLON.Mesh.CreateSphere("origin", 4, 0.3, scene);
origin.position = pointToIntersect;
origin.material = matPlan; // 创建一个面
var plan1 = BABYLON.Mesh.CreatePlane("plane1", 20, scene);
plan1.position = new BABYLON.Vector3(13, 0, 0);
plan1.rotation.x = -Math.PI / 4;
plan1.material = matPlan; var plan2 = BABYLON.Mesh.CreatePlane("plane2", 20, scene);
plan2.position = new BABYLON.Vector3(-13, 0, 0);
plan2.rotation.x = -Math.PI / 4;
plan2.material = matPlan; // AABB - 轴对其的边界框(大的方型的框)
var planAABB = BABYLON.Mesh.CreateBox("AABB", 20, scene);
planAABB.material = matBB;
planAABB.position = new BABYLON.Vector3(13, 0, 0);
planAABB.scaling = new BABYLON.Vector3(1, Math.cos(Math.PI / 4), Math.cos(Math.PI / 4)); // OBB - 对象外延的边界框(包裹在对象外面)
var planOBB = BABYLON.Mesh.CreateBox("OBB", 20, scene);
planOBB.scaling = new BABYLON.Vector3(1, 1, 0.05);
planOBB.parent = plan2;
planOBB.material = matBB; // 气球(这里是飞在外面移动的球)
var balloon1 = BABYLON.Mesh.CreateSphere("balloon1", 10, 2.0, scene);
var balloon2 = BABYLON.Mesh.CreateSphere("balloon2", 10, 2.0, scene);
var balloon3 = BABYLON.Mesh.CreateSphere("balloon3", 10, 2.0, scene);
balloon1.material = new BABYLON.StandardMaterial("matBallon", scene);
balloon2.material = new BABYLON.StandardMaterial("matBallon", scene);
balloon3.material = new BABYLON.StandardMaterial("matBallon", scene); balloon1.position = new BABYLON.Vector3(6, 5, 0);
balloon2.position = new BABYLON.Vector3(-6, 5, 0);
balloon3.position = new BABYLON.Vector3(-30, 5, 0); //下面定义动画
var alpha = Math.PI;
scene.registerBeforeRender(function () { //气球一的交错，非精确。为false时候，接触外框就是产生反应（面碰撞）
if (balloon1.intersectsMesh(plan1, false)) {
balloon1.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
} else {
balloon1.material.emissiveColor = new BABYLON.Color3(1, 1, 1);
} //气球二的交错，精确。（面碰撞）
if (balloon2.intersectsMesh(plan2, true)) {
balloon2.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
} else {
balloon2.material.emissiveColor = new BABYLON.Color3(1, 1, 1);
} //气球三的交错，碰撞到某向量的时候(点碰撞)
if (balloon3.intersectsPoint(pointToIntersect)) {
balloon3.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
} else {
balloon3.material.emissiveColor = new BABYLON.Color3(1, 1, 1);
} alpha += 0.01;
balloon1.position.y += Math.cos(alpha) / 10;
balloon2.position.y = balloon1.position.y;
balloon3.position.y = balloon1.position.y;
}); return scene;
}
//赋予该场景于变量
var scene = createScene();
//在引擎中循环运行这个场景
engine.runRenderLoop(function(){
scene.render();
});
//追加事件：帆布与大小调整程序
window.addEventListener('resize', function(){
engine.resize();
});
}); </script>
</body>
</html>
本案例大致学的内容包括
1.线框材质
2.交错事件
【playground】-picking（挑选）
源码
var createScene = function () {
var scene = new BABYLON.Scene(engine);
// setup environment
var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 10, 20), scene);
var freeCamera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 0, -30), scene);
// Impact impostor
var impact = BABYLON.Mesh.CreatePlane("impact", 1, scene);
impact.material = new BABYLON.StandardMaterial("impactMat", scene);
impact.material.diffuseTexture = new BABYLON.Texture("textures/impact.png", scene);
impact.material.diffuseTexture.hasAlpha = true;
impact.position = new BABYLON.Vector3(0, 0, -0.1);
//Wall
var wall = BABYLON.Mesh.CreatePlane("wall", 20.0, scene);
wall.material = new BABYLON.StandardMaterial("wallMat", scene);
wall.material.emissiveColor = new BABYLON.Color3(0.5, 1, 0.5);
//When pointer down event is raised
scene.onPointerDown = function (evt, pickResult) {
// if the click hits the ground object, we change the impact position
if (pickResult.hit) {
impact.position.x = pickResult.pickedPoint.x;
impact.position.y = pickResult.pickedPoint.y;
}
};
return scene;
}
效果
笔记：
这个里面存在一个BUG，原本设计的想法是鼠标点击在绿色画布内，才允许触发事件。但实际上，当你点击在画布边缘的时候，可以慢慢点击到画布外蓝色区域
那么我试着解决这个BUG，在改变xy之前增加判断
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>Babylon - Getting Started</title>
<!-- link to the last version of babylon -->
<script src="js/babylon.2.2.max.js"></script>
</head>
<style>
html, body {
overflow: hidden;
width : 100%;
height : 100%;
margin : 0;
padding : 0;
} #renderCanvas {
width : 100%;
height : 100%;
touch-action: none;
}
</style> <body>
<canvas id="renderCanvas"></canvas>
<script>
window.addEventListener('DOMContentLoaded', function() {
//获取画布对象
var canvas = document.getElementById('renderCanvas');
//加载巴比伦3D引擎
var engine = new BABYLON.Engine(canvas, true);
//创建场景
var createScene = function () {
var scene = new BABYLON.Scene(engine); // 灯关
var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 10, 20), scene);
//相机(固定视角)
var freeCamera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 0, -30), scene); // 贴面（小图标）
var impact = BABYLON.Mesh.CreatePlane("impact", 1, scene);
impact.material = new BABYLON.StandardMaterial("impactMat", scene);
impact.material.diffuseTexture = new BABYLON.Texture("map/impact.png", scene);
impact.material.diffuseTexture.hasAlpha = true;
impact.position = new BABYLON.Vector3(0, 0, -0.1); //墙（画布）
var wall = BABYLON.Mesh.CreatePlane("wall", 20.0, scene);
wall.material = new BABYLON.StandardMaterial("wallMat", scene);
wall.material.emissiveColor = new BABYLON.Color3(0.5, 1, 0.5); //指针的点击事件onPointerDown
scene.onPointerDown = function (evt, pickResult) {
// 如果单击击中地面目标,我们改变位置的影响（点击地面时候产生影响）
//当产生点击
if (pickResult.hit) {
//此处增加基于xy轴的地理围栏，防止越界
var cX=pickResult.pickedPoint.x;
var maxX=wall.position.x+10;
var minX=wall.position.x-10;
var cY=pickResult.pickedPoint.y;
var maxY=wall.position.y+10;
var minY=wall.position.y-10;
console.log("当前坐标x="+cX+"|y="+cY);
if(cX>maxX||cX<minX){
console.log("x越界了");
}else{
impact.position.x = pickResult.pickedPoint.x;
}
if(cY>maxY||cY<minY){
console.log("y越界了");
}else{
impact.position.y = pickResult.pickedPoint.y;
} }
}; return scene;
} //赋予该场景于变量
var scene = createScene();
//在引擎中循环运行这个场景
engine.runRenderLoop(function(){
scene.render();
});
//追加事件：帆布与大小调整程序
window.addEventListener('resize', function(){
engine.resize();
});
}); </script>
</body>
</html>
笔记：
1.增加固定相机
2.增加点击事件onPointerDown
3.设置基于xy轴的判断
初学WebGL引擎-BabylonJS：第6篇-碰撞交错与挑选的更多相关文章
- 初学WebGL引擎-BabylonJS：第0篇-起因
学习WebGL的BabylonJS是在一次偶然的情况下进行的,主要为了满足个人对全栈开发的欲望. 言归正传,下面开始简单说说相关过程 WebGL是什么?WebGL是基于html的客户端页面技术,基于h ...
- 初学WebGL引擎-BabylonJS：第1篇-基础构造
继续上篇随笔 步骤如下: 一:http://www.babylonjs.com/中下载源码.获取其中babylon.2.2.js.建立gulp项目
- 初学WebGL引擎-BabylonJS：第8篇-阴影网格与活动
[playground]-shadows(阴影) 源码 var createScene = function () { var scene = new BABYLON.Scene(engine); / ...
- 初学WebGL引擎-BabylonJS：第2篇-基础模型体验
此次学习进度会比之前快很多,有了合适的学习方法后也就会有更多的乐趣产生了. 接上一章代码 上章代码 <!DOCTYPE html> <html> <head> &l ...
- 初学WebGL引擎-BabylonJS：第4篇-灯光动画与丛林场景
前几章接触的案例都是接近静态的,由这张开始开始接触大量动态的内容,包括 球体灯光,变动的形体,以及一个虚拟的丛林场景 下章我会试着结合1-9案例的内容做出一个demo出来 [playground]-l ...
- 初学WebGL引擎-BabylonJS：第3篇-方向纹理与相机
[playground]-rotatuib abd scaling(方向) 源码 var createScene = function () { var scene = new BABYLON.Sce ...
- [WebKit内核] JavaScript引擎深度解析--基础篇（一）字节码生成及语法树的构建详情分析
[WebKit内核] JavaScript引擎深度解析--基础篇(一)字节码生成及语法树的构建详情分析 标签: webkit内核JavaScriptCore 2015-03-26 23:26 2285 ...
- 用基于WebGL的BabylonJS来共享你的3D扫描模型
转自:http://www.geekfan.net/6578/ 用基于WebGL的BabylonJS来共享你的3D扫描模型 杰克祥子 2014 年 2 月 26 日 0 条评论 标签:3D扫描 , B ...
- VTemplate模板引擎的使用--高级篇
VTemplate模板引擎的使用--高级篇 在网站中,经常会有某个栏目的数据在多个页面同时使用到.比如新闻网站或电子商务网站的栏目列表,几乎在很多页面都会显示栏目导航.对于这种多个页面同时使用到的“数 ...
随机推荐
- CAS(乐观锁)以及ABA问题
https://blog.csdn.net/wwd0501/article/details/88663621独占锁是一种悲观锁,synchronized就是一种独占锁:它假设最坏的情况,并且只有在确保 ...
- cryptopp使用Qt mingw编译，以及海思平台交叉编译
编译工程生成,使用qmake生成qt工程文件(海思平台时,要用海思平台的qmake),将 TEMPLATE = app 修改为: TEMPLATE = lib 添加如下: win32:LIBS += ...
- Python爬取网站上面的数据很简单，但是如何爬取APP上面的数据呢
- @RequestMapping 参数详解
引言: 前段时间项目中用到了RESTful模式来开发程序,但是当用POST.PUT模式提交数据时,发现服务器端接受不到提交的数据(服务器端参数绑定没有加任何注解),查看了提交方式为applicatio ...
- C# ASP JS引用路径不正确导致的错误
假设JS包放在根目录下的Scripts文件夹下 当前页的路径在另一个文件夹下,那么他引用JS应该:<script src="../Scripts/jquery-1.4.1.min.js ...
- java 匿名对象与内部类
一 匿名对象 1.匿名对象的概念 匿名对象是指创建对象时,只有创建对象的语句,却没有把对象地址值赋值给某个变量. 例如: public class Person{ public void eat(){ ...
- C#LeetCode刷题之#217-存在重复元素（Contains Duplicate）
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3772 访问. 给定一个整数数组,判断是否存在重复元素. 如果任何 ...
- CTFhub-WEB前置-http协议闯关
前情提要: 在渗透学习过程中,web的基础知识很重要,在这里通过long long ago之前学习的http基础,并结合网上的CTFhub--WEB前置之http协议闯关,对web基础知识进行加固并查 ...
- PowerJob 的自实现高可用方案，妙妙妙！
本文适合有 Java 基础知识的人群 作者:HelloGitHub-Salieri HelloGitHub 推出的<讲解开源项目>系列. 碎碎念 高可用放到今天已经不是一个新颖的词汇了,怎 ...
- ldap登录验证的通用步骤
和利用数据库进行验证类似,LDAP中也是利用登陆名和密码进行验证,LDAP中会定义一个属性password,用来存放用户密码,而登陆名使用较多的都是mail地址.那怎么样才能正确的用LDAP进行身份验 ...