Center ThreeJS PlaneHelper on geometry

272 Views Asked by At

I am using local clipping to allow my users to drop clipping planes on my models. When they add a clipping plane, I'm using PlaneHelper to visualize where the plane is. I cannot seem to get the PlaneHelper to be centered on my models. It always appears to be centered round (0,0,0). My models are loaded from an external source, so I cannot assume they are always centered in the middle of the scene. Most the the ThreeJS examples involve a model that exists at the center of the scene, so the PlaneHelper just works without having to move it anywhere. (Example 1, Example 2).

Here's what it looks like when I add the PlaneHelper: Plane not centered on model

I would like the PlaneHelper to be centered around the model (mocked up in MS Paint): Desired plane position

I create the Plane and PlaneHelper like so:

//helper function to calculate the center of the model I'm adding a clipping plane to
const center = this.getCenter(this.models[0]);

//helper function to determine how big the PlaneHelper is supposed to be
const size = this.getMaxDimension(this.models[0]);

//Create a plane along the X axis, centered on the model, along with something to visualize the plane
const localPlane = new THREE.Plane(new Vector3(1, 0, 0), -center.x);
const helper = new THREE.PlaneHelper( localPlane, size * 2, 0xFF0000 );    
this.scene.add(helper);

//Add the plane to my my model
this.models[0].material.forEach((m: Material) => {
    if(!m.clippingPlanes){
        m.clippingPlanes = [localPlane];
    } else {
        m.clippingPlanes.push(localPlane);
    }
});

As you can see in the first image, the PlaneHelper isn't centered on the model. If I try to set the position of the PlaneHelper, I can see the tail of the PlaneHelper correctly at the center of the model, but the actual plane takes on a weird angle and doesn't actually move.

helper.position.copy(center);

Position appears correct, but plane is angled oddly

What is the correct way to "shift" the PlaneHelper so that it's centered on my model?

0

There are 0 best solutions below