Question

我创建了一个多维数据集：

var cubeGeometry = new THREE.BoxGeometry( 1, 1, 1 );
var cubeMaterial = new THREE.MeshLambertMaterial( { color: 
       0xffff00,wireframe: true } );
var cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
cube.position.x = p.x;
cube.position.y = p.y;
cube.position.z = p.z;
scene.add(cube);

p是我的函数的输入点。因此，此代码在位置p处创建一个立方体并将其添加到场景中。

我如何检查某个点，比如A，是否位于此立方体内？我无法为Three.Mesh找到任何帮助函数，如containsPoint等。我可以做一些额外的检查来验证，但我正在寻找一个Three.js函数。

Answer 1

cube.updateMatrixWorld(); //Make sure the object matrix is current with the position/rotation/scaling of the object...
var localPt = cube.worldToLocal(yourPoint.clone());  //Transform the point from world space into the objects space
if(Math.abs(localPt.x)<=0.5&&Math.abs(localPt.y)<=0.5&&Math.abs(localPt.z)<=0.5)
    console.log("Point is inside!"); //Check if all the axis are within the size of the cube.. if your cube sizes arent 1,1,1, you'll have to adjust these checks to be half of width/height/depth..

那样的东西？

Answer 2

您可以创建THREE.Box3()实例，使用其.setFromObject()多维数据集作为参数，然后调用.containsPoint()，将要检查的点作为参数传递给此方法：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(2, 5, 10);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.GridHelper(10, 10));

var cube = new THREE.Mesh(new THREE.BoxGeometry(2, 2, 2), new THREE.MeshBasicMaterial({
  color: "aqua",
  wireframe: true
}));
cube.position.set(0, 1, 0);
scene.add(cube);

var pointA = new THREE.Vector3(0, 1, 0);
var pointB = new THREE.Vector3(2, 1, 0);
point(pointA, 0x00ff00);
point(pointB, "yellow");

function point(point, color) {
  p = new THREE.Mesh(new THREE.SphereGeometry(0.25, 4, 2), new THREE.MeshBasicMaterial({
    color: color
  }));
  p.position.copy(point);
  scene.add(p);
}

var bb = new THREE.Box3(); // for re-use
bb.setFromObject(cube);
console.log(bb);
console.log(bb.containsPoint(pointA), bb.containsPoint(pointB));

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Answer 3

@ prisoner849 如果旋转框，则您的解决方案不起作用。这是问题的一个例子。我渲染了两个解决方案，你可以看到Box3版本在哪里与旋转的立方体断开，而分析一旦工作。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(2, 5, 10);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.GridHelper(10, 10));
var boxDimensions = new THREE.Vector3(2,2,2);
var cube = new THREE.Mesh(new THREE.BoxGeometry(boxDimensions.x,boxDimensions.y,boxDimensions.z), new THREE.MeshBasicMaterial({
  color: "aqua",
  wireframe: true
}));
cube.position.set(0, 1, 0);
cube.rotation.y = Math.PI*0.25;
scene.add(cube);

var pointA = new THREE.Vector3(0.95, 0.95, 0.95);

var pointC = new THREE.Vector3(-0.65, 0.65, -0.65);
var pa = point(pointA, 0x00ff00);

var pc = point(pointC, 0x00ff00);

function point(point, color) {
  p = new THREE.Mesh(new THREE.SphereGeometry(0.25, 4, 2), new THREE.MeshBasicMaterial({
    color: color
  }));
  p.position.copy(point);
  scene.add(p);
  return p;
}

var bb = new THREE.Box3(); // for re-use
bb.setFromObject(cube);
console.log(bb);


function correctPointInBox(pt,cube,boxDim){
 cube.updateMatrixWorld(); //Make sure the object matrix is current with the position/rotation/scaling of the object...
var localPt = cube.worldToLocal(pt.clone());  //Transform the point from world space into the objects space
if(Math.abs(localPt.x)<=boxDim.x*0.5&&Math.abs(localPt.y)<=boxDim.y*0.5&&Math.abs(localPt.z)<=boxDim.z*0.5)
return true;
else
return false;
}


render();

function render() {
   pa.position.x = Math.sin(performance.now()*0.001)*2;
   pc.position.z = Math.cos(performance.now()*0.001)*2;

   if(bb.containsPoint(pa.position))
       pa.material.color.set("red")
   else 
       pa.material.color.set("green")

    if(correctPointInBox(pc.position,cube,boxDimensions))
         pc.material.color.set("red")
    else 
        pc.material.color.set("green")

  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

验证一个点是否在three.js中的多维数据集内

3 个答案: