Enhance fullness to facial features

Question

Enhance fullness to facial features

Creating walls by forming faces using specific points is a successful process for me. However, I am now looking to add thickness to these walls, and I am unsure of the best approach.

Below is the code I currently use to create the 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);
...
}

Once the walls are created, they come together to form a closed room. Here is an example of the points:

(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

Thank you for your assistance.

Update// I believe I am making progress in the right direction. I have added 4 additional points with an offset and created faces for them. However, I am encountering an issue. Could it be related to the faces being incorrect?

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

javascript three.js

Answer 1

Answer №1

Exploring the concept of creating a mesh with thin dimensions using 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>

Answer 2

Exploring the concept of creating a mesh with thin dimensions using 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>

Enhance fullness to facial features

Answer №1

Similar questions

The function dispatch is not recognized and will be removed from the database. An error will be generated indicating that dispatch is not a valid function

Access a document from a collaborative directory directly in a web browser

When using Lockdown.js with NPM, I encounter a blank file being returned

Refresh the copyright year by syncing with a time server

Ensuring the node array is easily accessible within the view

Updating specific data in MongoDB arrays: A step-by-step guide

I am seeking to retrieve data from MongoDB by utilizing the limit feature, while also sending a specific query

How to Pass and Execute Asynchronous Callbacks as Props in React Components

Navigating Divs Using jQuery

Can the key in a WeakMap be altered when setting an item within it?

How to include an href in a button using Pug without disrupting a form

Error in IONIC 3: The code is unable to read the 'nativeElement' property due to an undefined value, resulting in a TypeError

Is there a way to eliminate the 'All Files' option from an HTML file input field?

Display JSON data values using jQuery

Guide to defining a conditional statement in a Nuxt.js application

What is preventing window.scrollTo() from being executed?

What methods can be used to configure Jasmine to read individual Vue component files?

The sequence of Angular directives being executed

activating the submit button depending on the user input

When a link is clicked, submit a form and send it to several email addresses simultaneously