Javascript 为面添加厚度

我通过创建带有一些点的面来创建墙。 墙的创建没有任何问题。 现在我想给我的墙壁增加一些厚度，但我不太确定怎么做

以下是我创建墙的代码：

makeWall(start, end) {

let v1 = this.helpers.toVec3(start); //0

let v2 = this.helpers.toVec3(end);  //1

let v3 = v2.clone(); //2
v3.y = this.wallHeight;

let v4 = v1.clone(); //3
v4.y = this.wallHeight;


let points = [ v1.clone(), v2.clone(), v3.clone(), v4.clone() ]; 

console.log("Points", points )

let mesh:THREE.Mesh;
let geometry = new THREE.Geometry();

let label: THREE.Sprite;
let walldirection;

geometry.vertices = [v1, v2, v3, v4];
geometry.faces.push(new THREE.Face3(0, 1, 2));
geometry.faces.push(new THREE.Face3(0, 2, 3));

geometry = this.helpers.assignUVs(geometry);

mesh = new THREE.Mesh(geometry, this.wallMaterial);
...
}

最后，墙壁一起形成一个封闭的房间。 例如，这些要点是：

(4) [p, p, p, p]
0: p {x: 200, y: 0, z: -500}
1: p {x: 200, y: 0, z: 300}
2: p {x: 200, y: 277, z: 300}
3: p {x: 200, y: 277, z: -500}
length: 4

谢谢你的调查

更新// 我想我现在走对了方向。 我又添加了4个带有偏移的点，并为它们创建了面，但仍然有一些问题。也许这些面孔是错的

  let v1ex = v1.clone(); // 4
    v1ex.x = v1ex.x - 10;

    let v2ex = v2.clone(); // 5 
    v2ex.x = v1ex.x + 10;

    let v3ex = v3.clone(); // 6 
    v3ex.x = v3ex.x + 10;

    let v4ex = v4.clone();  // 7 
    v4ex.x = v4ex.x - 10;

    let points = [ v1.clone(), v2.clone(), v3.clone(), v4.clone() , v1ex , v2ex , v3ex , v4ex ]; 

    let mesh:THREE.Mesh;
    let geometry = new THREE.Geometry( );

    let label: THREE.Sprite;
    let walldirection;

    geometry.vertices = [v1, v2, v3, v4 , v1ex , v2ex , v3ex , v4ex];

    geometry.faces.push(new THREE.Face3( 0 , 1 , 2 ) );
    geometry.faces.push(new THREE.Face3( 0 , 2 , 3 ) );

    geometry.faces.push(new THREE.Face3( 4 , 5 , 6 ) );
    geometry.faces.push(new THREE.Face3( 4 , 6 , 7 ) );

    geometry.faces.push(new THREE.Face3( 7 , 3 , 6 ) );
    geometry.faces.push(new THREE.Face3( 7 , 3 , 2 ) );

    geometry.faces.push(new THREE.Face3( 0 , 5 , 1 ) );
    geometry.faces.push(new THREE.Face3( 0 , 5 , 4 ) );

---

这只是一个如何实现的概念，使用薄的

THREE.BoxGeometry（）

：

var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（60，window.innerWidth/window.innerHeight，11000）；
相机。位置。设置（2，3，5）。设置长度（10）；
摄像机。注视（场景。位置）；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var controls=新的三个.OrbitControls（摄影机、渲染器.doElement）；
添加（新的三个.GridHelper（10,10））；
var pointStart=新的三个向量3（-1,0,3）；
var pointEnd=new-THREE.Vector3（-1,0，-3）；
var高度=4；
var厚度=0.1；
var boxW=pointEnd.clone（）.sub（pointStart.length（）；
var-boxH=高度；
var-boxD=厚度；
var-boxGeometry=新的三个.boxGeometry（boxW、boxH、boxD）；
boxGeometry.translate（boxW*0.5，boxH*0.5,0）；
boxGeometry.rotateY（-Math.PI*0.5）；
var wall=新的三点网格（boxGeometry，新的三点网格BasicMaterial({
颜色：“红色”，
线框：正确
}));
墙。位置。复制（点开始）；
观察（点端）；
场景。添加（墙）；
addPoint（pointStart，“绿色”）；
addPoint（pointEnd，“黄色”）；
功能添加点（位置、颜色）{
设p=新的三网格（新的三网格球面法（0.125,4,2），新的三网格基本材料({
颜色：颜色
}));
p、 位置。副本（位置）；
场景。添加（p）；
}
render（）；
函数render（）{
请求动画帧（渲染）；
渲染器。渲染（场景、摄影机）；
}

正文{
溢出：隐藏；
保证金：0；
}

为什么不使用薄的

THREE.BoxGeometry（）

/

THREE.BoxBufferGeometry（）

？因为我不知道如何制作从起点开始到终点的BoxGeometry tbh:）谢谢！这很有效。我仍然有一些问题，但这些问题来自代码的其他部分。但是你可以帮我解决另一个问题。我将材料面设置为背面，这样前面的墙就不会从一侧显示出来。现在，这一切都没有发生，墙壁从各个角度都是可见的。但如果我理解正确的话，这一点也不应该改变？@engo不客气：）关于你的问题。我没有得到，你是否继续使用

侧面：三。背面
？只是一个建议：在这里创建一个新问题，或者在下一步询问，因为它超出了当前问题的范围：）。这只是一个“小”问题，所以我不想创建一个新问题。是，墙体材料设置在侧面：背面。但它只适用于新墙的外侧，内侧总是可见的。对不起，我的英语不好，这就是为什么我不能很好地解释：）。不过，再次感谢你的回答：）从中学到了很多，而且还有其他用途@英语也不是我的母语：）我不明白，你为什么用
THREE.BackSide
做墙材。改为使用
THREE.FrontSide
或简单地删除
side
参数，因此材质将使用其默认值-
THREE.FrontSide
。因为它现在与FrontSide（）类似，但与BackSide（）类似