THREE.js では、マウスの位置に基づいて画面上でオブジェクトを移動しようとしています。いくつかの例を見た後、それはかなり簡単に見えました。これは、私が必要としているほとんどの場合に機能する例の1つから借りたコードです。
function mouseMove(e){
mouse2D.x = ( (e.pageX-canvas.offsetParent.offsetLeft) / canvas.clientWidth ) * 2 - 1;
mouse2D.y = - ( (e.pageY-canvas.offsetParent.offsetTop) / canvas.clientHeight ) * 2 + 1;
if (selected) {
var ray = projector.pickingRay(mouse2D, PGL._camera).ray;
var targetPos = ray.direction.clone().addSelf(ray.origin);
targetPos.subSelf(_offset);
obj.position.x = initPos.x + targetPos.x;
obj.position.y = initPos.y + targetPos.y;
}
}
これは、シーン内で直接の子を移動する場合にうまく機能します。問題は、回転および/またはスケーリングされた親を持つオブジェクトを移動しようとすることです。どのように対処しますか?オブジェクトmatrixRotationWorld
を動きに適用しますか?私はまだこのことについて頭を抱えようとしています。どんな助けでも感謝します。