создать 3d перпендикулярные стены, используя three.js

Question

мне интересно, если это возможно, чтобы создать 3d перпендикулярные стены, используя three.js, как на этом изображении

я пытался использовать THREE.Shape, чтобы нарисовать прямоугольник, но я не» t знать, как добавить больше перпендикулярных или параллельных прямоугольников.

Answer 1

Просто строить различные сетки 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; 

Две стены здесь были обращены друг к другу.

Answer 2

Храните верхние углы каждой стены в виде «кольца» трехмерных вершин, идущих либо по часовой стрелке, либо против часовой стрелки. (Каждая вершина крыши может иметь другое значение 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); 
}