THREE.js planeGeometry 夹在墙内答案

【问题标题】：THREE.js planeGeometry clipped inside the wallsTHREE.js planeGeometry 夹在墙内
【发布时间】：2020-07-12 21:02:03
【问题描述】：

我想使用 Three.js 制作 3D 建筑。例如，我通过棋盘纹理制作了 6 面墙和 1 面地板。我对 wall1 和 wall4 使用了 clippingPlanes：

floor1.material.clippingPlanes = [plane1,plane4];

我用我的墙（墙 1 和墙 4）制作了我的飞机（平面 1 和平面 4）。比如我的wall4 planeGeometry和plane4代码在这里：

var wallGeometry4 = new THREE.PlaneGeometry(40, Floor_Height, 1, 1);
                var wall4 = createMesh(wallGeometry4, "brick_diffuse.jpg", THREE.DoubleSide, 1024, 1024);
                unit1.add(wall4);
                wall4.position.x = -10;
                wall4.position.y = 0;
                wall4.position.z = -20;
                wall4.rotation.y = 1.5 * Math.PI;
                wall4.add(new THREE.EdgesHelper(wall4, 0x000000));

                var plane4 = new THREE.Plane();
                var normal4 = new THREE.Vector3();
                var point4 = new THREE.Vector3();

                normal4.set(0, 0, -1).applyQuaternion(wall4.quaternion);

                point4.copy(wall4.position);

                plane4.setFromNormalAndCoplanarPoint(normal4, point4);

但我看到 wall5 和 wall6 之间有一个空白区域，因为 plane4（用于剪裁地板）与 wall4 的大小不同。我认为Plane4是整个场景。如何更改我的飞机大小以正确剪辑？或者有什么办法可以让地板以墙为界？

【问题讨论】：

THREE.Plane() 是一个无限的数学平面。
我该怎么办？如何正确填充地板？没有办法吗？
作为一个选项：您知道墙壁的尺寸，因此您可以获取角点，然后从它们构建形状几何。
另一种选择：使用相交剪裁来切出你的角落。 threejs.org/examples/?q=clipping#webgl_clipping_intersection
另一种选择是不要使用clippingPlanes，而是快速编写自己的剪辑shaderMaterial

标签： three.js

【解决方案1】：

按照建议实现此目的的一种方法是使用 ShapeGeometry。

当您创建墙时，您可以将它们的起点和终点的 x 和 z 坐标保存在一个数组中，以形成 Vector2 点的循环。然后，您可以使用 shapeGeometry 从这些点创建新的自定义形状。

points = [{x:0,y:0},{x:0,y:10},{x:10,y:10},{x:10,y:0},{x:0,y:0}]

function getShapeFromPoints(points){
    const shape = new THREE.Shape();
    shape.moveTo(points[0].x, points[0].y);
    for (let i = 1; i < points.length; i++) {
        shape.lineTo(points[i].x, points[i].y);
    }
    return shape;
}

function createPlaneFromPoints(points) {
    const planeMaterial = getPlaneMaterial();
    const shape = getShapeFromPoints(points);
    const geometry = new THREE.ShapeBufferGeometry(shape);
    geometry.rotateX(degreeToRadians(-90));
    const mesh = new THREE.Mesh(geometry, planeMaterial);
    return mesh;
}

希望对你有所帮助！

【讨论】：