等距3d碰撞檢測

Question

我正在為游戲制作等軸測圖，可以繪制它，但是我不知道如何在沒有Threejs或其他3d庫的情況下實現某種3d碰撞檢測。

有可能的？ 也許讓一個對象塊可以幫助？ 我已經搜索過，但只找到了庫。

這是我的JavaScript代碼：

 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((xy)*w/2,(x+y)*h/2); ctx.beginPath(); ctx.moveTo(0,-z*h); ctx.lineTo(w/2,h/2-z*h); ctx.lineTo(0,hz*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,hz*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,hz*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((xy)*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 } 

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

 <canvas id="canvas"></canvas> 

Answer 1

您追求的是立方體碰撞。 我得到的第一個搜索結果是有關MDN的名為3D碰撞檢測的文章：

在數學上，這看起來像這樣：

 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); }