Adding points to vertices on mesh geometry based on their distance

Question

Adding points to vertices on mesh geometry based on their distance

My scene includes a THREE.Geometry with more than 5,000 vertices. I am looking to add THREE.Points to the scene for only 3 specific vertices of the mesh within the geometry. My goal is to achieve a similar outcome as shown in this example:

https://i.sstatic.net/o97yd.png

To accomplish this, I selected the 3 vertices from the first face of the existing geometry and incorporated them into the vertices of a new geometry that should contain these 3 points. I experimented with using both THREE.Points along with THREE.PointsMaterial, and also with THREE.LineSegments paired with

THREE.LineBasicMaterial</code, producing similar results (except lines instead of points).</p>

<pre><code>var vertices = [
  mesh.geometry.faces[0].a,
  mesh.geometry.faces[0].b,
  mesh.geometry.faces[0].c
];


vertices.forEach( function(vId,i){
  vertices[i].index = i;
  vertices[i] = mesh.geometry.vertices[vId].clone();
  vertices[i].l2w = mesh.localToWorld(vertices[i].clone());
  vertices[i].id = vId;
  vertices[i].distance = vertices[i].l2w.distanceTo(camera.position);

})


var plane_geom = new THREE.Geometry();
plane_geom.vertices.push(vertices[0]);
plane_geom.vertices.push(vertices[1]);
plane_geom.vertices.push(vertices[2]);


plane_geom.verticesNeedUpdate = true;
plane_geom.elementsNeedUpdate = true;
plane_geom.computeVertexNormals();


var pointsMaterial2 = new THREE.PointsMaterial({
  size: 2,
  color: "red"
});

var plane_mesh =  new THREE.Points( plane_geom, pointsMaterial2 );
 scene.add( plane_mesh );


mesh.geometry.dispose();
mesh.material.dispose();
scene.remove( mesh);

The initial geometry is globally defined as the geometry of the loaded STL-object and belongs to type THREE.Geometry. The mesh with this geometry is added to the scene in the init function. The geometry object has the following structure:

__directGeometry: Object { vertices: (30006) […], normals: (30006) […], 
colors: (30006) […], … }
__bufferGeometry: Object { uuid: "10EE834D-B19E-4C27-B831-F484D908DB06",                   
name: "", type: "BufferGeometry", … }
_listeners: Object { dispose: (1) […] }
boundingBox: Object { min: {…}, max: {…} }
boundingSphere: Object { center: {…}, radius: 135.73491999459804 }
colors: Array []
colorsNeedUpdate: false
elementsNeedUpdate: false
faceVertexUvs: Array [ [] ]
faces: Array(10002) [ {…}, {…}, {…}, … ]
groupsNeedUpdate: false
id: 2
lineDistances: Array []
lineDistancesNeedUpdate: false
morphNormals: Array []
morphTargets: Array []
name: ""
normalsNeedUpdate: false
skinIndices: Array []
skinWeights: Array []
type: "Geometry"
uuid: "0EB01FF3-E9BF-4CAD-AA97-5EC2933F0D9C"
uvsNeedUpdate: false
vertices: Array(5003) [ {…}, {…}, {…}, … ]
verticesNeedUpdate: false

Upon adding the new mesh plane_mesh with the updated geometry to the scene, all the points (representing each vertex) are displayed (exceeding 5,000 points). However, upon removing the initial mesh from the scene, only the 3 specified points appear visible. When examining plane_mesh, everything appears normal and the mesh contains just the 3 vertices... After several attempts, it became evident that all operations were affecting the initial mesh. Only after disposing of the mesh, was plane_mesh successfully integrated into the scene.

If you have any insights or solutions, they would be greatly appreciated!

javascript three.js geometry mesh

Answer 1

Answer №1

