创建垂直于x、y和z轴的三个平面几何图形？

Question

我需要在场景中创建三个平面几何体（一个垂直于x轴，一个垂直于y轴，一个垂直于z轴），看起来有点像这样。

下面是我创建的代码：

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

同样的输出结果看起来令人失望： 我想知道如何让它看起来像我上面发布的图片？他们是如何在中心相交的，添加到场景中的表面网格会出现在中心交点处？非常感谢您提前的帮助。

- GeekAndNerd223

Answer 1

您不需要改变它们的位置，因为它们都应该经过0, 0, 0。但是，如果您想让它们沿不同的轴对齐，则需要更改它们的旋转。

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

不需要创建三个不同的平面几何体。您可以将同一个平面几何体重复使用三次。

- M -