Three.jsでオブジェクトをマウスクリックで消す

Three.js（r74）で以下の2つを試してみるためのサンプルを作成したので整理しておく。

・マウスクリックでのオブジェクトのピッキング
・オブジェクトを画面から消す

ピッキングの方法はこちら。オブジェクトの表示・非表示はオブジェクトのvisibleプロパティをtrue/falseにすることで変更できる。

サンプルでは立方体を2つ作成して、一方は初期状態では非表示にし、もう一方がマウスクリックされたときに表示されるようにする。
 

// シーンの作成
var scene = new THREE.Scene();
// カメラの作成
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
// レンダラーの作成
var renderer = new THREE.WebGLRenderer();
// レンダラーが描画するキャンバスサイズの設定
renderer.setSize( window.innerWidth, window.innerHeight );
// キャンバスをDOMツリーに追加
document.body.appendChild( renderer.domElement );

// ジオメトリーの作成
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
// マテリアルの作成
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// オブジェクトの作成
var cube = new THREE.Mesh( geometry, material );
// オブジェクトの位置調整
cube.position.x = 2.0;
// オブジェクトに名前を設定
cube.name = 'cube1';
// オブジェクトをシーンに追加
scene.add( cube );

// オブジェクトを複製
var cube2 = cube.clone();
// オブジェクトに名前を設定
cube2.name = 'cube2';
// オブジェクトの位置調整
cube2.position.set(0,0,-2);
// オブジェクトを非表示にする
cube2.visible = false;
// オブジェクトをシーンに追加
scene.add( cube2 );


// カメラ位置設定
camera.position.z = 5;
camera.position.x = 0.5;
camera.position.y = 0.5;

// マウスクリックイベントのリスナー登録
document.addEventListener( 'mousedown', clickPosition, false );

function render(){
 // requestAnimationFrameで自分自身を呼び出し続けることでレンダリングを繰り返す
 requestAnimationFrame( render );

 // レンダリング（表示）
 renderer.render(scene,camera);
}
render();

function clickPosition( event ) {
// 画面上のマウスクリック位置
var x = event.clientX;
var y = event.clientY;

// マウスクリック位置を正規化
var mouse = new THREE.Vector2();
mouse.x =  ( x / window.innerWidth ) * 2 - 1;
mouse.y = -( y / window.innerHeight ) * 2 + 1;

// Raycasterインスタンス作成
var raycaster = new THREE.Raycaster();
// 取得したX、Y座標でrayの位置を更新
raycaster.setFromCamera( mouse, camera );
// オブジェクトの取得
var intersects = raycaster.intersectObjects( scene.children );

// cube1がクリックされたらcube1を消してcube2を表示
if( intersects[0].object.name === 'cube1' ) {
 cube.visible = false;
 cube2.visible = true;
}
// cube2がクリックされたらcube2を消してcube1を表示
if( intersects[0].object.name === 'cube2' ) {
 cube.visible = true;
 cube2.visible = false;
}
}

 

以下のような立方体が表示され、マウスでクリックすると、クリックした立方体が消え、別の立方体が表示される。

 

• サンプルの表示