three.js - Object Overflow Clipping Three JS -

three.js - Object Overflow Clipping Three JS -

using 3 js there anyway define clipping part object? have illustration parent contains kid objects, clip kid objects based on viewport.

something like...

// create container , children var container = new three.object3d(); for(var = 0; < 100; i++) { var geometry = new three.planegeometry(i, 0, 0); var material = new three.meshbasicmaterial({color: 0x00ff00}); var kid = new three.mesh(geometry, material); container.add(child); } // create bounding box viewport var geom = new three.geometry(); geom.vertices.push(new three.vector3(0, 0, 0)); geom.vertices.push(new three.vector3(10, 0, 0)); geom.vertices.push(new three.vector3(10, 1, 0)); geom.vertices.push(new three.vector3(0, 1, 0)); geom.computeboundingbox(); // magic property (this doesnt exist) container.clipregion = geom.boundingbox;

the final part doesn't exist there way accomplish 3 js? potentially want animate children within parent , show visible part defined bounding box.

update, added next image describe problem.

the resulting reddish area part want create visible, whilst masking lies outside of region. other content should visible.

i have been able clip object another.

see result here

fiddle

in fiddle see cube beingness clip sphere. since demo, there things not final code.

you have in right hand of screen photographic camera view, see scene high, static point view.

also, part of cube should clipped, instead of showed green. in fragment shader, have uncomment discard statement accomplish real clipping.

if (shadowcolor.r < 0.9) { gl_fragcolor = vec4 (0.3, 0.9, 0.0, 1.0); } else { gl_fragcolor = vec4 (0.8, 0.8, 0.8, 1.0); // discard; }

it works creating spot lite can cast shadows

clippinglight = new three.spotlight ( 0xafafaf, 0.97 ); clippinglight.position.set (100, 200, 1400); clippinglight.castshadow = true; scene.add (clippinglight);

the object has clipping casts shadows, , object clipped receives shadows.

then, in animate , set lite photographic camera location

function animate() { cameracontrols.update(); clippinglight.position.x = camera.position.x; clippinglight.position.y = camera.position.y; clippinglight.position.z = camera.position.z; requestanimationframe(animate); }

now, parts have visible in clipped object ones @ shadow. need shader handles that. frag shader code take standard 1 in three.js library, modified.

i new working three.js, there lot of thing in code can done better. take thought :-)

three.js webgl