为面添加厚度 [英] Add Thickness to faces

问题描述

我通过用我拥有的一些点创建面来创建墙.创建墙壁确实没有问题.现在我想给我的墙壁增加一些厚度，但我不太确定如何.

i create walls by creating faces with some points i have. The creation of the walls does work without an issue. Now i want to add some thickness to my walls but iam not quite sure how to.

这是我创建墙壁的代码:

here is my code for creating my walls:

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

最后，墙壁一起形成了一个封闭的房间.例如，这些点是:

at the end the walls form a closed Room together. For Example the points are:

(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 个带有偏移量的点并为它们创建了面，但仍然有问题.可能面孔是错误的?

Update// i think iam on the right track now. i added 4 more points with a offset and created faces for them but there is still something wrong. Probably the Faces are wrong ?

  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()的网格:

Just a concept of how you can do it, using a mesh with thin THREE.BoxGeometry():

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

body {
  overflow: hidden;
  margin: 0;
}

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

这篇关于为面添加厚度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！