使用 Three.js 创建 3d 垂直墙答案

【问题标题】：create 3d perpendicular walls using Three.js使用 Three.js 创建 3d 垂直墙
【发布时间】：2015-09-15 19:00:25
【问题描述】：

我想知道是否可以使用 Three.js 创建 3d 垂直墙，就像这张图片

我尝试使用 THREE.Shape 绘制一个矩形，但我不知道如何添加更多垂直或平行的矩形。

【问题讨论】：

标签： javascript 3d three.js rectangles

【解决方案1】：

将每面墙的顶角存储为顺时针或逆时针方向的 3d 顶点“环”。（如果您喜欢非平屋顶，每个屋顶顶点可以有不同的 z 值，或者只是将它们都设置为相同的高度。）

每面墙都是列表中后续的一对顶点。

对于每面墙，绘制一个简单的平面几何图形和网格。手动为平面创建两个面很容易，而不是乱用其他几何类型。

//Simple A-frame roof
var roofVertices = [
    new THREE.Vector3(0, 10, 0), new THREE.Vector3(10, 15, 0), new THREE.Vector3(20, 10, 0),
    new THREE.Vector3(20, 10, 20), new THREE.Vector3(10, 15, 20), new THREE.Vector3(0, 10, 20)
];

var material = new THREE.MeshBasicMaterial({
    color: 0xccffcc,
    side: THREE.DoubleSide
});

for (var i = 0; i < roofVertices.length; i++) {

    var v1 = roofVertices[i];
    var v2 = roofVertices[(i+1)%roofVertices.length];//wrap last vertex back to start

    var wallGeometry = new THREE.Geometry();

    wallGeometry.vertices = [
        v1,
        v2,
        new THREE.Vector3(v1.x, 0, v1.z),
        new THREE.Vector3(v2.x, 0, v2.z)
    ];

    //always the same for simple 2-triangle plane
    wallGeometry.faces = [new THREE.Face3(0, 1, 2), new THREE.Face3(1, 2, 3)];

    wallGeometry.computeFaceNormals();
    wallGeometry.computeVertexNormals();

    var wallMesh = new THREE.Mesh(wallGeometry, material);
    scene.add(wallMesh);
}

【讨论】：

【解决方案2】：

只需构建不同的 Mesh obj 并按照您想要的方式放置它们，这就是一个示例

var geometryLateral = new THREE.BoxGeometry(0.2, 2, 5);
var wall1 = new THREE.Mesh(geometryLateral, material);
scene.add(wall1);
wall1.position.x=-1;
var wall2 = new THREE.Mesh(geometryLateral, material);
scene.add(wall2);
wall2.position.x=1;

这里的两堵墙是相对的。

【讨论】：