0

I have loaded .obj using OBJLoader2 and also with its .mtl , now when user click on one of Mesh, then i want to change mesh geometry such like that it divides into two equal parts and also have different material for them.

//this.currentobj represents the user clicked mesh.
let geometry = this.currentobj.geometry;
geometry.clearGroups();
geometry.addGroup( 0, Infinity, 0 );
geometry.addGroup( 0, Infinity, 1 );
geometry.addGroup( 0, Infinity, 2 );
geometry.addGroup( 0, Infinity, 3 );
let material0 = new THREE.MeshBasicMaterial({color: 0xff0000});
let material1 = new THREE.MeshBasicMaterial({color: 0x444444});
let material2 = new THREE.MeshBasicMaterial({color: 0x111111});
let material3 = new THREE.MeshBasicMaterial({color: 0x555555});
var materials = [ material0, material1, material2, material3 ];
let mesh = new THREE.Mesh(geometry, materials);
this.scene.add(mesh);
gman
  • 100,619
  • 31
  • 269
  • 393
Himanshu Bhoraniya
  • 15
  • 5
  • Dividing an arbitrary geometry into two equal parts is a non-trivial operation. It's recommended to work with special data structures which provide topological information about the geometry. `BufferGeometry` is not the right class for this task. A good understanding in computational geometry will definitely help. – Mugen87 Aug 20 '19 at 11:05
  • Are there any reference which helps in generating topological information about geometry. @Mugen87 – Himanshu Bhoraniya Aug 20 '19 at 12:13

1 Answers1

0

Dividing mesh is a solved problem in three.js. It was recently revised with a new implementation in Jun by @Manthrax and mrdoob requested it be pulled to main as the original csg solution had issues, as per this thread: https://discourse.threejs.org/t/looking-for-updated-plug-in-for-csg/6785/8

I do not know the current status of main, but Manthrax's library is available here: https://github.com/manthrax/THREE-CSGMesh with example code.

The operation returns the resulting mesh collection and the material objects can be modified individually. My own tangentially related question was answered here by Manthrax in April: Threecsg flat sides when expecting volumetric result It shows two different materials on the resulting cut of a sphere and a cube.

For example:

function doCSG(a,b,op,mat){
   var bspA = CSG.fromMesh( a );
   var bspB = CSG.fromMesh( b );
   var bspC = bspA[op]( bspB );
   var result = CSG.toMesh( bspC, a.matrix );
   result.material = mat;
   result.castShadow  = result.receiveShadow = true;
   return result;
}
var meshA = new THREE.Mesh(new THREE.BoxGeometry(1,1,1));
var meshB = new THREE.Mesh(new THREE.BoxGeometry(1,1,1));
meshB.position.add(new THREE.Vector3( 0.5, 0.5, 0.5);
var meshC = doCSG( meshA,meshB, 'subtract',meshA.material);
console.log(meshC.material);//mesh C result has it's own material derived from meshA but can be new Material.

In your case you'd want to use the bounding box helper to produce a mesh that you move half way into the object and then use that to cut your geometry in half.

Radio
  • 2,810
  • 1
  • 21
  • 43