I have been tasked with creating three plane geometries in a scene, one perpendicular to the x-axis, one perpendicular to the y-axis, and one perpendicular to the z-axis. The desired result should somewhat resemble this image: https://i.sstatic.net/L1K6G.png Below is the code I have written for achieving this:
public displayPlaneGeometries() {
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);
}
Unfortunately, the output does not match the desired image, appearing like this: https://i.sstatic.net/PIEAN.png I am seeking advice on how to make the planes intersect at the center as shown in the image I uploaded above. How can I ensure that when added to the scene, they appear intersecting at the central point? Thank you for any assistance you can provide.