If you want to create a triangle geometry and modify its vertices later on, you can follow this approach using Three.js (r108):

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geom = new THREE.PlaneBufferGeometry(10, 10, 4, 4);
var mat = new THREE.MeshBasicMaterial({
  color: "aqua",
  wireframe: true
});
var mesh = new THREE.Mesh(geom, mat);
scene.add(mesh);

var pointsGeom = new THREE.BufferGeometry().setFromPoints([
  new THREE.Vector3(),
  new THREE.Vector3(),
  new THREE.Vector3()
]);
var pointsMat = new THREE.PointsMaterial({
  size: 1,
  color: "red"
});
var points = new THREE.Points(pointsGeom, pointsMat);
scene.add(points);

setInterval(() => {
  let faces = geom.index.count / 3;
  let face = THREE.Math.randInt(0, faces - 1);

  setTriangle(face);

}, 1000);

var v3 = new THREE.Vector3(); // temp vector

function setTriangle(face) {

  for (let i = 0; i < 3; i++) {
    v3.fromBufferAttribute(geom.attributes.position, geom.index.getX(face * 3 + i));
    pointsGeom.attributes.position.setXYZ(i, v3.x, v3.y, v3.z);
  }

  pointsGeom.attributes.position.needsUpdate = true;

}

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera)
});

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>

Answer 2

If you want to create a triangle geometry and modify its vertices later on, you can follow this approach using Three.js (r108):

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geom = new THREE.PlaneBufferGeometry(10, 10, 4, 4);
var mat = new THREE.MeshBasicMaterial({
  color: "aqua",
  wireframe: true
});
var mesh = new THREE.Mesh(geom, mat);
scene.add(mesh);

var pointsGeom = new THREE.BufferGeometry().setFromPoints([
  new THREE.Vector3(),
  new THREE.Vector3(),
  new THREE.Vector3()
]);
var pointsMat = new THREE.PointsMaterial({
  size: 1,
  color: "red"
});
var points = new THREE.Points(pointsGeom, pointsMat);
scene.add(points);

setInterval(() => {
  let faces = geom.index.count / 3;
  let face = THREE.Math.randInt(0, faces - 1);

  setTriangle(face);

}, 1000);

var v3 = new THREE.Vector3(); // temp vector

function setTriangle(face) {

  for (let i = 0; i < 3; i++) {
    v3.fromBufferAttribute(geom.attributes.position, geom.index.getX(face * 3 + i));
    pointsGeom.attributes.position.setXYZ(i, v3.x, v3.y, v3.z);
  }

  pointsGeom.attributes.position.needsUpdate = true;

}

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera)
});

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>

Adding points to vertices on mesh geometry based on their distance

Answer №1

Similar questions

How can I use a dropdown with checkbox to toggle the visibility of a specific div in React?

I am trying to set a background image specifically for one page in my application, but I am struggling to make it work. As a newcomer, I am still learning how to

Accessing Parent and Child Values in AngularJS Selections

Calculating the duration of time using JQuery with provided start and end times

The number of subscribers grows every time $rootscope.$on is used

Navigating the jQuery Search Form: Redirecting to Pages within your Website

jquery logic for iterating through all elements in a select menu encountering issues

Image flipping effect malfunctioning in Safari and Internet Explorer

json data hidden from sight in jQuery

Simple steps for integrating JavaScript ads into your WordPress website

What is the best method to set variables to zero using this array in JavaScript?

The proportions of the slices in a pie chart remain consistent even as the data is updated (based on the current version at the time of

Is it appropriate to use a component inside an entry component?

What is the procedure for placing an item into a vacant area in react-dnd?

Guide to declaring variables using jQuery

Having trouble populating two linked html dropdowns with JSON data using jQuery?

Encountering an Uncaught TypeError while trying to read properties of undefined (specifically 'remove') during a Change event is causing an issue for me

There are no headers present in the response from apollo-client

Looking for assistance with ReactJs code related to implementing a filter button

Replace the value of a variable when another variable becomes false in Angular.js