How to join two individual vertices each belonging to two different geometries? - three.js

Question

At the same position?
Here is my code:
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);
Here are the two vertices I need to join together. I need to find the middle world coordinates in between them, once this is done, I need to translate them twoards eachother (practically merging them into the same spot)
var myPoint1 = cubeGeometry1.vertices[0];
var myPoint2 = cubeGeometry2.vertices[5];
Here is what I have so far - Although this did not work and I do not fully understand the code.
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;
I simply just want to merge vertex A from Geometry A with Vertex B from Geometry B.

Answer 1

If I got you correctly, you can use .localToWorld(), .worldToLocal() methods:
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>