three.js マウスクリックで面の色を変える

デモ

クリックした面の色が変わります.

解説

まず,Meshを作成する.今回は外部ファイルのジオメトリより作成したが,THREE.BoxGeometryなどでも良い.マテリアル作成時にvertexColorsプロパティにTHREE.FaceColorsを指定している点に注意.

var loader = new THREE.JSONLoader();
var mesh;
loader.load('./rough_plane.json', function (geo) {
    var material = new THREE.MeshLambertMaterial({ color: 0xffffff, vertexColors: THREE.FaceColors });
    mesh = new THREE.Mesh(geo, material);
    scene.add(mesh);
    renderer.render(scene, camera);
});

クリック時の処理について.Three.jsにおいて,Geometryの面すべてに面番号(Face index)が割り振られており,getIntersectedIndex関数ではクリックした面番号を返す.もし面番号が検出できれば,色を変更する処理に進む.ここで,geometryのcolorsNeedUpdateをtrueにしないと描画されないことに気をつける.

window.addEventListener('click', function (e) {
    //クリックした面番号の取得
    var square = getIntersectedIndex(e);
    if (square !== undefined && mesh) {
        mesh.geometry.colorsNeedUpdate = true;
        mesh.geometry.faces[square].color.set(0x00ff00);
    }
    renderer.render(scene, camera);
}, false);

最後に,getIntersectedIndex関数について.faceIndexプロパティより面番号が取得できる.

var raycaster = new THREE.Raycaster();
function getIntersectedIndex(e) {
    var raymouse = new THREE.Vector2();

    raymouse.x = (e.offsetX / width) * 2 - 1;
    raymouse.y = -(e.offsetY / height) * 2 + 1;
    raycaster.setFromCamera(raymouse, camera);
    var intersects = raycaster.intersectObjects(scene.children);

    if (intersects.length > 0) {
        var square = intersects[0].faceIndex;
    }

    return square;
}

着色を四角形にする

Three.jsでは基本的に面は三角形で構成されるので,色の変更も三角形単位になってしまう.四角形に着色したい場合には,対の三角形と面番号が連番になっていることを利用して,以下のようにコードを追加する.

window.addEventListener('click', function (e) {
    //面番号の取得
    var square = getIntersectedIndex(e);
    if (square !== undefined && mesh) {
        mesh.geometry.colorsNeedUpdate = true;
        mesh.geometry.faces[square].color.set(0x00ff00);
        if(square % 2 === 0){
            mesh.geometry.faces[square+1].color.set(0x00ff00);
        }else{
            mesh.geometry.faces[square-1].color.set(0x00ff00);
        }
    }
    renderer.render(scene, camera);
}, false);

変更後のデモは以下になります.

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL