作業ノート

俺の仕事のメモ

ClippingPlaneを実現する

投稿日: 投稿者: kero

Three.jsで物体を切断する効果を得るための機能としてClipping Planeと呼ばれる仕組みがある。面（Plane）を設定して、不要な部分を刈り取る（clip）するための機能である。

Three.jsのClipping Planeには2種類あり、それらは以下の通りである。

  • 空間全体をクリップするClipping Plane
  • メッシュを個別にクリップするClipping Plane

前者はScene全体をクリップする場合に使用し、後者は個々のメッシュそれぞれ個別にクリップを適用する場合に使用する。

Clipping Planeは以下のように定義する。

const plane = new THREE.Plane( new THREE.Vector3(-1, 0, 0).normalize(), 0 );

第1引数は面の法線ベクトルを指定する。法線ベクトルであるのでVector3オブジェクトを生成したあとnormalize()して使用する。

第2引数は原点からの距離である。

renderer.clippingPlanes.push( plane );

空間全体をクリップする場合は事前に生成しておいたrendererのclippingPlanes属性（配列）に生成した面を追加すれば良い。

const material = new THREE.MeshLambertMaterial({
  color: 0xff8800,
  clippingPlanes: [ plane ]
});

メッシュを個別にクリップする場合は、メッシュ生成時に割り当てるmaterialのclippingPlanes属性（配列）に生成した面を設定する。ただしこのとき、これとは別にrendererに対して以下の設定が必要になる。materialのclippingPlanes属性はデフォルトでundefinedであるため、いきなりpush出来ない点について注意する。

renderer.localClippingEnabled = true;

参考ページ