Question

我通过创建具有一些点的面来创建墙。墙的创建确实没有问题。现在我想为我的墙增加一些厚度，但我不太清楚如何。

这是我创建墙壁的代码：

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

Answer 1

使用具有细THREE.BoxGeometry()：

的网格，只是一个如何做到这一点的概念

＆＃13;

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(2, 3, 5).setLength(10);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.GridHelper(10, 10));

var pointStart = new THREE.Vector3(-1, 0, 3);
var pointEnd = new THREE.Vector3(-1, 0, -3);
var height = 4;
var thickness = 0.1;

var boxW = pointEnd.clone().sub(pointStart).length();
var boxH = height;
var boxD = thickness;

var boxGeometry = new THREE.BoxGeometry(boxW, boxH, boxD);
boxGeometry.translate(boxW * 0.5, boxH * 0.5, 0);
boxGeometry.rotateY(-Math.PI * 0.5);
var wall = new THREE.Mesh(boxGeometry, new THREE.MeshBasicMaterial({
  color: "red",
  wireframe: true
}));
wall.position.copy(pointStart);
wall.lookAt(pointEnd);
scene.add(wall);

addPoint(pointStart, "green");
addPoint(pointEnd, "yellow");

function addPoint(position, color) {
  let p = new THREE.Mesh(new THREE.SphereGeometry(0.125, 4, 2), new THREE.MeshBasicMaterial({
    color: color
  }));
  p.position.copy(position);
  scene.add(p);
}

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

＆＃13;

body {
  overflow: hidden;
  margin: 0;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

＆＃13;

向面添加厚度

1 个答案: