JS判断碰撞方法：
复制代码代码如下:
/** 判断是否碰撞
* @param obj 原对象
* @param dobj 目标对象
*/
function impact(obj, dobj) {
var o = {
x: getDefaultStyle(obj, 'left'),
y: getDefaultStyle(obj, 'top'),
w: getDefaultStyle(obj, 'width'),
h: getDefaultStyle(obj, 'height')
}
var d = {
x: getDefaultStyle(dobj, 'left'),
y: getDefaultStyle(dobj, 'top'),
w: getDefaultStyle(dobj, 'width'),
h: getDefaultStyle(dobj, 'height')
}
var px, py
px = o.x <= d.x ? d.x : o.x
py = o.y <= d.y ? d.y : o.y
// 判断点是否都在两个对象中
if (px >= o.x &&px <= o.x + o.w &&py >= o.y &&py <= o.y + o.h &&px >= d.x &&px <= d.x + d.w &&py >= d.y &&py <= d.y + d.h) {
return true
} else {
return false
}
}
/** 获取对象属性
* @param obj 对象
* @param attribute 属性
*/
function getDefaultStyle(obj, attribute) {
return parseInt(obj.currentStyle ? obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj, false)[attribute])
}
示例如下：
复制代码代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>demo </title>
<style type="text/css">
body{margin:0px}
.main{position:relative}
#f1{position:absolutebackground:#FF0000top:100pxleft:100pxwidth:200pxheight:200pxz-index:999}
#f2{position:absolutebackground:#FFFF00top:0pxleft:0pxwidth:600pxheight:150px}
</style>
</head>
<body>
<div class="main">
<div id="f1"></div>
<div id="f2"></div>
</div>
<script type="text/javascript">
var o = document.getElementById("f1")
var d = document.getElementById("f2")
alert(impact(o, d))
function impact(obj, dobj) {
var o = {
x: getDefaultStyle(obj, 'left'),
y: getDefaultStyle(obj, 'top'),
w: getDefaultStyle(obj, 'width'),
h: getDefaultStyle(obj, 'height')
}
var d = {
x: getDefaultStyle(dobj, 'left'),
y: getDefaultStyle(dobj, 'top'),
w: getDefaultStyle(dobj, 'width'),
h: getDefaultStyle(dobj, 'height')
}
var px, py
px = o.x <= d.x ? d.x : o.x
py = o.y <= d.y ? d.y : o.y
// 判断点是否都在两个对象中
if (px >= o.x &&px <= o.x + o.w &&py >= o.y &&py <= o.y + o.h &&px >= d.x &&px <= d.x + d.w &&py >= d.y &&py <= d.y + d.h) {
return true
} else {
return false
}
}
function getDefaultStyle(obj, attribute) {
return parseInt(obj.currentStyle ? obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj, false)[attribute])
}
</script>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
使用Raycaster进行碰撞检测用Raycaster来检测碰撞的原理很简单，我们需要以物体的中心为起点，向各个顶点（vertices）发出射线，然后检查射线是否与其它的物体相交。如果出现了相交的情况，检查最近的一个交点与射线起点间的距离，如果这个距离比射线起点至物体顶点间的距离要小，则说明发生了碰撞。
这个方法有一个 缺点 ，当物体的中心在另一个物体内部时，是不能够检测到碰撞的。而且当两个物体能够互相穿过，且有较大部分重合时，检测效果也不理想。
还有需要 注意 的一点是：在Three.js中创建物体时，它的顶点（veritces）数目是与它的分段数目相关的，分段越多，顶点数目越多。为了检测过程中的准确度考虑，需要适当增加物体的分段。
碰撞没有跟模型绑定在一个gameobject上animator的话，动画不要bake进去，同时animator 勾选apply root motion
推荐另一种方案, 使用传统的collider,附加在人物的各个骨骼上,比如头上有一个球体collider, 胳膊上有一个胶囊collider, 鞋子上有一个立方体collider,这样在播放动画的时候, 碰撞体也会跟着走.
