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

我试图创建球体，并在矩形的顶点处为它们指定一种随机颜色（它可以是其他几何体，如三角形或六边形等，为简单起见，在本例中，我想使用矩形）

let场景、摄影机、渲染器；
让控制；
设widthWindow=window.innerWidth；
let heightWindow=window.innerHeight；
让纵横比=宽度窗口/高度窗口；
让鼠标=新的3.Vector2（）；
设raycaster=new-THREE.raycaster（）；
让我们相交；
让元素=[]；
设elementsNew=[]；
init（）；
制作动画（）；
函数init（）{
场景=新的三个。场景（）；
摄像机=新的三个透视摄像机（75，纵横比，0.11000）；
摄像机设置（0,0,1）；
相机。位置。设置（-500，-500，400）；
场景。添加（摄影机）；
renderer=new THREE.WebGLRenderer（）；
renderer.setPixelRatio（window.devicePixelRatio）；
设置大小（宽度窗口、高度窗口）；
document.body.appendChild（renderer.doElement）；
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
设p=[]；
p[0]=新的三个向量3（-100，-100,0）；
p[1]=新的三个向量3（100，-100,0）；
p[2]=新的三向量3（100100,0）；
p[3]=新的三个向量3（-100100,0）；
//诺多斯迪布贾尔酒店
对于（让cont=0；cont<4；cont++）{
设obj=牵引接头（p[cont]，10，0x666666，0，真）；
元素推送（obj）；
场景。添加（obj）；
}
变量几何=新的三个平面几何（200200）；
var材料=新的三网格基本材料({
颜色：0x666666，
侧面：三个。双面
});
var平面=新的三个网格（几何体、材质）；
场景。添加（平面）；
//document.addEventListener（“mousemove”，moveMouse）；
文档。添加了EventListener（“鼠标向下”，鼠标向下）；
}
功能鼠标下键（事件）{
event.preventDefault（）；
mouse.x=（event.clientX/window.innerWidth）*2-1；
mouse.y=-（event.clientY/window.innerHeight）*2+1；
raycaster.setFromCamera（鼠标、相机）；
让相交=光线投射器。相交对象（元素）；
如果（相交。长度>0）{
intersect=相交[0]。对象；
让中心=相交。位置；
设n=drawJoint（中心，15，Math.random（）*0xffffff，1，true）；
元素新推（n）；
场景。添加（n）；
}
}
函数animate（）{
请求动画帧（动画）；
render（）；
}
函数render（）{
控件更新（）；
渲染器。渲染（场景、摄影机）；
}
功能牵引接头(
联合技术中心，
JtRadius，
Jtcolor，
不透明度，
透明度
) {
设JtMaterial=新的三网格基本材质({
颜色：Jtcolor，
不透明度：不透明度，
透明的：JtTransparency
});
设jtgome=new-THREE.SphereGeometry（jtgometry半径，10,10）；
让接头=新的三个网格（JtGeom、JTMATERY）；
jtgome.computeBoundingSphere（）；
接头位置复印件（JT中心）；
回位接头；
}

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

s是可以测试交点的最简单对象

请注意，

Sphere

是一种数学表示，它不同于具有球体几何体的

Mesh

。（仍然可以使用

boundingSphere

属性获取

网格的数学边界球体。）

下面是检查两个球体是否接触/相交的方法（您可以将此函数发送到两个
boundingSphere
properties以检查其他非球体对象）

函数SphereIntersect（sphere1，sphere1位置，sphere2，sphere2位置）{
返回sphere1position.distanceTo（sphere2position）s是可以测试交点的最简单对象

请注意，
球体
是一种数学表示，它不同于使用球体几何体的
网格
。（仍然可以使用
boundingSphere
属性获取
网格
的数学边界球体。）

下面是检查两个球体是否接触/相交的方法（您可以将此函数发送到两个
boundingSphere
properties以检查其他非球体对象）

函数SphereIntersect（sphere1，sphere1位置，sphere2，sphere2位置）{
返回sphere1position.distanceTo（sphere2position）使用
sphere.intersectsssphere（sphere:sphere）：Boolean
from我不知道为什么我没有看到。谢谢@AlexKhoroshylov！数学几乎完全相同：使用
sphere.intersectsssphere（sphere:sphere）：Boolean
我不知道为什么我没有看到。谢谢，@AlexKhoroshylov！数学几乎完全一样：
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;
      }

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