2016-04-13 4 views
0

Nach den Vorschlägen auf Github (https://github.com/mrdoob/three.js/issues/1321) und hier auf Stakoverflow (Dynamically create 2D text in three.js), entschied ich mich, Text in HTML divs zu überlagern.Text-Overlays in Three.js stören Ziehen

Das Problem, das ich habe, ist, wenn der Benutzer die Szene rotiert und der Cursor über eine der divs geht, ziehen endet. Die Ziehaktion wird nicht fortgesetzt, wenn der Cursor auf der anderen Seite des Text-DIV fortgesetzt wird. Dies führt dazu, dass die Ziehaktion auf mysteriöse Weise stoppt und nur durch Loslassen der Maustaste und erneutes Anwenden fortgesetzt werden kann.

Das Beispiel ich spreche ist auf dieser Seite: http://www.intmath.com/vectors/3d-space-interactive-applet.php

Ich verwende Lager Standard OrbitControls.js mit controls = new THREE.OrbitControls(camera, renderer.domElement);

Ich habe versucht:

(1) Erkennen mouseout aus dem div und Einstellung controls.enabled true hat nicht funktioniert. Auch das Umschalten controls.enabled = false deaktiviert sicherlich die Kontrollen, aber ich konnte sie nicht wieder auf mouseout feuern lassen.

(2) Simulieren ein mouseup (während über die div) dann mousedown auf mouseout aus der div - gab auch kein Glück.

(3) Versuchen, das div auf mouseover zu verstecken, aber natürlich ist es dann zu spät - der Drag-Motion hat bereits aufgehört.

(4) Deaktivieren Hervorhebung des Textes in der divs - keine Änderung

So ist es möglich, das Ziehen Bewegung zu reaktivieren, nachdem einen Div ziehen vorbei, und wenn ja, wie?

Grüße

+0

Es ist schwer zu sagen, da Sie keine Informationen über Ihre Einrichtung haben. OrbitControls.js verwendet zum Beispiel Maus-Listener auf Dokumentebene (siehe Zeile 703 in three.js/examples/js/controls). Wenn Sie also ein Mouseout-Ereignis auslösen, müssen Sie das Dokument mausen, z. B. wenn Ihre 3D-Leinwand in einem Iframe sitzt. Außerdem sind die Steuerelementklassen im Ordner examples nicht Teil des Builds Three.js und können problemlos geändert werden. Entfernen Sie die mouseout-Deklaration in der Steuerklasse, die Sie verwenden. Es löst wahrscheinlich das selbe Ereignis wie sein mouseup Ereignis aus und kann sicher entfernt werden. – Radio

+1

@Radio: Ich habe meine Frage bearbeitet, um den Beispielcode klarer zu machen. Ihr Vorschlag, die Mouseout-Deklaration in der Nähe von Zeile 703 zu entfernen, hat den Zweck erfüllt. Vielen Dank! – MBourne

+0

Sah es @ http://www.intmath.com/vectors/3d-space-interactive-applet.php Sieht super aus! – Radio

Antwort

0

die CSS-Regel pointer-events: none auf den Etiketten.

+0

Das Ändern der 'pointer-events'-Regel hat das Verhalten, das ich beheben wollte, nicht geändert, aber es hat der Benutzeroberfläche geholfen. Danke vielmals. – MBourne