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

Questions
, ,
1

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.

image
image631×678 24.6 KB

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:
enter image description here
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.

2

/cc

4

Thanks for tagging my other post from stack overflow. I posted in stack overflow too. But I didn’t receive answer yet there either.