javascript - 如何检测移动框之间的碰撞

Question

我关注了this article on MDN检测盒子之间的碰撞并在 this JSFiddle 中尝试过.

我希望能够移动红色框，当它们不再发生碰撞时，我希望日志停止出现...但是，我不知道如何保留 Box3(我的框的边界框) 更新到我的主框的较新位置。

我目前使用键盘键移动方框，如下所示:

检查是否按下了键

switch (e.key) {
case `z`:
  moveForward = true;
  break;
case `s`:
  moveBackward = true;
  break;
case `q`:
  moveLeft = true;
  break;
case `d`:
  moveRight = true;
  break;
}

在我的动画函数中:

if (moveForward) redBox.position.z -= .05;
if (moveBackward) redBox.position.z += .05;
if (moveLeft) redBox.position.x -= .05;
if (moveRight) redBox.position.x += .05;

我猜想最简单的解决方案是更新 Box3 的位置，但似乎不允许我将 Box3 添加到我的场景中……所以我不知道如何更新它。

var scene, renderer, camera;
var redBox, blueBox, redBbox, blueBbox;
var controls;

init();
animate();

function init()
{
	renderer = new THREE.WebGLRenderer( {antialias:true} );
	var width = window.innerWidth;
	var height = window.innerHeight;
	renderer.setSize (width, height);
	document.body.appendChild (renderer.domElement);

	scene = new THREE.Scene();
	
	camera = new THREE.PerspectiveCamera (45, width/height, 1, 10000);
	camera.position.y = 50;
	camera.position.z = 50;
	camera.position.x = 50;
	camera.lookAt (new THREE.Vector3(0,0,0));

  controls = new THREE.OrbitControls (camera, renderer.domElement);
  
  redBox = new THREE.Mesh(
    new THREE.BoxGeometry(3, 3, 3),
    new THREE.MeshBasicMaterial({color: 0xff00000})//RED box
  );
  redBox.position.set(3, 3, 3);
  redBbox = new THREE.Box3(new THREE.Vector3(), new THREE.Vector3());
  redBbox.setFromObject(redBox);
  const redBoxHelper = new THREE.BoxHelper(redBox, 0xFFFFFF);

  scene.add(redBox, redBoxHelper);

  blueBox = new THREE.Mesh(
    new THREE.BoxGeometry(3, 2, 5),
    new THREE.MeshBasicMaterial({color: 0x00000ff})//BLUE box
  );
  blueBox.position.set(3, 3, 3);
  blueBbox = new THREE.Box3(new THREE.Vector3(), new THREE.Vector3());
  blueBbox.setFromObject(blueBox);
  const blueBoxHelper = new THREE.BoxHelper(blueBox, 0xFFFFFF);

  scene.add(blueBox, blueBoxHelper);
	
	window.addEventListener ('resize', onWindowResize, false);
}

function onWindowResize ()
{
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize (window.innerWidth, window.innerHeight);
}

function animate()
{
	//controls.update();
  requestAnimationFrame ( animate );
  
  if(redBbox.intersectsBox(blueBbox)){
  	console.log('intersection');
  }
  
	renderer.render (scene, camera);
}

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js">
</script>

Answer 1

根据 MDN 文章的示例，在检查交集之前将接下来的两行添加到您的 animation() 函数中:

  redBbox.setFromObject(redBox);
  blueBbox.setFromObject(blueBox);

jsfiddle示例。