javascript - 如何检测两个球体对象的交集以避免彼此重叠？

Question

我正在尝试创建球体并在矩形的顶点为它们分配随机颜色(它可以是三 Angular 形或六边形等其他几何形状，为简单起见，在本示例中我想使用矩形)。 http://jsfiddle.net/ElmerCC/ja6zL0k1/

let scene, camera, renderer;
      let controls;
      let widthWindow = window.innerWidth;
      let heightWindow = window.innerHeight;
      let aspect = widthWindow / heightWindow;

      let mouse = new THREE.Vector2();
      let raycaster = new THREE.Raycaster();

      let intersect;

      let elements = [];
      let elementsNew = [];

      init();
      animate();

      function init() {
        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 10000);
        camera.up.set(0, 0, 1);
        camera.position.set(-500, -500, 400);
        scene.add(camera);

        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(widthWindow, heightWindow);
        document.body.appendChild(renderer.domElement);

        controls = new THREE.OrbitControls(camera, renderer.domElement);
        let p = [];

        p[0] = new THREE.Vector3(-100, -100, 0);
        p[1] = new THREE.Vector3(100, -100, 0);
        p[2] = new THREE.Vector3(100, 100, 0);
        p[3] = new THREE.Vector3(-100, 100, 0);

        //dibujar los nodos
        for (let cont = 0; cont < 4; cont++) {
          let obj = drawJoint(p[cont], 10, 0x666666, 0, true);
          elements.push(obj);
          scene.add(obj);
        }

        var geometry = new THREE.PlaneGeometry(200, 200);
        var material = new THREE.MeshBasicMaterial({
          color: 0x666666,
          side: THREE.DoubleSide
        });
        var plane = new THREE.Mesh(geometry, material);
        scene.add(plane);

        //document.addEventListener("mousemove", moveMouse);
        document.addEventListener("mousedown", downMouse);
      }



      function downMouse(event) {
        event.preventDefault();
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
        raycaster.setFromCamera(mouse, camera);
        let intersected = raycaster.intersectObjects(elements);
        if (intersected.length > 0) {
          intersect = intersected[0].object;
          let center = intersect.position;
          let n = drawJoint(center, 15, Math.random() * 0xffffff, 1, true);
          elementsNew.push(n);
          scene.add(n);
        }
      }

      function animate() {
        requestAnimationFrame(animate);
        render();
      }

      function render() {
        controls.update();
        renderer.render(scene, camera);
      }
      function drawJoint(
        JtCenter,
        JtRadius,
        Jtcolor,
        JtOpacity,
        JtTransparency
      ) {
        let JtMaterial = new THREE.MeshBasicMaterial({
          color: Jtcolor,
          opacity: JtOpacity,
          transparent: JtTransparency
        });
        let JtGeom = new THREE.SphereGeometry(JtRadius, 10, 10);
        let Joint = new THREE.Mesh(JtGeom, JtMaterial);
        JtGeom .computeBoundingSphere();
        Joint.position.copy(JtCenter);

        return Joint;
      }

如何检测两个球体对象的交集以避免彼此重叠？

Answer 1

Sphere s 是可以测试相交的最简单的对象。

请注意，Sphere 是一种数学表示形式，与具有球体几何形状的 Mesh 不同。 (您仍然可以使用 boundingSphere 属性获取 Mesh 的数学边界球。)

以下是检查两个球体是否接触/相交的方法(您可以向此函数发送两个 boundingSphere 属性来检查其他非球体对象)。

function spheresIntersect(sphere1, sphere1position, sphere2, sphere2position){
    return sphere1position.distanceTo(sphere2position) <= (sphere1.radius + sphere2.radius)
}