How can I move each vertex and not separate each face?

Questions
1

I am new in Three.js, and wondering how I can move each vertex and not separate each face? So it may use same vertex in different faces.

Is it because that each face utilizes the same vertex to compose a face in a point? Threrefore, there a duplicated vertices in the obj mesh which I imported.


const mouse = {
    x: undefined,
    y: undefined
  }

const raycaster = new THREE.Raycaster()
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75,
     window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.z = 200;

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true;

var keyLight = new THREE.DirectionalLight(new THREE.Color('hsl(30, 100%, 75%)'), 1.0);
keyLight.position.set(-100, 0, 100);

var fillLight = new THREE.DirectionalLight(new THREE.Color('hsl(240, 100%, 75%)'), 0.75);
fillLight.position.set(100, 0, 100);

var backLight = new THREE.DirectionalLight(0xffffff, 1.0);
backLight.position.set(100, 0, -100).normalize();

scene.add(keyLight);
scene.add(fillLight);
scene.add(backLight);

selected_pt_list =[]
let mesh
function load_mesh(){
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setTexturePath('/examples/local-deformation/assets/');
mtlLoader.setPath('/examples/local-deformation/assets/');
mtlLoader.load('head.mtl', function (materials) {

    materials.preload();
    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials(materials);
    objLoader.setPath('/examples/local-deformation/assets/');
    objLoader.load('head.obj', function (object) {
    object.traverse(function (node) {
        if (node.type === 'Mesh'){ mesh = node};
    
    });
    this.mesh = mesh
    console.log(mesh)
    const color = []
    for (let i = 0; i < mesh.geometry.attributes.position.count; i++) {
      color.push(0,0.19,0.4)
    }
    mesh.geometry.setAttribute('color', 
    new THREE.BufferAttribute(new Float32Array(color), 3 ))
    const {array} = mesh.geometry.attributes.position
    const random_values = []


    for (let i = 0; i< array.length; i ++){
      if (i%3 ===0){
      const x = array[i]
      const y = array[i+1]
      const z = array[i+2]

      array[i] = x + Math.random()-0.5
      array[i+1] = y + Math.random()-0.5
      array[i + 2] = z + Math.random()
     }
      random_values.push(Math.random())
    }
    mesh.geometry.attributes.position.originalPosition =array
    mesh.geometry.attributes.position.random_values =random_values
    scene.add(mesh);
    });
});
}

let frame = 0
var animate = function () {
	requestAnimationFrame( animate );
	renderer.render(scene, camera);
  raycaster.setFromCamera(mouse, camera)
  frame += 0.01
  if(mesh){
  const { array, originalPosition, random_values } = mesh.geometry.attributes.position
  for (let i = 0; i < array.length; i += 3 ) {
    array[i] = originalPosition[i]+ Math.cos(frame+random_values[i])*0.2
    array[i+1] = originalPosition[i+1]+ Math.sin(frame+random_values[i+1])*0.2
  } 
  mesh.geometry.attributes.position.needsUpdate = true
};
}
2

Reusing vertices only works if the geometry is indexed. If not, three consecutive vertices in the position buffer attribute define a single triangle.

When having an index, a triangle is defined by three consecutive indices. Indices can reuse vertices and thus other vertex data like normals, uvs or colors.

1 Like
3

Thank your answer, But How can I index the each vertex in a easy way? Is it correct to store each vertex by indexing them to attributes?

Another is that I follow the tutorial of this YouTube video around 2:10:00, But why the faces of his mesh were not separated?

4

Sorry, I’m not sure I understand what you mean. Do you mind rephrasing your question?

It seems he uses an instance of PlaneGeometry which has an index by default. Modifying the vertex positions is going to affect more than one triangle.

5

This is to say, I mean how can I achieve making each vertex index so I can reuse vertices in my project?
Or, any other way that can make my mesh not be separated?

6

Try it with BufferGeometryUtils.mergeVertices(). It will produce an index and merge vertices with equal data.

1 Like