three-stdlib 2.11.1 → 2.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.cjs.js +1 -1
- package/index.d.ts +1 -0
- package/index.js +1 -0
- package/objects/GroundProjectedEnv.cjs.js +1 -0
- package/objects/GroundProjectedEnv.d.ts +12 -0
- package/objects/GroundProjectedEnv.js +145 -0
- package/package.json +1 -1
- package/webxr/ARButton.cjs.js +1 -1
- package/webxr/ARButton.d.ts +4 -4
- package/webxr/ARButton.js +14 -11
- package/webxr/OculusHandModel.cjs.js +1 -1
- package/webxr/OculusHandModel.d.ts +1 -1
- package/webxr/OculusHandModel.js +2 -2
- package/webxr/VRButton.cjs.js +1 -1
- package/webxr/VRButton.d.ts +6 -4
- package/webxr/VRButton.js +14 -15
- package/webxr/XRHandMeshModel.d.ts +1 -1
- package/webxr/XRHandMeshModel.js +3 -3
package/index.d.ts
CHANGED
|
@@ -104,6 +104,7 @@ export * from './objects/ReflectorRTT';
|
|
|
104
104
|
export * from './objects/ReflectorForSSRPass';
|
|
105
105
|
export * from './objects/Sky';
|
|
106
106
|
export * from './objects/Water2';
|
|
107
|
+
export * from './objects/GroundProjectedEnv';
|
|
107
108
|
export * from './utils/SceneUtils';
|
|
108
109
|
export * from './utils/UVsDebug';
|
|
109
110
|
export * from './utils/GeometryUtils';
|
package/index.js
CHANGED
|
@@ -50,6 +50,7 @@ export { ReflectorRTT } from './objects/ReflectorRTT.js';
|
|
|
50
50
|
export { ReflectorForSSRPass } from './objects/ReflectorForSSRPass.js';
|
|
51
51
|
export { Sky } from './objects/Sky.js';
|
|
52
52
|
export { Water2 } from './objects/Water2.js';
|
|
53
|
+
export { GroundProjectedEnv } from './objects/GroundProjectedEnv.js';
|
|
53
54
|
export { SceneUtils } from './utils/SceneUtils.js';
|
|
54
55
|
export { UVsDebug } from './utils/UVsDebug.js';
|
|
55
56
|
export { GeometryUtils } from './utils/GeometryUtils.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three");class n extends e.Mesh{constructor(n,o){var t,r;const i=(a=n)&&a.isCubeTexture;var a;const c=(null!=(t=i?null===(r=n.image[0])||void 0===r?void 0:r.width:n.image.width)?t:1024)/4,s=Math.floor(Math.log2(c)),l=Math.pow(2,s),d=[i?"#define ENVMAP_TYPE_CUBE":"","#define CUBEUV_TEXEL_WIDTH "+1/(3*Math.max(l,112)),"#define CUBEUV_TEXEL_HEIGHT "+1/(4*l),`#define CUBEUV_MAX_MIP ${s}.0`].join("\n")+"\n #define ENVMAP_TYPE_CUBE_UV\n varying vec3 vWorldPosition;\n uniform float radius;\n uniform float height;\n uniform float angle;\n #ifdef ENVMAP_TYPE_CUBE\n uniform samplerCube map;\n #else\n uniform sampler2D map;\n #endif\n // From: https://www.shadertoy.com/view/4tsBD7\n float diskIntersectWithBackFaceCulling( vec3 ro, vec3 rd, vec3 c, vec3 n, float r ) \n {\n float d = dot ( rd, n );\n \n if( d > 0.0 ) { return 1e6; }\n \n vec3 o = ro - c;\n float t = - dot( n, o ) / d;\n vec3 q = o + rd * t;\n \n return ( dot( q, q ) < r * r ) ? t : 1e6;\n }\n // From: https://www.iquilezles.org/www/articles/intersectors/intersectors.htm\n float sphereIntersect( vec3 ro, vec3 rd, vec3 ce, float ra ) \n {\n vec3 oc = ro - ce;\n float b = dot( oc, rd );\n float c = dot( oc, oc ) - ra * ra;\n float h = b * b - c;\n \n if( h < 0.0 ) { return -1.0; }\n \n h = sqrt( h );\n \n return - b + h;\n }\n vec3 project() \n {\n vec3 p = normalize( vWorldPosition );\n vec3 camPos = cameraPosition;\n camPos.y -= height;\n float intersection = sphereIntersect( camPos, p, vec3( 0.0 ), radius );\n if( intersection > 0.0 ) {\n \n vec3 h = vec3( 0.0, - height, 0.0 );\n float intersection2 = diskIntersectWithBackFaceCulling( camPos, p, h, vec3( 0.0, 1.0, 0.0 ), radius );\n p = ( camPos + min( intersection, intersection2 ) * p ) / radius;\n } else {\n p = vec3( 0.0, 1.0, 0.0 );\n }\n return p;\n }\n #include <common>\n #include <cube_uv_reflection_fragment>\n void main() \n {\n vec3 projectedWorldPosition = project();\n \n #ifdef ENVMAP_TYPE_CUBE\n vec3 outcolor = textureCube( map, projectedWorldPosition ).rgb;\n #else\n vec3 direction = normalize( projectedWorldPosition );\n vec2 uv = equirectUv( direction );\n vec3 outcolor = texture2D( map, uv ).rgb;\n #endif\n gl_FragColor = vec4( outcolor, 1.0 );\n #include <tonemapping_fragment>\n #include <encodings_fragment>\n }\n ",u={map:{value:n},height:{value:(null==o?void 0:o.height)||15},radius:{value:(null==o?void 0:o.radius)||100}};super(new e.IcosahedronGeometry(1,16),new e.ShaderMaterial({uniforms:u,fragmentShader:d,vertexShader:"\n varying vec3 vWorldPosition;\n void main() \n {\n vec4 worldPosition = ( modelMatrix * vec4( position, 1.0 ) );\n vWorldPosition = worldPosition.xyz;\n \n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n }\n ",side:e.DoubleSide}))}set radius(e){this.material.uniforms.radius.value=e}get radius(){return this.material.uniforms.radius.value}set height(e){this.material.uniforms.height.value=e}get height(){return this.material.uniforms.height.value}}exports.GroundProjectedEnv=n;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Mesh, ShaderMaterial, Texture, CubeTexture, BufferGeometry } from 'three';
|
|
2
|
+
export interface GroundProjectedEnvParameters {
|
|
3
|
+
height?: number;
|
|
4
|
+
radius?: number;
|
|
5
|
+
}
|
|
6
|
+
export declare class GroundProjectedEnv extends Mesh<BufferGeometry, ShaderMaterial> {
|
|
7
|
+
constructor(texture: CubeTexture | Texture, options?: GroundProjectedEnvParameters);
|
|
8
|
+
set radius(radius: number);
|
|
9
|
+
get radius(): number;
|
|
10
|
+
set height(height: number);
|
|
11
|
+
get height(): number;
|
|
12
|
+
}
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
import { Mesh, IcosahedronGeometry, ShaderMaterial, DoubleSide } from 'three';
|
|
2
|
+
|
|
3
|
+
const isCubeTexture = def => def && def.isCubeTexture;
|
|
4
|
+
|
|
5
|
+
class GroundProjectedEnv extends Mesh {
|
|
6
|
+
constructor(texture, options) {
|
|
7
|
+
var _ref, _texture$image$;
|
|
8
|
+
|
|
9
|
+
const isCubeMap = isCubeTexture(texture);
|
|
10
|
+
const w = (_ref = isCubeMap ? (_texture$image$ = texture.image[0]) === null || _texture$image$ === void 0 ? void 0 : _texture$image$.width : texture.image.width) != null ? _ref : 1024;
|
|
11
|
+
const cubeSize = w / 4;
|
|
12
|
+
|
|
13
|
+
const _lodMax = Math.floor(Math.log2(cubeSize));
|
|
14
|
+
|
|
15
|
+
const _cubeSize = Math.pow(2, _lodMax);
|
|
16
|
+
|
|
17
|
+
const width = 3 * Math.max(_cubeSize, 16 * 7);
|
|
18
|
+
const height = 4 * _cubeSize;
|
|
19
|
+
const defines = [isCubeMap ? '#define ENVMAP_TYPE_CUBE' : '', `#define CUBEUV_TEXEL_WIDTH ${1.0 / width}`, `#define CUBEUV_TEXEL_HEIGHT ${1.0 / height}`, `#define CUBEUV_MAX_MIP ${_lodMax}.0`];
|
|
20
|
+
const vertexShader =
|
|
21
|
+
/* glsl */
|
|
22
|
+
`
|
|
23
|
+
varying vec3 vWorldPosition;
|
|
24
|
+
void main()
|
|
25
|
+
{
|
|
26
|
+
vec4 worldPosition = ( modelMatrix * vec4( position, 1.0 ) );
|
|
27
|
+
vWorldPosition = worldPosition.xyz;
|
|
28
|
+
|
|
29
|
+
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
|
|
30
|
+
}
|
|
31
|
+
`;
|
|
32
|
+
const fragmentShader = defines.join('\n') +
|
|
33
|
+
/* glsl */
|
|
34
|
+
`
|
|
35
|
+
#define ENVMAP_TYPE_CUBE_UV
|
|
36
|
+
varying vec3 vWorldPosition;
|
|
37
|
+
uniform float radius;
|
|
38
|
+
uniform float height;
|
|
39
|
+
uniform float angle;
|
|
40
|
+
#ifdef ENVMAP_TYPE_CUBE
|
|
41
|
+
uniform samplerCube map;
|
|
42
|
+
#else
|
|
43
|
+
uniform sampler2D map;
|
|
44
|
+
#endif
|
|
45
|
+
// From: https://www.shadertoy.com/view/4tsBD7
|
|
46
|
+
float diskIntersectWithBackFaceCulling( vec3 ro, vec3 rd, vec3 c, vec3 n, float r )
|
|
47
|
+
{
|
|
48
|
+
float d = dot ( rd, n );
|
|
49
|
+
|
|
50
|
+
if( d > 0.0 ) { return 1e6; }
|
|
51
|
+
|
|
52
|
+
vec3 o = ro - c;
|
|
53
|
+
float t = - dot( n, o ) / d;
|
|
54
|
+
vec3 q = o + rd * t;
|
|
55
|
+
|
|
56
|
+
return ( dot( q, q ) < r * r ) ? t : 1e6;
|
|
57
|
+
}
|
|
58
|
+
// From: https://www.iquilezles.org/www/articles/intersectors/intersectors.htm
|
|
59
|
+
float sphereIntersect( vec3 ro, vec3 rd, vec3 ce, float ra )
|
|
60
|
+
{
|
|
61
|
+
vec3 oc = ro - ce;
|
|
62
|
+
float b = dot( oc, rd );
|
|
63
|
+
float c = dot( oc, oc ) - ra * ra;
|
|
64
|
+
float h = b * b - c;
|
|
65
|
+
|
|
66
|
+
if( h < 0.0 ) { return -1.0; }
|
|
67
|
+
|
|
68
|
+
h = sqrt( h );
|
|
69
|
+
|
|
70
|
+
return - b + h;
|
|
71
|
+
}
|
|
72
|
+
vec3 project()
|
|
73
|
+
{
|
|
74
|
+
vec3 p = normalize( vWorldPosition );
|
|
75
|
+
vec3 camPos = cameraPosition;
|
|
76
|
+
camPos.y -= height;
|
|
77
|
+
float intersection = sphereIntersect( camPos, p, vec3( 0.0 ), radius );
|
|
78
|
+
if( intersection > 0.0 ) {
|
|
79
|
+
|
|
80
|
+
vec3 h = vec3( 0.0, - height, 0.0 );
|
|
81
|
+
float intersection2 = diskIntersectWithBackFaceCulling( camPos, p, h, vec3( 0.0, 1.0, 0.0 ), radius );
|
|
82
|
+
p = ( camPos + min( intersection, intersection2 ) * p ) / radius;
|
|
83
|
+
} else {
|
|
84
|
+
p = vec3( 0.0, 1.0, 0.0 );
|
|
85
|
+
}
|
|
86
|
+
return p;
|
|
87
|
+
}
|
|
88
|
+
#include <common>
|
|
89
|
+
#include <cube_uv_reflection_fragment>
|
|
90
|
+
void main()
|
|
91
|
+
{
|
|
92
|
+
vec3 projectedWorldPosition = project();
|
|
93
|
+
|
|
94
|
+
#ifdef ENVMAP_TYPE_CUBE
|
|
95
|
+
vec3 outcolor = textureCube( map, projectedWorldPosition ).rgb;
|
|
96
|
+
#else
|
|
97
|
+
vec3 direction = normalize( projectedWorldPosition );
|
|
98
|
+
vec2 uv = equirectUv( direction );
|
|
99
|
+
vec3 outcolor = texture2D( map, uv ).rgb;
|
|
100
|
+
#endif
|
|
101
|
+
gl_FragColor = vec4( outcolor, 1.0 );
|
|
102
|
+
#include <tonemapping_fragment>
|
|
103
|
+
#include <encodings_fragment>
|
|
104
|
+
}
|
|
105
|
+
`;
|
|
106
|
+
const uniforms = {
|
|
107
|
+
map: {
|
|
108
|
+
value: texture
|
|
109
|
+
},
|
|
110
|
+
height: {
|
|
111
|
+
value: (options === null || options === void 0 ? void 0 : options.height) || 15
|
|
112
|
+
},
|
|
113
|
+
radius: {
|
|
114
|
+
value: (options === null || options === void 0 ? void 0 : options.radius) || 100
|
|
115
|
+
}
|
|
116
|
+
};
|
|
117
|
+
const geometry = new IcosahedronGeometry(1, 16);
|
|
118
|
+
const material = new ShaderMaterial({
|
|
119
|
+
uniforms,
|
|
120
|
+
fragmentShader,
|
|
121
|
+
vertexShader,
|
|
122
|
+
side: DoubleSide
|
|
123
|
+
});
|
|
124
|
+
super(geometry, material);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
set radius(radius) {
|
|
128
|
+
this.material.uniforms.radius.value = radius;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
get radius() {
|
|
132
|
+
return this.material.uniforms.radius.value;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
set height(height) {
|
|
136
|
+
this.material.uniforms.height.value = height;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
get height() {
|
|
140
|
+
return this.material.uniforms.height.value;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
export { GroundProjectedEnv };
|
package/package.json
CHANGED
package/webxr/ARButton.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.ARButton=class{static createButton(e,t={}){const n=document.createElement("button");function o(){n.style.display="",n.style.cursor="auto",n.style.left="calc(50% - 75px)",n.style.width="150px",n.onmouseenter=null,n.onmouseleave=null,n.onclick=null,n.textContent="AR NOT SUPPORTED"}function s(e){e.style.position="absolute",e.style.bottom="20px",e.style.padding="12px 6px",e.style.border="1px solid #fff",e.style.borderRadius="4px",e.style.background="rgba(0,0,0,0.1)",e.style.color="#fff",e.style.font="normal 13px sans-serif",e.style.textAlign="center",e.style.opacity="0.5",e.style.outline="none",e.style.zIndex="999"}if("xr"in navigator)return n.id="ARButton",n.style.display="none",s(n),navigator.xr.isSessionSupported("immersive-ar").then((function(s){s?function(){if(void 0===t.domOverlay){
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.ARButton=class{static createButton(e,t={}){const n=document.createElement("button");function o(){n.style.display="",n.style.cursor="auto",n.style.left="calc(50% - 75px)",n.style.width="150px",n.onmouseenter=null,n.onmouseleave=null,n.onclick=null,n.textContent="AR NOT SUPPORTED"}function s(e){e.style.position="absolute",e.style.bottom="20px",e.style.padding="12px 6px",e.style.border="1px solid #fff",e.style.borderRadius="4px",e.style.background="rgba(0,0,0,0.1)",e.style.color="#fff",e.style.font="normal 13px sans-serif",e.style.textAlign="center",e.style.opacity="0.5",e.style.outline="none",e.style.zIndex="999"}if("xr"in navigator)return n.id="ARButton",n.style.display="none",s(n),navigator.xr.isSessionSupported("immersive-ar").then((function(s){s?function(){if(void 0===t.domOverlay){const e=document.createElement("div");e.style.display="none",document.body.appendChild(e);const n=document.createElementNS("http://www.w3.org/2000/svg","svg");n.setAttribute("width","38px"),n.setAttribute("height","38px"),n.style.position="absolute",n.style.right="20px",n.style.top="20px",n.addEventListener("click",(function(){var e;null===(e=o)||void 0===e||e.end()})),e.appendChild(n);const s=document.createElementNS("http://www.w3.org/2000/svg","path");s.setAttribute("d","M 12,12 L 28,28 M 28,12 12,28"),s.setAttribute("stroke","#fff"),s.setAttribute("stroke-width","2px"),n.appendChild(s),void 0===t.optionalFeatures&&(t.optionalFeatures=[]),t.optionalFeatures.push("dom-overlay"),t.domOverlay={root:e}}let o=null;async function s(s){s.addEventListener("end",l),e.xr.setReferenceSpaceType("local"),await e.xr.setSession(s),n.textContent="STOP AR",t.domOverlay.root.style.display="",o=s}function l(){o.removeEventListener("end",l),n.textContent="START AR",t.domOverlay.root.style.display="none",o=null}n.style.display="",n.style.cursor="pointer",n.style.left="calc(50% - 50px)",n.style.width="100px",n.textContent="START AR",n.onmouseenter=()=>{n.style.opacity="1.0"},n.onmouseleave=()=>{n.style.opacity="0.5"},n.onclick=()=>{null===o?navigator.xr.requestSession("immersive-ar",t).then(s):o.end()}}():o()})).catch(o),n;{const e=document.createElement("a");return!1===window.isSecureContext?(e.href=document.location.href.replace(/^http:/,"https:"),e.innerHTML="WEBXR NEEDS HTTPS"):(e.href="https://immersiveweb.dev/",e.innerHTML="WEBXR NOT AVAILABLE"),e.style.left="calc(50% - 90px)",e.style.width="180px",e.style.textDecoration="none",s(e),e}}};
|
package/webxr/ARButton.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { WebGLRenderer } from 'three';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
function createButton(renderer: WebGLRenderer, sessionInit?: any): HTMLElement;
|
|
1
|
+
import { WebGLRenderer, XRSessionInit } from 'three';
|
|
2
|
+
declare class ARButton {
|
|
3
|
+
static createButton(renderer: WebGLRenderer, sessionInit?: XRSessionInit): HTMLButtonElement | HTMLAnchorElement;
|
|
5
4
|
}
|
|
5
|
+
export { ARButton };
|
package/webxr/ARButton.js
CHANGED
|
@@ -6,23 +6,25 @@ class ARButton {
|
|
|
6
6
|
/*device*/
|
|
7
7
|
showStartAR() {
|
|
8
8
|
if (sessionInit.domOverlay === undefined) {
|
|
9
|
-
|
|
9
|
+
const overlay = document.createElement('div');
|
|
10
10
|
overlay.style.display = 'none';
|
|
11
11
|
document.body.appendChild(overlay);
|
|
12
|
-
|
|
13
|
-
svg.setAttribute('width',
|
|
14
|
-
svg.setAttribute('height',
|
|
12
|
+
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
13
|
+
svg.setAttribute('width', '38px');
|
|
14
|
+
svg.setAttribute('height', '38px');
|
|
15
15
|
svg.style.position = 'absolute';
|
|
16
16
|
svg.style.right = '20px';
|
|
17
17
|
svg.style.top = '20px';
|
|
18
18
|
svg.addEventListener('click', function () {
|
|
19
|
-
|
|
19
|
+
var _currentSession;
|
|
20
|
+
|
|
21
|
+
(_currentSession = currentSession) === null || _currentSession === void 0 ? void 0 : _currentSession.end();
|
|
20
22
|
});
|
|
21
23
|
overlay.appendChild(svg);
|
|
22
|
-
|
|
24
|
+
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
|
23
25
|
path.setAttribute('d', 'M 12,12 L 28,28 M 28,12 12,28');
|
|
24
26
|
path.setAttribute('stroke', '#fff');
|
|
25
|
-
path.setAttribute('stroke-width',
|
|
27
|
+
path.setAttribute('stroke-width', '2px');
|
|
26
28
|
svg.appendChild(path);
|
|
27
29
|
|
|
28
30
|
if (sessionInit.optionalFeatures === undefined) {
|
|
@@ -63,15 +65,15 @@ class ARButton {
|
|
|
63
65
|
button.style.width = '100px';
|
|
64
66
|
button.textContent = 'START AR';
|
|
65
67
|
|
|
66
|
-
button.onmouseenter =
|
|
68
|
+
button.onmouseenter = () => {
|
|
67
69
|
button.style.opacity = '1.0';
|
|
68
70
|
};
|
|
69
71
|
|
|
70
|
-
button.onmouseleave =
|
|
72
|
+
button.onmouseleave = () => {
|
|
71
73
|
button.style.opacity = '0.5';
|
|
72
74
|
};
|
|
73
75
|
|
|
74
|
-
button.onclick =
|
|
76
|
+
button.onclick = () => {
|
|
75
77
|
if (currentSession === null) {
|
|
76
78
|
navigator.xr.requestSession('immersive-ar', sessionInit).then(onSessionStarted);
|
|
77
79
|
} else {
|
|
@@ -113,7 +115,8 @@ class ARButton {
|
|
|
113
115
|
if ('xr' in navigator) {
|
|
114
116
|
button.id = 'ARButton';
|
|
115
117
|
button.style.display = 'none';
|
|
116
|
-
stylizeElement(button)
|
|
118
|
+
stylizeElement(button) // Query for session mode
|
|
119
|
+
;
|
|
117
120
|
navigator.xr.isSessionSupported('immersive-ar').then(function (supported) {
|
|
118
121
|
supported ? showStartAR() : showARNotSupported();
|
|
119
122
|
}).catch(showARNotSupported);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/defineProperty"),t=require("three"),o=require("./XRHandMeshModel.cjs.js");function
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/defineProperty"),t=require("three"),o=require("./XRHandMeshModel.cjs.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../loaders/GLTFLoader.cjs.js");var n=r(e);class s extends t.Object3D{constructor(e,t,r){super(),n.default(this,"controller",void 0),n.default(this,"motionController",void 0),n.default(this,"envMap",void 0),n.default(this,"mesh",void 0),n.default(this,"xrInputSource",void 0),this.controller=e,this.motionController=null,this.envMap=null,this.mesh=null,this.xrInputSource=null,e.addEventListener("connected",(n=>{const s=n.data;s.hand&&!this.motionController&&(this.xrInputSource=s,this.motionController=new o.XRHandMeshModel(this,e,void 0,s.handedness,"left"===s.handedness?t:r))})),e.addEventListener("disconnected",(()=>{this.dispose()}))}updateMatrixWorld(e){super.updateMatrixWorld(e),this.motionController&&this.motionController.updateMesh()}getPointerPosition(){const e=this.controller.joints["index-finger-tip"];return e?e.position:null}intersectBoxObject(e){const o=this.getPointerPosition();if(o){const r=new t.Sphere(o,.01),n=(new t.Box3).setFromObject(e);return r.intersectsBox(n)}return!1}checkButton(e){this.intersectBoxObject(e)?e.onPress():e.onClear(),e.isPressed()&&e.whilePressed()}dispose(){this.clear(),this.motionController=null}}exports.OculusHandModel=s;
|
|
@@ -12,7 +12,7 @@ declare class OculusHandModel extends Object3D {
|
|
|
12
12
|
envMap: Texture | null;
|
|
13
13
|
mesh: Mesh | null;
|
|
14
14
|
xrInputSource: XRInputSource | null;
|
|
15
|
-
constructor(controller: Object3D,
|
|
15
|
+
constructor(controller: Object3D, leftModelPath?: string, rightModelPath?: string);
|
|
16
16
|
updateMatrixWorld(force?: boolean): void;
|
|
17
17
|
getPointerPosition(): Vector3 | null;
|
|
18
18
|
intersectBoxObject(boxObject: Object3D): boolean;
|
package/webxr/OculusHandModel.js
CHANGED
|
@@ -6,7 +6,7 @@ const TOUCH_RADIUS = 0.01;
|
|
|
6
6
|
const POINTING_JOINT = 'index-finger-tip';
|
|
7
7
|
|
|
8
8
|
class OculusHandModel extends Object3D {
|
|
9
|
-
constructor(controller,
|
|
9
|
+
constructor(controller, leftModelPath, rightModelPath) {
|
|
10
10
|
super();
|
|
11
11
|
|
|
12
12
|
_defineProperty(this, "controller", void 0);
|
|
@@ -29,7 +29,7 @@ class OculusHandModel extends Object3D {
|
|
|
29
29
|
|
|
30
30
|
if (xrInputSource.hand && !this.motionController) {
|
|
31
31
|
this.xrInputSource = xrInputSource;
|
|
32
|
-
this.motionController = new XRHandMeshModel(this, controller, undefined, xrInputSource.handedness, xrInputSource.handedness === 'left' ?
|
|
32
|
+
this.motionController = new XRHandMeshModel(this, controller, undefined, xrInputSource.handedness, xrInputSource.handedness === 'left' ? leftModelPath : rightModelPath);
|
|
33
33
|
}
|
|
34
34
|
});
|
|
35
35
|
controller.addEventListener('disconnected', () => {
|
package/webxr/VRButton.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("@babel/runtime/helpers/defineProperty"));class n{static createButton(e,t){
|
|
1
|
+
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("@babel/runtime/helpers/defineProperty"));class n{static createButton(e,t={}){const o=document.createElement("button");function s(){o.style.display="",o.style.cursor="auto",o.style.left="calc(50% - 75px)",o.style.width="150px",o.onmouseenter=null,o.onmouseleave=null,o.onclick=null,o.textContent="VR NOT SUPPORTED"}function r(e){e.style.position="absolute",e.style.bottom="20px",e.style.padding="12px 6px",e.style.border="1px solid #fff",e.style.borderRadius="4px",e.style.background="rgba(0,0,0,0.1)",e.style.color="#fff",e.style.font="normal 13px sans-serif",e.style.textAlign="center",e.style.opacity="0.5",e.style.outline="none",e.style.zIndex="999"}if("xr"in navigator)return r(o),o.id="VRButton",o.style.display="none",navigator.xr.isSessionSupported("immersive-vr").then((r=>{r?function(){let n=null;async function s(t){t.addEventListener("end",r),await e.xr.setSession(t),o.textContent="EXIT VR",n=t}function r(){n.removeEventListener("end",r),o.textContent="ENTER VR",n=null}o.style.display="",o.style.cursor="pointer",o.style.left="calc(50% - 50px)",o.style.width="100px",o.textContent="ENTER VR",o.onmouseenter=()=>{o.style.opacity="1.0"},o.onmouseleave=()=>{o.style.opacity="0.5"},o.onclick=()=>{if(null===n){var e;const n=[t.optionalFeatures,"local-floor","bounded-floor","hand-tracking"].flat().filter(Boolean);null===(e=navigator.xr)||void 0===e||e.requestSession("immersive-vr",{...t,optionalFeatures:n}).then(s)}else n.end()}}():s(),r&&n.xrSessionIsGranted&&o.click()})),o;{const e=document.createElement("a");return!1===window.isSecureContext?(e.href=document.location.href.replace(/^http:/,"https:"),e.innerHTML="WEBXR NEEDS HTTPS"):(e.href="https://immersiveweb.dev/",e.innerHTML="WEBXR NOT AVAILABLE"),e.style.left="calc(50% - 90px)",e.style.width="180px",e.style.textDecoration="none",r(e),e}}static registerSessionGrantedListener(){"xr"in navigator&&navigator.xr.addEventListener("sessiongranted",(()=>{n.xrSessionIsGranted=!0}))}}t.default(n,"xrSessionIsGranted",!1),exports.VRButton=n;
|
package/webxr/VRButton.d.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
import { WebGLRenderer } from 'three';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import { WebGLRenderer, XRSessionInit } from 'three';
|
|
2
|
+
declare class VRButton {
|
|
3
|
+
static createButton(renderer: WebGLRenderer, sessionInit?: XRSessionInit): HTMLButtonElement | HTMLAnchorElement;
|
|
4
|
+
static xrSessionIsGranted: boolean;
|
|
5
|
+
static registerSessionGrantedListener(): void;
|
|
5
6
|
}
|
|
7
|
+
export { VRButton };
|
package/webxr/VRButton.js
CHANGED
|
@@ -1,11 +1,7 @@
|
|
|
1
1
|
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
2
2
|
|
|
3
3
|
class VRButton {
|
|
4
|
-
static createButton(renderer,
|
|
5
|
-
if (options) {
|
|
6
|
-
console.error('THREE.VRButton: The "options" parameter has been removed. Please set the reference space type via renderer.xr.setReferenceSpaceType() instead.');
|
|
7
|
-
}
|
|
8
|
-
|
|
4
|
+
static createButton(renderer, sessionInit = {}) {
|
|
9
5
|
const button = document.createElement('button');
|
|
10
6
|
|
|
11
7
|
function
|
|
@@ -35,26 +31,28 @@ class VRButton {
|
|
|
35
31
|
button.style.width = '100px';
|
|
36
32
|
button.textContent = 'ENTER VR';
|
|
37
33
|
|
|
38
|
-
button.onmouseenter =
|
|
34
|
+
button.onmouseenter = () => {
|
|
39
35
|
button.style.opacity = '1.0';
|
|
40
36
|
};
|
|
41
37
|
|
|
42
|
-
button.onmouseleave =
|
|
38
|
+
button.onmouseleave = () => {
|
|
43
39
|
button.style.opacity = '0.5';
|
|
44
40
|
};
|
|
45
41
|
|
|
46
|
-
button.onclick =
|
|
42
|
+
button.onclick = () => {
|
|
47
43
|
if (currentSession === null) {
|
|
44
|
+
var _xr;
|
|
45
|
+
|
|
48
46
|
// WebXR's requestReferenceSpace only works if the corresponding feature
|
|
49
47
|
// was requested at session creation time. For simplicity, just ask for
|
|
50
48
|
// the interesting ones as optional features, but be aware that the
|
|
51
49
|
// requestReferenceSpace call will fail if it turns out to be unavailable.
|
|
52
50
|
// ('local' is always available for immersive sessions and doesn't need to
|
|
53
51
|
// be requested separately.)
|
|
54
|
-
const
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
52
|
+
const optionalFeatures = [sessionInit.optionalFeatures, 'local-floor', 'bounded-floor', 'hand-tracking'].flat().filter(Boolean);
|
|
53
|
+
(_xr = navigator.xr) === null || _xr === void 0 ? void 0 : _xr.requestSession('immersive-vr', { ...sessionInit,
|
|
54
|
+
optionalFeatures
|
|
55
|
+
}).then(onSessionStarted);
|
|
58
56
|
} else {
|
|
59
57
|
currentSession.end();
|
|
60
58
|
}
|
|
@@ -92,10 +90,11 @@ class VRButton {
|
|
|
92
90
|
}
|
|
93
91
|
|
|
94
92
|
if ('xr' in navigator) {
|
|
95
|
-
button.id = 'VRButton';
|
|
96
|
-
button.style.display = 'none';
|
|
97
93
|
stylizeElement(button);
|
|
98
|
-
|
|
94
|
+
button.id = 'VRButton';
|
|
95
|
+
button.style.display = 'none' // Query for session mode
|
|
96
|
+
;
|
|
97
|
+
navigator.xr.isSessionSupported('immersive-vr').then(supported => {
|
|
99
98
|
supported ? showEnterVR() : showWebXRNotFound();
|
|
100
99
|
|
|
101
100
|
if (supported && VRButton.xrSessionIsGranted) {
|
|
@@ -3,7 +3,7 @@ declare class XRHandMeshModel {
|
|
|
3
3
|
controller: Object3D;
|
|
4
4
|
handModel: Object3D;
|
|
5
5
|
bones: Object3D[];
|
|
6
|
-
constructor(handModel: Object3D, controller: Object3D, path: string | undefined, handedness: string,
|
|
6
|
+
constructor(handModel: Object3D, controller: Object3D, path: string | undefined, handedness: string, customModelPath?: string);
|
|
7
7
|
updateMesh(): void;
|
|
8
8
|
}
|
|
9
9
|
export { XRHandMeshModel };
|
package/webxr/XRHandMeshModel.js
CHANGED
|
@@ -4,7 +4,7 @@ import { GLTFLoader } from '../loaders/GLTFLoader.js';
|
|
|
4
4
|
const DEFAULT_HAND_PROFILE_PATH = 'https://cdn.jsdelivr.net/npm/@webxr-input-profiles/assets@1.0/dist/profiles/generic-hand/';
|
|
5
5
|
|
|
6
6
|
class XRHandMeshModel {
|
|
7
|
-
constructor(handModel, controller, path = DEFAULT_HAND_PROFILE_PATH, handedness,
|
|
7
|
+
constructor(handModel, controller, path = DEFAULT_HAND_PROFILE_PATH, handedness, customModelPath) {
|
|
8
8
|
_defineProperty(this, "controller", void 0);
|
|
9
9
|
|
|
10
10
|
_defineProperty(this, "handModel", void 0);
|
|
@@ -15,8 +15,8 @@ class XRHandMeshModel {
|
|
|
15
15
|
this.handModel = handModel;
|
|
16
16
|
this.bones = [];
|
|
17
17
|
const loader = new GLTFLoader();
|
|
18
|
-
if (!
|
|
19
|
-
loader.load(
|
|
18
|
+
if (!customModelPath) loader.setPath(path);
|
|
19
|
+
loader.load(customModelPath != null ? customModelPath : `${handedness}.glb`, gltf => {
|
|
20
20
|
const object = gltf.scene.children[0];
|
|
21
21
|
this.handModel.add(object);
|
|
22
22
|
const mesh = object.getObjectByProperty('type', 'SkinnedMesh');
|