😽

【Three.js】Raycasterが上手く動かない時【Padding, Not Full Screen】

2023/07/31に公開

Three.js

状況

Three.jsのサンプルを動かしていた
- 自分のサイトでフル画面ではなく一部に表示してみようと思った
- なぜかraycastingが上手く動かない
  - 全画面にしてもpaddingやmarginを指定すると上手く動かない
    - →Canvasの絶対座標がずれてそう

結論

canvasの位置（絶対座標）を取得して、マウスポインタの位置に補正をかける

            var canvasBounds = renderer.domElement.getBoundingClientRect();
            pointer.x = ( (event.clientX-canvasBounds.left) / (W)) * 2 - 1;
            pointer.y = - ( (event.clientY-canvasBounds.top)/ (H) ) * 2 + 1;

getBoundingClientRectで絶対座標などが取得できる
- その値を使って動的に補正する
  ※(event.clientX-canvasBounds.left)などの足し算引き算などはかっこ（）で囲まないと計算がおかしくなるので注意←補正プログラムはOKのはずなのにそこでちょっとつまずいた

【Three.js】Raycasterが上手く動かない時【Padding, Not Full Screen】

状況

結論

参考

Discussion