PANOLENS(Three.js)を使用している360度パノラマでの不具合

Question

同じ問題で何度も質問を投稿するのはマナー違反かと思い、こちらを編集させていただきました。

発生している問題・エラーメッセージ

PANOLENSを使用している360度画像のパノラマコンテンツを作成しました。
ドラッグアンドドロップで視点を操作している際、マウスをクリックし、カメラを移動させ続けたまま、コンテンツ外にマウスを持っていくと、コンテンツの中ではまだマウスを押している判定が残っているのか、マウスを押していなくても視点が動いてしまうという不具合が発生しております。
(クリックしていなくても視点がマウスに追従してしまう。)

その不具合に対処するために、マウスを押し続けている間にマウスカーソルをパノラマコンテンツから出せなくしたいと考えていたのですが、どうやらJavaScriptではできないようなので、特定の座標を超えたらパノラマコンテンツのマウスを押し続けている判定を切れないかと考えております。

前提・実現したいこと

Three.jsのドラッグアンドドロップ判定を領域外(決められた座標外)に行った際にオフにする仕様にすれば実装ができるのかなと思っていますがアプローチの方法がわからず苦戦しております。

質問の内容が大幅に変わってしまい、恐縮ですがお教えいただけると幸いです。

題の通りです。
A要素の中でドラッグアンドドロップできるコンテンツを作成したのですが、そのコンテンツをドラッグアンドドロップしている間だけ、マウスカーソウルをその要素から出せなくしたいと考えています。

Comments

[yambejp]

A要素とコンテンツを具体的に例示ください

[yakiuri]

画像のパノラマツールと言えばおわかりになりますでしょうか…？
panolensを使用し、球体に画像を張り付け、クリックし続けている間だけ視点(画像)を移動できるというものです。

Answer 1

出せなくはなりませんが、したいことはポインタキャプチャだと思います。MDN に例があるので試してみてください。
https://developer.mozilla.org/ja/docs/Web/API/Element/setPointerCapture

Comments

[yakiuri]

ありがとうございます。
自分のしたいことではありませんでしたが、勉強になりました！

Answer 2

PANOLENS.js内にmouseoutの処理が書かれていない事が原因の不具合(挙動？)でした。

PANOLENS.js内にmouseoutした際、mouseupの関数を実行する処理を追記したところ解決しました。