ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScriptとLeap Motionを使用した骨格追跡

JavaScriptとLeap Motionを使用した骨格追跡

Lisa Kudrow
リリース: 2025-02-20 09:29:09
オリジナル
962 人が閲覧しました

JavaScriptとLeap Motionを使用した骨格追跡

次世代テクノロジーでJavaScriptを使用することになると、Leap Motionは私のお気に入りのデバイスの1つです。跳躍の動きで、JavaScriptは考えたことではありません。これは、愛好家によって一緒にハッキングされたサードパーティのモジュールではありません。新しいAPIリリースごとにLeap Motionチームが注意と検討をもって開発しました。現在ベータ版で、V2.1の最新リリースはかなり刺激的です。この記事では、JavaScript開発者が利用できる新しい機能の概要を説明します。

キーテイクアウト

    現在ベータ版であるLeap Motion API V2.1は、JavaScript開発者に、追加の手データや指のデータを含む骨格追跡の新しい機能を提供します。
  • APIには、「Hand.Confidence」が含まれており、そのデータのLeapモーションデバイスがどの程度確実であるかを示す値を提供します。また、「hand.type」が含まれており、左または右手であるかどうか、「hand.pinchstrength」で、親指と指がどれだけ近いか、手が開いているか閉じているかを表す「hand.grabstrength」を測定します。
  • Leap Motion APIは、各指の種類や拡張されているかどうかを含む詳細な指データを提供します。また、手首から各指の先端に注文された各指の4本の指の骨に関するデータも提供します。 V2 Leap Motion APIはOculus VRなどのVRヘッドセットもサポートし、LEAPモーションから実際の画像データへのアクセスを提供しますが、これらの機能はJavaScript APIでまだ使用できません。
  • 自信を持ってそれらの手を追跡してください
  • APIは、各ハンドごとに追加データを提供します。ハンドデータはFrame.Handsで使用可能です。以前のAPIと同じように、更新では、Leap Motion Devsの生活を容易にする新しいデータの素晴らしいコレクションが得られます。
  • 手の自信

新しいAPIでの私のお気に入りのインクルージョンの1つは、そのデータの跳躍動きがどのように確実にあるかを知ることができることです。 Hand.Confidenceは0から1の値を提供します。これにより、見ているものが理解していることのモデルとどの程度確実に一致するかを知ることができます。値が低いということは、全体的な手データがわからないことを意味する可能性があります。または、指/骨の位置が不確かであることを意味する可能性があります。これにより、アクションを実行する前に、飛躍的な動きがどれほど確実であるかを確認できます。これがよりスムーズな相互作用につながるのを見て、ユーザーが自分のジェスチャーを非常に明確にすることを願っています。

ハンドタイプ

Hand.Typeは、左手を見ているのか右手を見ていると思うかどうかを説明します。あなたの手が拳にあるなら、それはこの区別に少し苦労するでしょう。

ピンチ強度

Hand.PinchStrengthは、親指と指が互いにどれだけ近いかを表す0から1の値を与える素晴らしい新しいプロパティです。これは、ピンチとしてアプリを制御するためのいくつかの興味深い可能性を開くことができます。

グラブ強度

hand.grabstrengthは、ピンチ強度と同じように0から1の値を返しますが、手が平らに開いているか、拳に閉じているかを表します。ここでの可能性も同様にエキサイティングです。ユーザーに仮想ストレスボールを絞ったり、仮想ルームに何かをつかんで投げてもらいます。

新しい指のデータ

新しい骨格APIの変更では、すべての手が常に5本の指を持っているので、飛躍的な動きが見ることができる指のまったく新しいデータセットを取得できます。

指のタイプ

finger.typeを使用してデータの各ビットがどのような指を表すかを読むことができます。このオブジェクトは、ゼロから4までの値になります:

0は親指

です
    1は人差し指
  • です
  • 2は中指です
  • 3は薬指
  • です
  • 4は小指
  • です
  • Leap Motionが手のデータで読み取るたびに、5本すべての指で読み取ります。
  • 指が延長された

