Rotating plane around line


I have a plane and two points on scene that are connected. And my question is how can I rotate the plane around the line?


Like so, but this is hardcoded. Is there a way to do it dynamically

Have you tried Object3D.rotateOnAxis ?

Since your segment does not go through the origin, you can do this :

// vecA == Vector3 start of your segment
// vecB == Vector3 end of your segment
const vec = new THREE.Vector3();

vec.copy( vecA ).sub( vecB );
mesh.position.sub( vecA );
mesh.rotateOnAxis( vec, angle );
mesh.position.add( vecA );

Also consider using Object3D.rotateOnWorldAxis for world space rotation.

1 Like
		var planeGeom = new THREE.PlaneGeometry(100, 100);
		var plane = new THREE.Mesh(planeGeom, new THREE.MeshBasicMaterial({
			color: "lightgray",
			transparent: true,
			opacity: 0.5,
			side: THREE.DoubleSide
		}));
		scene.add(plane);

		let vecA = new THREE.Vector3(50, 20, 0);
		let vecB = new THREE.Vector3(-50, 20, 0);
		const vec = new THREE.Vector3();

		vec.copy(vecA).sub(vecB);
		plane.position.sub(vecA);
		plane.rotateOnAxis(vec, Math.PI / 5);
		plane.position.add(vecA);

If I do it like so it’s not the the result I expect to see. I get this

Seems I was wrong in my assumption about this method, here is a PR that want to introduce what you need : Object3D: Added rotateAroundWorldAxis() by mrdoob · Pull Request #21813 · mrdoob/three.js · GitHub

Here is a fiddle showing an alternative solution in the meantime : merge vertices - JSFiddle - Code Playground

I used a function from this SO answer, don’t forget to paste it.

1 Like

Thanks, the fiddle this fiddle is working for me