1

Can we crop part of a 3D obj. Object's hidden part should stay hidden moving camera and rotating with mouse. And other objects should stay completely visible always.

The code below crops everything going in x-axis, but I want to show one obj half and other full.

var localPlane = new THREE.Plane( new THREE.Vector3( -1, 0, 0 ), 1 );
renderer.clippingPlanes = [ localPlane ];
renderer.localClippingEnabled = true;

Example: https://jsfiddle.net/muaoqhmq/2/

Want to keep the upper body always while rotating

XIMRX
  • 2,130
  • 3
  • 29
  • 60
  • 1
    See http://threejs.org/examples/webgl_clipping.html – WestLangley Sep 18 '17 at 16:20
  • It clips everything in a plane – XIMRX Sep 18 '17 at 16:57
  • Seems like you might be looking for something like this https://stackoverflow.com/questions/8322759/three-js-bind-two-shapes-together-as-one/8328984#8328984 – Radio Sep 18 '17 at 17:36
  • I want to load obj file and crop it to show half, when rotated hidden part should remain hidden – XIMRX Sep 18 '17 at 18:29
  • Clipping in three.js is done in world space. A work-around is to rotate the camera instead of the object. Or create a custom material. – WestLangley Sep 18 '17 at 20:23
  • If we choose to rotate camera, then can we show another object at clipped world space? I am afraid that is also not possible – XIMRX Sep 19 '17 at 07:41

1 Answers1

1

Unfortunately till today this is almost impossible to cut or crop a 3D .obj object in Three.JS however 3D objecs can be cropped in any defined shap easily in other WebGl libraries like BabylonJS. 

 mCSG = BABYLON.CSG.FromMesh(mymesh);//convert mesh to CSG
 var box1 = BABYLON.Mesh.CreateBox("box1", 3, scene);//define cropping mesh
 box1CSG = BABYLON.CSG.FromMesh(box1);//convert cropping mesh to CSG
 var subCSG = mCSG.subtract(box1CSG);//cropped CSG
 newmesh = subCSG.toMesh("csg", mat0, scene);//convert cropped CSG to mesh
XIMRX
  • 2,130
  • 3
  • 29
  • 60
  • If you're looking for CSG in three.js, check [the accepted answer here](https://stackoverflow.com/questions/8322759/three-js-bind-two-shapes-together-as-one/8328984#8328984) – Jim Dec 21 '21 at 17:29
  • Just a quick note that is only works in Babylon for super simple meshes. Note sure if that's the same for three.js but I think they are based off the same library. Anything more complex than a couple boxes will exceed the maximum call stack size in the browser because it's recursive. – Jim Dec 21 '21 at 17:30