2016-04-13 39 views
0

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を超えている)をシミュレートし、mousedownmouseoutからdiv - も運を与えなかった。

(3)mouseoverでdivを隠そうとしていますが、ドラッグ操作が既に停止しています。

div要素内のテキストの(4)無効強調 - 変更なし

だから、divの上にドラッグした後、ドラッグの動きを再活性化することが可能であり、そうであれば、どのように?

よろしく

+0

あなたの設定に関する情報がないので、言い表せません。たとえばOrbitControls.jsは、ドキュメントレベルのマウスリスナを使用します(three.js/examples/js/controlsの703行を参照)。だから、あなたの3Dキャンバスがiframeの中に座っていた場合など、マウスアウトイベントを発生させるにはドキュメントからマウスを外す必要があります。同様に、examplesフォルダのコントロールクラスはThree.jsビルドの一部ではなく、安全に変更できます。使用しているコントロールクラスのmouseout宣言を削除します。それはおそらくmouseupイベントと同じイベントを起こしている可能性があり、安全に削除することができます。 – Radio

+1

@ラジオ:サンプルコードをより明確にするために質問を編集しました。 703行目の近くでmouseout宣言を削除することをお勧めします。ありがとうございました! – MBourne

+0

それを見ました@ http://www.intmath.com/vectors/3d-space-interactive-applet.phpすごくいいですね! – Radio

答えて

0

ラベルのCSSルールpointer-events: noneを設定します。

+0

'pointer-events'ルールを変更しても、私が修正しようとしていた振る舞いは変更されませんでしたが、UIに役立ちました。どうもありがとう。 – MBourne

関連する問題