时间戳

首页 > 解决方案 > 验证一个点是否在three.js中的立方体内

three.js - 验证一个点是否在three.js中的立方体内

问题描述

我创建了一个立方体：

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 功能。

标签： three.js

解决方案

您可以创建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>

推荐阅读