使用Three.js

Question

我想知道是否可以使用Three.js创建三维垂直墙，如图像

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

Answer 1

将每个墙壁的顶角存放为＆＃34;环＆＃34;三维顶点顺时针或逆时针方向。 （如果您喜欢非平屋顶，每个屋顶顶点可以有不同的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);
}

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

这里的两面墙是相互面对的。