等距3d碰撞检测

Question

我正在为游戏制作等距地图，我可以画它，但我不知道如何在没有Threejs或其他3D库的情况下实现某种3D碰撞检测。

有可能吗？也许使块一个对象可以帮助？我搜索过，但我发现只有图书馆。

这是我的JavaScript代码：

＆＃13;

＆＃13;

class myClass(object):
    def __init__(self, foo):
        self.a = foo

    def fun(self):
        # do stuff to self.a

    def bar(self):
        # do something else to self.a 

c = myClass(foo)
c.fun()
c.bar()

＆＃13;

var canvas = document.getElementById('canvas'),
	ctx = canvas.getContext('2d'),
	width = canvas.width = window.innerWidth,
	height = canvas.height = window.innerHeight,
	stop = false;

var tw, th;
var player;

setup();
draw();

function setup(){
	ctx.translate(width/2,50);

	tw = 60; //tile width
	th = 30; // tile height
  player = new Player(2,3,3);

};

function draw(){

	ctx.clearRect(-width/2,-50,width*1.5,height+50);

    for(var i = 0; i < 5; i++){
      for(var j = 0; j < 5; j++){
        drawBlock(i,j,1,tw,th);
      }
    }

    if(!stop){
    	requestAnimationFrame(draw);
    }
}

function drawBlock(x,y,z,w,h){

	var top = "#eeeeee",
	    right = '#cccccc',
	    left = '#999999';

	ctx.save();
	ctx.translate((x-y)*w/2,(x+y)*h/2);

	ctx.beginPath();
	ctx.moveTo(0,-z*h);
	ctx.lineTo(w/2,h/2-z*h);
	ctx.lineTo(0,h-z*h);
	ctx.lineTo(-w/2,h/2-z*h);
	ctx.closePath();
	ctx.fillStyle = "black";
	ctx.stroke();
	ctx.fillStyle = top;
	ctx.fill();

	ctx.beginPath();
	ctx.moveTo(-w/2,h/2-z*h);
	ctx.lineTo(0,h-z*h);
	ctx.lineTo(0,h);
	ctx.lineTo(0,h);
	ctx.lineTo(-w/2,h/2);
	ctx.closePath();
	ctx.fillStyle = "black";
	ctx.stroke();
	ctx.fillStyle = left;
	ctx.fill();

	ctx.beginPath();
	ctx.moveTo(w/2,h/2-z*h);
	ctx.lineTo(0,h-z*h);
	ctx.lineTo(0,h);
	ctx.lineTo(0,h);
	ctx.lineTo(w/2,h/2);
	ctx.closePath();
	ctx.fillStyle = "black";
	ctx.stroke();
	ctx.fillStyle = right;
	ctx.fill();

	ctx.restore();

}

function drawTile(x,y,stroke,col){

	ctx.save();
	ctx.translate((x-y)*tw/2,(x+y)*th/2);

	ctx.beginPath();
	ctx.moveTo(0,0);
	ctx.lineTo(tw/2,th/2);
	ctx.lineTo(0,th);
	ctx.lineTo(-tw/2,th/2);
	ctx.closePath();
	if(stroke){
		ctx.stroke();
	}else{
		ctx.fillStyle = col;
		ctx.fill();
	}

	ctx.restore();

}

function Player(x,y,z){
  this.x = x;
  this.y = y;
  this.z = z;
  this.w = 10; //width
  this.h = 10; //height
}

＆＃13;

canvas{
  width:100%;
  height:100%;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

你追求的是立方体碰撞。我在google搜索的第一个结果是关于MDN的一篇名为3D collision detection的文章：

  

数学上看起来像这样：

f(A,B) = (AminX <= BmaxX ∧ AmaxX >= BminX) ∧ (AminY <= BmaxY ∧ AmaxY >= BminY) ∧ (AminZ <= BmaxZ ∧ AmaxZ >= BminZ)

     

在JavaScript中，我们使用此功能：

function intersect(a, b) {
  return (a.minX <= b.maxX && a.maxX >= b.minX) &&
         (a.minY <= b.maxY && a.maxY >= b.minY) &&
         (a.minZ <= b.maxZ && a.maxZ >= b.minZ);
}