私はCSS3D 変換を試しており、変換を処理するスライダーを作成しようとしています。Three.jsのエディターを思いついたのですが、各オブジェクトの位置、回転、スケールをどのように処理するかというアイデアが気に入りました。それは同時に入力とスライダーであるか、単に想定しています。
ソース コードを確認した後でも、これがどのように機能するのかわかりません。同じ機能を実現するコード スニペットを提供したいと思います。具体的には、入力値を取得し、値を左右にスライドするだけでオブジェクトが移動するか、手動で値を指定します。
注: トランスフォームの機能には興味がありません。そのような入力スライダーがどのように実行されるかだけです。
前もって感謝します。
はinputa にdivあり、ラベルのように見えるようにスタイル設定されています: 境界線も背景もありません。inputには、カーソルをスライダー カーソル ( ) に変更するスタイルがありますcursor:col-resize。
マウスが押されている間にマウスの位置を取得するために、おそらくs とan にonmousedown/onmouseupリスナーが存在します。1 つのグローバルハンドラを に配置するのが最も効果的であることがわかりました。小さな要素にイベントを配置すると、マウスが要素の上にないときにイベントを取得できません。three.js エディターでわかるように、マウスを下に置いてからページ上の任意の場所にマウスを移動できます。inputonmousemoveonmousemovebodyonmousemove
が入力要素にフォーカスをトリガーしないevent.preventDefault()ようにするために、おそらく使用する必要があります。onmousedown