Cutting an object.

Question

I am trying to split my 3D models using three.js in a way that Unity can:

I played with the camera controls, and of course I can adjust the near / far margins for the clip in the direction of the camera, but what if I just wanted to pin in the X or Y plane? I looked at the potential of adding a large transparent block that could slide along this axis, and then use binary operations to merge / subtract where it intersects the object, but the tools end up creating a new grid along a new plane, rather than actually deleting everything along this axis.

Do I need to work with multiple viewports, or is there an easier way?

Answer 1

.

, . .

var localPlane = new THREE.Plane( new THREE.Vector3( 0, - 1, 0 ), 1 );

var globalPlane = new THREE.Plane( new THREE.Vector3( 1, 0, 0 ), 1 );

renderer.clippingPlanes = [ globalPlane ];

renderer.localClippingEnabled = true;

var material = new THREE.MeshPhongMaterial( {
    clippingPlanes: [ localPlane ],
    clipShadows: true
} );

. .

https://threejs.org/examples/webgl_clipping.html https://threejs.org/examples/webgl_clipping_advanced.html

three.js r.85

Answer 2

. , , , . , , . :

worldPosition = modelMatrix * vec4( position, 1.0 );

, :

if ( worldPosition.x > clippingLimitX ) {
    discard;
}

, , . , . , . , . , , , :

new THREE.ShaderMaterial( { colorWrite: false, depthWrite: false, ... } );

, , . .

renderer.autoClear = false;
renderer.clear();

var gl = renderer.context;

renderer.state.setStencilTest( true );

renderer.state.setStencilFunc( gl.ALWAYS, 1, 0xff );
renderer.state.setStencilOp( gl.KEEP, gl.KEEP, gl.INCR );
renderer.render( backStencilScene, camera );

renderer.state.setStencilFunc( gl.ALWAYS, 1, 0xff );
renderer.state.setStencilOp( gl.KEEP, gl.KEEP, gl.DECR );
renderer.render( frontStencilScene, camera );

renderer.state.setStencilFunc( gl.EQUAL, 1, 0xff );
renderer.state.setStencilOp( gl.KEEP, gl.KEEP, gl.KEEP );
renderer.render( capsScene, camera );

renderer.state.setStencilTest( false );

renderer.render( scene, camera );

, , :

http://daign.imtqy.com/clipping-with-caps/

three.js, , , , , .