Threejs - Point Inside 3D Cube Geometry

by black strings

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<div style="color:red" id="messageBox">
 <p>
 Is point inside 3d: <span id="answer"></span>
 </p>
</div>

JavaScript

var scene, renderer, camera, controls;

init();
animate();

function init(){	
	// ----------------- Start of threejs basic setup --------------------
  
  /// add renderer
  renderer = new THREE.WebGLRenderer( {antialias:true} );
	var width = window.innerWidth;
	var height = window.innerHeight;
  renderer.setSize (width, height);
  
  // put renderer into html canvas
	document.body.appendChild (renderer.domElement);

	// new scene
	scene = new THREE.Scene();

	// add camera
	camera = new THREE.PerspectiveCamera (60, width/height, 0.01, 10000);
	camera.position.y = 16;
	camera.position.z = 40;
	camera.lookAt (new THREE.Vector3(0,0,0));
  scene.add( camera );

	// add orbit camera controls
  controls = new THREE.OrbitControls(camera, renderer.domElement);
  
  // add grid
	var gridXZ = new THREE.GridHelper(100, 10, 
  	new THREE.Color(0x264853), 
  	new THREE.Color(0x264853)
  );
  
	scene.add(gridXZ);  
  // ----------------- end of threejs basic setup --------------------
  
  // ###### TEST #######
  var testPoint = new THREE.Vector3(-6,0,0);
  testPointInsideCube(testPoint);
}


function testPointInsideCube(testPoint){
	var c = new THREE.BoxGeometry(10,10,10);
  var m = new THREE.Mesh(c, new THREE.MeshBasicMaterial({color:0x00ff00, opacity: .5, transparent: true}));
  var boxHelper = new THREE.BoxHelper(m, {color:0xff00ff});
  scene.add(boxHelper);
  //m.geometry.computeBoundingSphere();
  
  // compute the bounding box, by default there is no boudning box on geometry
  m.geometry.computeBoundingBox();
  
  // test if point is inside 3d bounding box (cube like geometry)
  displayText( m.geometry.boundingBox.containsPoint(testPoint));
  
  displayVisualTestPoint(testPoint);
  
  scene.add(m);
  return m;
}

function displayText(text){
	var msgBox = document.getElementById("answer");
  msgBox.innerHTML = text;
}

function displayVisualTestPoint(testPoint) {
	var radius = .5;
	var smoothness = 30;
  var geo = new THREE.SphereGeometry(radius, smoothness);
  var...