いくつかの指が跳躍運動の上に指摘されていない場合、デバイスはfinger.exted = falseを使用して拡張されていないと記録します。

私は手の骨構造に精通していないので、ここで何か新しいことを学ぶ機会がありました。私の医者は私の知識の拡大を誇りに思うでしょう。メタカルパスがいつかカジュアルな会話をすることを期待しています。

跳躍運動は、手首から各指の先端に手首から注文された各指の4本の指の骨に関するデータを提供します:中手骨、近位の眼、中間眼、および遠位透子。それは社会のほとんどには意味がないので、ウィキペディアコモンズで見つけた素敵な図を次に示します:

フィンガーボーンの詳細

それは各骨でより詳細になります(これらを手首から指の先端に配置しました):

JavaScriptとLeap Motionを使用した骨格追跡

finger.carpposition - メタカルパル骨のベースのx、y、zの位置。

finger.mcpposition - 指のナックルの位置 - メタカルパルと近位のファランクス骨の間の場所。

finger.pippsosition - 近位と中間の透視の間の場所の位置。

finger.dipposition - 中間骨骨に接続する遠位骨の基部の位置。
  • また、finger.metacarpal、finger.procimal、finger.intermediate、finger.distalの詳細を備えた各指の骨のオブジェクトもあります。これらのそれぞれは、Leap Motion APIで次の詳細を含む骨として表されています。
    • bone.type - 骨のタイプを表す0〜4の値:

    • 0 - メタカルパル

    • 1 - 近位透明
    • 2 - 中間性のファランクス
    • 3 - 遠位ファランクス
    • 4 - 前腕

    • bone.basis - 骨のベクトルを表す2次元配列を提供します。特定の指の位置を検出するために、これでかなりクレイジーな数学を行うことができます。これらの値を使用しようとする前に、いくつかの数学の練習に適合する必要がありますが、それは素晴らしいことです!

    • bone.prevjoint and Bone.nextjoint - 手首に最も近い骨の端と指の先端に最も近い骨の端の座標。
    • 骨長 - その骨の長さはミリメートルで。
    • 骨。幅 - Leap Motionは、ドキュメントでこれを「この骨を取り巻く肉質部分の平均幅」と表現しています。
    • 骨。左 - 骨が左手にあるかどうか(そうでない場合は右側にあり、骨がないようです。
    • 骨。センター - 骨の中間点
    • bone.direction - 骨がある方向ベクトル
    • 基本的に、それはすぐにかなりの量のデータです。
    • 多くの数字を持つデモのデータ

    このAPIを介してどの程度の座標データがストリーミングされているかを示すために、クイックデモをまとめました。次のデモは、finger.carposition、finger.mcpposition、finger.pippsosition、finger.dippositionの各finger.carpposition、fing.pipps.dippositionのコーディネートを示しています。それは利用可能なデータのほんのほんの一部です!

    デモはこのように少し似ています:

    ここで飛躍的な動きで動作して試してみることができます。

    JavaScriptとLeap Motionを使用した骨格追跡もっと来る!

    V2 Leap Motion APIには、これらの機能よりも多くのことがあり、Oculus VRなどのVRヘッドセットもサポートしており、Leap Motionからの実際の画像データへのアクセスも提供します。悲しいことに、これらの機能はJavaScript APIでまだ利用できませんが、APIがベータ版を残す直前に表示されることを願っています!

    その他のリソース

    これらのAPIの始めの詳細を探している場合、最適な場所はLeap Motion Developerサイトです。
    • javascript sdkドキュメント
    • leap motion javascriptデモのギャラリー、いくつかの良い洞察のためにソースコードをチェックしてください!

    JavaScriptとLeap Motionを使用した骨格追跡に関するよくある質問

    骨格追跡のためにLeap MotionがJavaScriptでどのように機能しますか?

    Leap Motionは、3D空間での人間の手の動きをキャプチャするハードウェアデバイスです。 LEAPJSライブラリを介してJavaScriptで動作します。これは、LEAPモーションデータにアクセスするためのシンプルで直感的なAPIを提供します。これにより、開発者は手の動きを追跡して応答できるインタラクティブなアプリケーションを作成できます。 LEAPJSライブラリは、手、指、ツールの位置、速度、方向を追跡する方法、およびスワイプ、円、タップなどのジェスチャーを検出する方法を提供します。 JavaScriptでLeap Motionを使用していますか?

    JavaScriptでLeap Motionを使用するには、USB 2.0ポートを備えたコンピューターが必要です。Windows7以降、Macを実行します。 OS X 10.7以降、またはLinux。また、Leapjsライブラリを含むLeap Motionソフトウェアも必要です。ソフトウェアは、Leap Motion Webサイトからダウンロードできます。さらに、Chrome、Firefox、SafariなどのWebGLをサポートするWebブラウザーが必要です。 JavaScriptで使用するためにLeap Motionを設定し、最初にLeap Motion WebサイトからLeap Motionソフトウェアをダウンロードしてインストールします。次に、USBケーブルでLeap Motion Controllerをコンピューターに接続します。 Leap Motionソフトウェアは、コントローラーを自動的に検出し、追跡を開始します。 JavaScriptでLeap Motionを使用するには、htmlファイルにLeapjsライブラリをスクリプトタグを含めて含めます。ゲームや仮想現実体験から教育ツールや科学的視覚化まで、幅広いアプリケーションを開発するために使用されます。 3Dスペースで手の動きを追跡する機能は、ユーザーの相互作用の新しい可能性を開き、ユーザーがより自然で直感的な方法でアプリケーションを制御できるようにします。 🎜>

    leapモーションは、最大0.01mmの精度で、非常に正確な骨格追跡を提供します。各指と手のひらの位置と方向を追跡し、スワイプ、円、タップなどのジェスチャーを検出できます。 LEAPJSライブラリは、このデータにアクセスするためのシンプルで直感的なAPIを提供し、JavaScriptアプリケーションに簡単に組み込むことができます。

    JavaScript以外の他のプログラミング言語でLeap Motionを使用できますか?

    ​​

    はい、Leap Motionは、C、C#、Java、Python、JavaScriptなどのいくつかのプログラミング言語のSDKを提供します。これにより、開発者にとって汎用性の高いツールになり、ニーズとスキルに最適な言語を選択できるようになります。 JavaScriptは、インタラクティブなアプリケーションを開発するための強力なツールを提供しますが、注意すべきいくつかの制限があります。 Leap Motion Controllerは、手に明確な視線を必要とし、明るい光や反射面の影響を受ける可能性があります。さらに、LEAPJSライブラリはシンプルで直感的なAPIを提供しますが、他の言語のSDKと同じレベルの制御と柔軟性を提供することはできません。 🎜>

    Leap MotionとJavaScriptに問題がある場合は、いくつかの手順があります。まず、Leap Motion Controllerが接続され、Leap Motionソフトウェアが実行されていることを確認してください。コントローラーが検出されていない場合は、それを外してプラグインして元に戻してみてください。LEAPJSライブラリに問題がある場合は、互換性のあるWebブラウザーを使用していることを確認し、JavaScriptコンソールのエラーを確認してください。 🎜>モバイルデバイスでJavaScriptを使用してLeap Motionを使用できますか?

    現在、Leap Motionはモバイルデバイスをサポートしません。 LEAPモーションコントローラーには、通常、モバイルデバイスでは使用できないUSB接続が必要です。ただし、Leap Motionは継続的にテクノロジーの開発と改善を行っているため、これは将来変化する可能性があります。 JavaScriptでLeap Motionを使用する方法を学ぶためにオンラインで利用可能なリソース。 Leap Motion Webサイトは、開発者ガイド、APIドキュメント、コミュニティフォーラムなど、豊富な情報を提供しています。さらに、GitHubやStack Overflowなどのサイトで利用できる多数のチュートリアルと例があります。

以上がJavaScriptとLeap Motionを使用した骨格追跡の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート