Github(https://github.com/mrdoob/three.js/issues/1321)とStakoverflow(Dynamically create 2D text in three.js)の提案に続いて、HTML div内にテキストをオーバーレイすることを選択しました。Three.jsのテキストオーバーレイがドラッグを中断する
私が抱えている問題は、ユーザーがシーンを回転しているときに、カーソルがdivのいずれかの上を通過してドラッグが停止することです。カーソルがテキストdivの反対側で継続すると、ドラッグ操作は再開しません。その結果、ドラッグ操作が不思議に停止し、マウスボタンを放して再適用するだけで再開できます。
私が話している例は、このページにある:http://www.intmath.com/vectors/3d-space-interactive-applet.php
私は私が試したcontrols = new THREE.OrbitControls(camera, renderer.domElement);
で株式標準OrbitControls.jsを使用しています:
を(1)mouseout
を検出divから設定してcontrols.enabled true
を設定しても機能しませんでした。また、controls.enabled = false
を切り替えると、コントロールが無効になりますが、mouseout
で再び起動することができませんでした。
(2)mouseup
(divを超えている)をシミュレートし、mousedown
のmouseout
からdiv - も運を与えなかった。
(3)mouseover
でdivを隠そうとしていますが、ドラッグ操作が既に停止しています。
div要素内のテキストの(4)無効強調 - 変更なし
だから、divの上にドラッグした後、ドラッグの動きを再活性化することが可能であり、そうであれば、どのように?
よろしく
あなたの設定に関する情報がないので、言い表せません。たとえばOrbitControls.jsは、ドキュメントレベルのマウスリスナを使用します(three.js/examples/js/controlsの703行を参照)。だから、あなたの3Dキャンバスがiframeの中に座っていた場合など、マウスアウトイベントを発生させるにはドキュメントからマウスを外す必要があります。同様に、examplesフォルダのコントロールクラスはThree.jsビルドの一部ではなく、安全に変更できます。使用しているコントロールクラスのmouseout宣言を削除します。それはおそらくmouseupイベントと同じイベントを起こしている可能性があり、安全に削除することができます。 – Radio
@ラジオ:サンプルコードをより明確にするために質問を編集しました。 703行目の近くでmouseout宣言を削除することをお勧めします。ありがとうございました! – MBourne
それを見ました@ http://www.intmath.com/vectors/3d-space-interactive-applet.phpすごくいいですね! – Radio