如何连接两个单独的顶点，每个顶点都属于两个不同的几何图形？答案

【问题标题】：How to join two individual vertices each belonging to two different geometries?如何连接两个单独的顶点，每个顶点都属于两个不同的几何图形？
【发布时间】：2018-04-23 19:36:13
【问题描述】：

在同一个位置？

这是我的代码：

var cubeGeometry1 = new THREE.BoxGeometry(20,20,20);
var cubeMesh1 = new THREE.Mesh(cubeGeometry1, material1);

var cubeGeometry2 = new THREE.BoxGeometry(20, 20, 20);
var cubeMesh2 = new THREE.Mesh(cubeGeometry2, material1);

scene.add(cubeMesh1);
scene.add(cubeMesh2);

这是我需要连接在一起的两个顶点。我需要找到它们之间的中间世界坐标，一旦完成，我需要将它们相互转换（实际上将它们合并到同一个位置）

var myPoint1 = cubeGeometry1.vertices[0];
var myPoint2 = cubeGeometry2.vertices[5];

这是我到目前为止所拥有的 - 虽然这不起作用并且我不完全理解代码。

function getPointInBetweenByPerc(pointA, pointB, percentage)
{
    var dir = pointB.clone().sub(pointA);
    var len = dir.length();
    dir = dir.normalize().multiplyScalar(len*percentage);

    return pointA.clone().add(dir);
}
var pointToTransform = getPointInBetweenByPerc(myPoint1, myPoint2, 0.5);
console.log(pointToTransform);
cubeGeometry1.vertices[0].x = pointToTransform.x; //only applies to local matrix?
cubeGeometry2.vertices[5].x = pointToTransform.x;

我只是想将几何 A 中的顶点 A 与几何 B 中的顶点 B 合并。

【问题讨论】：

请提供更多信息，如下所述：stackoverflow.com/help/mcve
请看，我做了一些改动

标签： three.js

【解决方案1】：

如果我没听错，你可以使用.localToWorld()、.worldToLocal() 方法：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(-2, 3, 5);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.append(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var box1 = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial({
  color: "red",
  wireframe: true
}));
box1.position.set(0, 0, 0);
scene.add(box1);

var box2 = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial({
  color: "blue",
  wireframe: true
}));
box2.position.set(1, 2, 3);
scene.add(box2);

btnMerge.addEventListener("click", function() {

  let vertex1 = box1.localToWorld(box1.geometry.vertices[0].clone());
  let vertex2 = box2.localToWorld(box2.geometry.vertices[3].clone());

  let midPoint = vertex1.add(vertex2).multiplyScalar(0.5);

  box1.geometry.vertices[0].copy(box1.worldToLocal(vertex1.copy(midPoint)));
  box2.geometry.vertices[3].copy(box2.worldToLocal(vertex2.copy(midPoint)));

  box1.geometry.verticesNeedUpdate = true;
  box2.geometry.verticesNeedUpdate = true;

}, false);

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>
<button id="btnMerge" style="position: absolute;">Merge</button>

【讨论】：