Creating three plane geometry perpendicular to x, y and z axis?

I am supposed to create three plane geometries to the scene (one perpendicular to x axis, one perpendicular to y axis and one perpendicular to z axis) that would somewhat look like this. So, herein is my code below for the same:

public showPlaneGeometry() {
        console.log(this.hScene)
        const geometryx = new th.PlaneGeometry(1, 1);
        const geometryy = new th.PlaneGeometry(1, 1);
        const geometryz = new th.PlaneGeometry(1, 1);
        const material = new th.MeshBasicMaterial({
            color: 0xa6cfe2,
            side: th.DoubleSide,
            transparent: true,
            opacity: 0.5,
            depthWrite: false,
        });
        const planex = new th.Mesh(geometryx, material);
        const planey = new th.Mesh(geometryy, material);
        const planez = new th.Mesh(geometryz, material);
        planex.position.set(1, 0, 0);
        planey.position.set(0, 1, 0)
        planez.position.set(0, 0, 1)
        material.transparent = true
        this.hScene.add(planex, planey, planez);
    }

The output for the same is just appearing this way disappointingly: I was wondering how do I make it look like the image I posted above? That they intersect at the centre that way and the surface meshes when added to the scene would appear at the centre intersecting point? Thank you so much for your help in advance.

Answer

You don’t need to change their position, since they all should go through 0, 0, 0. However, you need to change their rotation if you want them to align along different axes.

const planeGeom = new THREE.PlaneGeometry(1, 1);
const planeMat = new THREE.MeshBasicMaterial({
    color: 0xa6cfe2,
    side: THREE.DoubleSide,
    transparent: true,
    opacity: 0.5,
    depthWrite: false,
});
const planeXY = new THREE.Mesh(planeGeom, planeMat);
const planeXZ = new THREE.Mesh(planeGeom, planeMat);
const planeYZ = new THREE.Mesh(planeGeom, planeMat);

// Default plane already occupies XY plane
planeXY.rotation.set(0, 0, 0);

// Rotate around x-axis to occupy XZ plane
planeXZ.rotation.set(Math.PI / 2, 0, 0);

// Rotate around y-axis to occupy YZ plane
planeYZ.rotation.set(0, Math.PI / 2, 0);

There’s also no need to create 3 different plane geometries. You can just re-use the same one 3 times.