diff options
Diffstat (limited to 'files/ja/web/api/xrinputsource/targetraymode/index.html')
| -rw-r--r-- | files/ja/web/api/xrinputsource/targetraymode/index.html | 78 |
1 files changed, 54 insertions, 24 deletions
diff --git a/files/ja/web/api/xrinputsource/targetraymode/index.html b/files/ja/web/api/xrinputsource/targetraymode/index.html index 7a64b7a122..79ca557c89 100644 --- a/files/ja/web/api/xrinputsource/targetraymode/index.html +++ b/files/ja/web/api/xrinputsource/targetraymode/index.html @@ -1,47 +1,78 @@ --- -title: XRInputSource.targetRayMode +title: XRTargetRayMode slug: Web/API/XRInputSource/targetRayMode tags: + - 3D - API - AR - - Pointing - - Property - - Ray - - Read-only + - Enum + - Enumerated Type + - Input + - Reality - Reference + - Type - VR + - Virtual - WebXR - WebXR API - WebXR Device API - XR - - XRInputSource - - direction - - pointer + - XRTargetRayMode + - augmented + - source - target - - targetRayMode -translation_of: Web/API/XRInputSource/targetRayMode +translation_of: Web/API/XRTargetRayMode +original_slug: Web/API/XRTargetRayMode --- -<p>{{APIRef("WebXR")}}{{securecontext_header}}</p> +<p>{{APIRef("WebXR")}}</p> -<p>{{domxref("XRInputSource")}} の <strong><code>targetRayMode</code></strong> 読み取り専用プロパティは、入力ソースのターゲット光線を生成する方法と、それをユーザーに提示する方法を示します。</p> +<p><span class="seoSummary"><a href="/ja/docs/Web/API/WebXR_Device_API">WebXR Device API</a> の <strong><code>XRTargetRayMode</code></strong> 列挙型は、入力コントローラーのターゲティング光線を生成する方法を記述します。</span> ターゲティングは、視線追跡システムを使用してターゲットを見るか、ハンドコントローラー、グローブ、またはモーショントラッキングシステムを使用してターゲットを指すか、画面上で指やマウスを使用してターゲットをタップまたはクリックすることによって行うことができます。</p> -<h2 id="Syntax" name="Syntax">構文</h2> +<p>通常、<strong>ターゲット光線</strong>は、ターゲティングシステムのソースから、ユーザーが見ている方向または指している方向にターゲット光線に沿って描画されます。 光線の終点を示す方法と同様に、光線のスタイルは一般的にあなた次第です。 ターゲットとなる点またはオブジェクトは、図形を描画するか、ターゲットとなる表面またはオブジェクトを強調表示することによって示される場合があります。</p> -<pre class="syntaxbox notranslate">let <em>rayMode</em> = <em>xrInputSource</em>.targetRayMode;</pre> +<div style="width: 42em;"> +<figure style="background: #eee; padding: 0.5em; border: 1px solid #aaa; border-radius: 1em; max-width: 504px; padding: 1em; margin: 1em auto;"> +<figcaption><strong>ハンドコントローラーから放出されるターゲット光線。</strong></figcaption> +<img alt="ハンドコントローラーから放出されるターゲット光線を示すスクリーンショット" src="https://mdn.mozillademos.org/files/17089/example-target-ray.gif" style="width: 100%;"></figure> +</div> -<h3 id="Value" name="Value">値</h3> +<p>ターゲット光線は、単純な線（理想的には距離とともにフェードする）から、上のスクリーンショットに示されているサイエンスフィクションの「フェイザー」スタイルなどのアニメーション効果まで、何でもかまいません。</p> -<p>{{domxref("XRTargetRayMode")}} 列挙型から取得した {{domxref("DOMString")}}。 ターゲット光線を生成してユーザーに提示するときに使用する方法を示します。 可能な値は次のとおりです。</p> +<h2 id="Values" name="Values">値</h2> -<p>{{page("/ja/docs/Web/API/XRTargetRayMode", "Values")}}</p> +<dl> + <dt><code>gaze</code>（視線）</dt> + <dd>ユーザーは、ユーザーが見ている方向を検出する視線追跡システム（または<strong>視線入力</strong>）を使用しています。 ターゲット光線は、ビューアーの目を起点として描画され、ビューアーが見ている方向に追従します。</dd> + <dt><code>screen</code>（画面）</dt> + <dd>ターゲット光線の方向は、タッチスクリーン、マウス、またはその他の触覚入力デバイスをタップして示します。</dd> + <dt><code>tracked-pointer</code>（追跡ポインター）</dt> + <dd>ターゲティングは、ユーザーがターゲットの方向に向けるハンドヘルドデバイスまたはハンドトラッキングシステムを使用して行われます。 ターゲット光線は、手（または手の中のオブジェクト）からターゲット方向に伸びます。 方向はプラットフォーム固有のルールを使用して決定されますが、そのようなルールが存在しない場合は、ユーザーが人差し指を手からまっすぐに向けていると仮定して方向が選択されます。</dd> +</dl> -<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> +<h2 id="Examples" name="Examples">例</h2> -<p>入力ソースの {{domxref("XRInputSource.targetRaySpace", "targetRaySpace")}} は、ターゲット光線の位置と向きを示し、光線をレンダリングする場所を決定するために使用できます。</p> +<p>このコードの断片は、フレームごとに1回呼び出される関数の一部を示しています。 <code>null</code> 以外の {{domxref("XRInputSource.targetRaySpace", "targetRaySpace")}} を持つ入力を探します。 このプロパティの値を持つ入力は、ターゲット光線をユーザーから外側に投影する入力を表します。</p> -<h2 id="Example" name="Example">例</h2> +<p>このような入力ごとに、この例では、{{domxref("XRInputSource.targetRayMode", "targetRayMode")}} が <code>tracked-pointer</code> である入力を探します。 これは、入力が実際には、視線入力デバイス、画面タップ、またはマウスクリックではなく、ターゲティングデバイスを表すことを目的としていることを示しています。 追跡ポインターの場合、関数 <code>myRenderTargetRayAsBeam()</code> が呼び出され、入力コントローラーの仮想位置から、それが指している方向に外側にビームをレンダリングします。</p> -<p>{{page("/ja/docs/Web/API/XRTargetRayMode", "Examples")}}</p> +<p>コードは、仮想空間でのユーザーの手の位置を表すコントローラーや任意のオブジェクトの描画、その他の入力関連のタスクなどを引き続き実行する必要があります。</p> + +<pre class="brush: js notranslate">function updateInputSources(session, frame, refSpace) { + for (let source of session.getInputSources()) { + let targetRayPose = frame.getPose(inputSource.targetRaySpace, refSpace); + + if (targetRayPose) { + if (source.targetRayMode == "tracked-pointer") { + myRenderTargetRayAsBeam(targetRayPose); + } + } + + /* ... */ + } +} +</pre> + +<p>詳細とより完全な例については、<a href="/ja/docs/Web/API/WebXR_Device_API/Inputs">入力と入力ソース</a>の記事を参照してください。</p> <h2 id="Specifications" name="Specifications">仕様</h2> @@ -53,7 +84,7 @@ translation_of: Web/API/XRInputSource/targetRayMode <th scope="col">コメント</th> </tr> <tr> - <td>{{SpecName('WebXR','#dom-xrinputsource-targetraymode','XRInputSource.handedness')}}</td> + <td>{{SpecName('WebXR','#enumdef-xrtargetraymode','XRTargetRayMode')}}</td> <td>{{Spec2('WebXR')}}</td> <td>初期定義</td> </tr> @@ -62,12 +93,11 @@ translation_of: Web/API/XRInputSource/targetRayMode <h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("api.XRInputSource.handedness")}}</p> +<p>{{Compat("api.XRTargetRayMode")}}</p> <h2 id="See_also" name="See_also">関連情報</h2> <ul> <li><a href="/ja/docs/Web/API/WebXR_Device_API">WebXR Device API</a></li> <li><a href="/ja/docs/Web/API/WebXR_Device_API/Inputs">入力と入力ソース</a></li> - <li><a href="/ja/docs/Web/WebXR%20Device%20API/Gamepads">WebXR アプリケーションでのゲームパッドの使用</a></li> </ul> |