three.jsは2つの物体が交差しているかどうかを検出する(トリガ検出)

unityとUE 4の使用が多いため、2つの物体が貫通するときに検出し、対応する操作を行うことを意味するトリガ検出という機能が用いられることが多い.jsは大きな輪を探して、最後に公式ドキュメントで対応するAPIを見て、以下に説明します.
2つの物体が互いに貫通している場合は、各物体に包囲箱を建て、包囲箱を物体にバインドし、包囲箱を使って交差するapiを判断して実現します.コードを見てみましょう.

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
  );
  
  redBbox = new THREE.Box3(new THREE.Vector3(), new THREE.Vector3());
  redBbox.setFromObject(redBox);
  const redBoxHelper = new THREE.BoxHelper(redBox, 0xFFFFFF);
  scene.add(redBbox);
  redBox.add(redBoxHelper);

	redBox.position.set(3, 3, 3);

  scene.add(redBox);

  blueBox = new THREE.Mesh(
    new THREE.BoxGeometry(3, 2, 5),
    new THREE.MeshBasicMaterial({color: 0x00000ff})//BLUE box
  );
  blueBbox = new THREE.Box3(new THREE.Vector3(), new THREE.Vector3());
  blueBbox.setFromObject(blueBox);
  const blueBoxHelper = new THREE.BoxHelper(blueBox, 0xFFFFFF);
	scene.add(blueBbox);
  blueBox.add(blueBoxHelper);
  
  blueBox.position.set(3, 3, 3);
  
  scene.add(blueBox);
	
	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 );
  
  redBox.position.x = Math.sin(Date.now() * 0.001) * 5;
  redBbox.setFromObject(redBox);
  blueBbox.setFromObject(blueBox);
  
  if(redBbox.intersectsBox(blueBbox)){
  	//       
         console.log("  ");
  }
  else{
  	 console.log("   ");
  }
  
	renderer.render (scene, camera);
}

具体的なコードは上のように、unityや幻4のように、入ったり、止まったり、出たりする3つのイベントがあれば、スイッチを追加することができます.ブール変数をコントロールすることができます.

if(this.redBbox.intersectsBox(this.blueBbox)){
		 
		  if(isenter==true){
			  console.log("  ");
		  }else{
			   console.log("  ");
		  }
		   isenter=true;
		 
	  }else{
		  if(isenter==true){
			console.log("  ");
			isenter=false;
		  }
		  
	  }

isenterは外で自分で定義して、もしこの文章があなたに役に立つならば、私にいいですね.