Center ThreeJS PlaneHelper on geometry

[MichaelBluetooth]

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:

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

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);

What is the correct way to “shift” the PlaneHelper so that it’s centered on my model?

[cheeseburger]

yes you can shift the planehelper, but it seems that the more optimal way is centering your model itself.

Centering a glTF geometry

Centering an object with BufferGeometry.center() does only center the geometry. It does not work if the object or its ancestors are transformed. Hence, it’s better to use the following pattern: const box = new THREE.Box3().setFromObject( gltf.scene ); const center = box.getCenter( new THREE.Vector3() ); gltf.scene.position.x += ( gltf.scene.position.x - center.x ); gltf.scene.position.y += ( gltf.scene.position.y - center.y ); gltf.scene.position.z += ( gltf.scene.position.z - center.z ); As …

[MichaelBluetooth]

Thanks for the suggestion. I don’t think shifting the model to the center of the scene will work for my use case. I may have more than one model in the scene that have local clipping planes.

What is the proper way to shift the plane helper so that it’s centered on some arbitrary geometry? If I look at the source, it appears to always be centered around (0,0,0).

[PavelBoytchev]

PlaneHelper works in world coordinates. If you move the helper, it will still turn towards the global (0,0,0).

The following example defines a custom PlaneHelper based on THREE.PlaneHelper. When you attach this helper to an object, you can move/spin the object and the helper will move/spin relative to it.

I’m not sure whether this addresses your problem, but it was fun to dig into this issue:

https://codepen.io/boytchev/full/KKxaYwp

---

PS. If the plane is visualized in the opposite direction, swap this.position and this.plane.normal in line 68.

[MichaelBluetooth]

@PavelBoytchev this was extremely helpful. I ended up using this by creating an invisible box at the center of the model being clipped, which the updated helper gets attached to. This centers the PlaneHelper where I want it. Then, when I move the plane, I also move the box - which also moves the PlaneHelper giving me the desired effect.