初学WebGL引擎-BabylonJS：第6篇-学习挑战：碰撞交错与挑选
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了初学WebGL引擎-BabylonJS：第6篇-学习挑战：碰撞交错与挑选，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含15448字，纯文字阅读大概需要23分钟。
内容图文
【playground】-collisions（碰撞）
先贴官方源码（机器翻译版本）
var createScene = function () {
var scene = new BABYLON.Scene(engine);
// Lightsvar 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 collisionsvar camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, -8, -20), scene);
camera.attachControl(canvas, true);
//Groundvar 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 cratevar 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);
// Materialvar 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 pointvar 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 planesvar 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 boxvar 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 boxvar planOBB = BABYLON.Mesh.CreateBox("OBB", 20, scene);
planOBB.scaling = new BABYLON.Vector3(1, 1, 0.05);
planOBB.parent = plan2;
planOBB.material = matBB;
// Balloonsvar 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);
//Animationvar alpha = Math.PI;
scene.registerBeforeRender(function () {
//Balloon 1 intersection -- Precise = falseif (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 = trueif (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 pointif (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 environmentvar 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 impostorvar 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);
//Wallvar 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 positionif (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轴的判断
原文：http://www.cnblogs.com/slxb/p/5153916.html
内容总结
以上是互联网集市为您收集整理的初学WebGL引擎-BabylonJS：第6篇-学习挑战：碰撞交错与挑选全部内容，希望文章能够帮你解决初学WebGL引擎-BabylonJS：第6篇-学习挑战：碰撞交错与挑选所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】