blob: 87c326186cce0f3474ffb21f0e55259fff797133 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
---
title: XRInputSource.gripSpace
slug: Web/API/XRInputSource/gripSpace
tags:
- API
- AR
- Augmented Reality
- Experimental
- Property
- Reference
- VR
- Virtual Reality
- WebXR
- WebXR Device API
- XRInputSession
- gripSpace
translation_of: Web/API/XRInputSource/gripSpace
---
<div>{{securecontext_header}}{{APIRef("WebXR")}}</div>
<p class="summary"><span class="seoSummary">{{domxref("XRInputSource")}} の <strong><code>gripSpace</code></strong> 読み取り専用プロパティは、ネイティブの原点がユーザーの手に保持している（またはユーザーの手の一部の）ように見える仮想オブジェクトのレンダリングに使用するポーズを追跡する {{domxref("XRSpace")}} を返します。</span> 例えば、ユーザーが仮想の真っ直ぐな棒を持っている場合、この <code>XRSpace</code> のネイティブの原点は、ユーザーの拳のおおよその重心にあります。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox notranslate">var <var>xrSpace</var> = <em>xrInputSource</em>.gripSpace;</pre>
<h3 id="Value" name="Value">値</h3>
<p>仮想空間での入力デバイスの位置と向きを表す {{domxref("XRSpace")}} オブジェクト。 デバイスの画像をシーンにレンダリングするのに適しています。 入力ソースが本質的に追跡できない場合、<code>gripSpace</code> は <code>null</code> です。 例えば、{{domxref("XRInputSource.targetRayMode", "targetRayMode")}} が <code>tracked-pointer</code> である入力のみが <code>gripSpace</code> を提供します。</p>
<p>コントローラーがまっすぐな棒のような形をしていて、ユーザーの拳で握られていると想像してみてください。 グリップ空間の本来の原点は、ユーザーの拳の重心にあり、ユーザーの手の位置を追跡します。</p>
<div style="width: 42em;">
<div style="width: 20em; float: left;">
<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>
<div style="background-color: #FFF;"><img alt="グリップ空間が、世界に対するプレーヤーの手のローカル座標系をどのように示しているかを示す図。" src="https://mdn.mozillademos.org/files/17260/GripSpace-LeftHand-Light.svg" style="width: 100%;"></div>
</figure>
</div>
<div style="width: 20em; float: right;">
<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>
<div style="background-color: #FFF;"><img alt="グリップ空間が、世界に対するプレーヤーの手のローカル座標系をどのように示しているかを示す図。" src="https://mdn.mozillademos.org/files/17261/GripSpace-RightHand-Light.svg" style="width: 100%;"></div>
</figure>
</div>
</div>
<p class="cleared">上の図に示すように、座標系は次のように方向付けられています。</p>
<ul>
<li>x 軸は、ユーザーの手のひらに垂直であり、手の甲から外側に伸びる方向は、コントローラーがユーザーの右手にある場合は +X 、コントローラーが左手にある場合は -X です。</li>
<li>z 軸は、棒の長さに沿い、ユーザーの手のひらに平行で、グリップの長さに沿います。 -Z はユーザーの親指の方向であり、+Z は反対方向です。</li>
<li>y 軸は、他の2つの軸間の関係によって示されます。 いつものように、それは他の2つの軸の外積です（X 軸と Z 軸の両方から90°離れています）。</li>
</ul>
<h2 id="Examples" name="Examples">例</h2>
<p>この例では、フレームレンダリングコールバックから取得した <code>gripSpace</code> を使用して、仮想環境でのコントローラーの位置と向きを表すメッシュをレンダリングします。</p>
<pre class="brush: js notranslate">for (let source in xrSession.inputSources) {
if (source.gripSpace) {
let gripPose = frame.getPose(source.gripSpace, xrRefSpace);
if (gripPose) {
myDrawMeshUsingTransform(controllerMesh, gripPose.transform.matrix);
}
}
}
</pre>
<p>このループは、<code>gripSpace</code> の値を持つ各入力ソースについて、<code>gripSpace</code> によって記述される位置と向きを表す {{domxref("XRPose")}} を取得します。 有効なポーズが返された場合、メソッド <code>myDrawMeshUsingTransform()</code> を呼び出して、グリップポーズの変換行列を使用して変換されたコントローラーのメッシュを描画します。</p>
<h2 id="Specifications" name="Specifications">仕様</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">仕様</th>
<th scope="col">状態</th>
<th scope="col">コメント</th>
</tr>
<tr>
<td>{{SpecName('WebXR','#dom-xrinputsource-gripspace','XRInputSource.gripSpace')}}</td>
<td>{{Spec2('WebXR')}}</td>
<td>初期定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("api.XRInputSource.gripSpace")}}</p>
|
