0

Using THREE.Shape, I can create holes, but rather than holes, I wish to define a clip mask.

I ONLY want to render the shape within a mask, similar to html's canvas/context .clip()

Is there a way to do this using holes or other method?

EDIT:

So, more background, I was using canvas to render segments, and imported them into three as planes.

The mouth was 1 canvas, and I was able to clip mask the teeth and tongue onto the black part.

See the whole movie at http://zsenji.com (rendered using the old canvas method)

Anyway, now I'm updating everything to use threejs and no more canvases rendered as planes.

I'm going to try three csg , which can hopefully intersect two geometries. https://stemkoski.github.io/Three.js/CSG.html

Then all I would have to do would be extrude the black of the mouth, and intersect it with the teeth/tongue. I will update

clip mask

dansch
  • 6,059
  • 4
  • 43
  • 59
  • see http://stackoverflow.com/questions/23183507/outline-object-normal-scale-stencil-mask-three-js - use a mask pass given by your shape and render.. – Derte Trdelnik Apr 20 '16 at 11:15
  • thanks for your comment, i updated my post. The problem is I don't want pure red color, I need it to be filled with more three js meshes. – dansch Apr 21 '16 at 20:44

1 Answers1

0

enter image description here

It worked.

I used very simple intersect, similar to https://github.com/chandlerprall/ThreeCSG/blob/master/examples.html

It's a little slow and there are still some other problems relating to overlapping paths, but for this issue, this was the fix.

All the different fills you see are three shapes enter image description here

dansch
  • 6,059
  • 4
  • 43
  • 59