Question

我正在尝试创建球体并在矩形的顶点处给它们分配随机的颜色（它可以是其他几何形状，例如三角形或六边形等，为简单起见，我想使用矩形）。 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是最容易测试交集的对象。

请注意，Sphere是一种数学表示形式，与球形几何形状的Mesh不同。（您仍然可以通过Mesh属性获得boundingSphere的数学边界球。）

这里是检查两个球体是否接触/相交的方法（您可以向该函数发送两个boundingSphere属性，以检查其他非球体对象）。

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

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

1 个答案: