three.jsで物体の一部分だけを描く（ローカルクリッピング）

3DCG描画ライブラリのthree.jsには、平面を境に物体の一部分だけを描くクリッピングという機能があります。これを使うと、MRIか何かで輪切りにしているような画像を作れます。

ソースコード

<canvas id="canvas" width="400" height="400"></canvas>

<script src="three.js"></script>
<script>

function createCube(){
	var geometry = new THREE.SphereGeometry(1);
	var clippingPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0.50);
	var material = new THREE.MeshBasicMaterial( {
		color: 0x00ff00, 
		clippingPlanes:[ clippingPlane ]
	} );
	return new THREE.Mesh( geometry, material );
}

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, canvas.width / canvas.height, 0.1, 1000 );
camera.position.z = 5;

var renderer = new THREE.WebGLRenderer({canvas:canvas});
renderer.localClippingEnabled = true;

var cube = createCube();
scene.add(cube);




(function animate(timeStamp) {
	requestAnimationFrame( animate );
	cube.position.y = Math.sin(timeStamp / 500);
	renderer.render( scene, camera );
})();

</script>

実行結果

解説

これはthree.jsの機能の一つ、ローカルクリッピングというもののデモプログラムです。緑の球体が、斧を落とした泉の女神のように出てきたり引っ込んだりします。緑の球体は、ある平面より下は描かれないのです。

重要なのは、金の斧の女神と違って、球体の周りに泉など存在していないという点です。消えた部分は単に描かれてないのです。別の物体に隠れて見えなくなっているわけではありません。つまり消えた部分の向こう側を描けるということで、SFの転送装置っぽい描写ができるわけです。