I asked a question on StackOverflow. I made some progress but I’m still lost for the more general situation.

Basically the question is: what is the usual way to draw a cylinder between two given points, and to update the two endpoints? This should be a classical task I think… If you could show me an example, this would be great.

Now that you have all that, create the cylinder with a height of half of the distance, ie.:

const connection = end.clone().sub(start);
const distance = connection.length();
const direction = connection.clone().normalize();
const cylinder = new Three.Mesh(
new Three. CylinderGeometry(1.0, 1.0, distance / 2.0),
new Three.MeshNormalMaterial()
);

Place the cylinder inside a pivot group (since there’s going to be rotation involved later), then place the pivot group precisely halfway between start point and end point, ie.:

const connection = end.clone().sub(start);
const distance = connection.length();
const direction = connection.clone().normalize();
const cylinder = new Three.Mesh(
new Three. CylinderGeometry(1.0, 1.0, distance / 2.0),
new Three.MeshNormalMaterial()
);
const pivot = new Three.Group();
pivot.add(cylinder);
const halfDistance = direction.clone().multiplyScalar(distance / 2.0);
pivot.position.copy(start);
pivot.position.add(halfDistance);
scene.add(pivot);

Make pivot lookAt any of the points (it doesn’t really matter, either start or end, result’s the same), ie.:

const connection = end.clone().sub(start);
const distance = connection.length();
const direction = connection.clone().normalize();
const cylinder = new Three.Mesh(
new Three. CylinderGeometry(1.0, 1.0, distance / 2.0),
new Three.MeshNormalMaterial()
);
const pivot = new Three.Group();
pivot.add(cylinder);
const halfDistance = direction.clone().multiplyScalar(distance / 2.0);
pivot.position.copy(start);
pivot.position.add(halfDistance);
scene.add(pivot);
pivot.lookAt(end);

You’ll notice the cylinder is sideways - not good. Rotate it locally within the pivot group (that’s why we had it in the first place) by 90 degrees:

const connection = end.clone().sub(start);
const distance = connection.length();
const direction = connection.clone().normalize();
const cylinder = new Three.Mesh(
new Three. CylinderGeometry(1.0, 1.0, distance / 2.0),
new Three.MeshNormalMaterial()
);
const pivot = new Three.Group();
pivot.add(cylinder);
const halfDistance = direction.clone().multiplyScalar(distance / 2.0);
pivot.position.copy(start);
pivot.position.add(halfDistance);
scene.add(pivot);
pivot.lookAt(end);
cylinder.rotation.x = Math.PI / 2.0;

Congratulations - you’ve now achieved a cylinder between two points, here’s a ready example!

Ok thanks. I found an example here. It doesn’t work because of OrbitControls but I can understand the code: I have to mock the spheres and the cylinders to get the matrix and to use setMatrixAt. Will try tomorrow.