react-xr - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

dist/index.cjs.js

@@ -166,3 +166,3 @@ 'use strict';
       var gl = _ref4.gl;
-      document.body.appendChild(VRButton.VRButton.createButton(gl));
+      return void document.body.appendChild(VRButton.VRButton.createButton(gl));
     }
@@ -178,3 +178,3 @@ }, rest), children);
       var gl = _ref6.gl;
-      document.body.appendChild(ARButton.ARButton.createButton(gl));
+      return void document.body.appendChild(ARButton.ARButton.createButton(gl));
     }
@@ -195,3 +195,3 @@ }, rest), children);
     return function (e) {
-      handler({
+      return handler({
         originalEvent: e,
@@ -217,3 +217,3 @@ controller: controller
     return function () {
-      cleanups.forEach(function (fn) {
+      return cleanups.forEach(function (fn) {
         return fn();
@@ -376,6 +376,59 @@ });
 }
+function RayGrab(_ref3) {
+  var children = _ref3.children;
 
+  var _useXR3 = useXR(),
+      addInteraction = _useXR3.addInteraction;
+
+  var hoveredHandedness = React.useRef(new Set());
+  var grabbingController = React.useRef();
+  var groupRef = React.useRef();
+  var previousTransform = React.useRef(undefined);
+  var onEnd = React.useCallback(function (_) {
+    grabbingController.current = undefined;
+    previousTransform.current = undefined;
+  }, []);
+  var onStart = React.useCallback(function (e) {
+    var _e$controller$inputSo6;
+
+    if (hoveredHandedness.current.has((_e$controller$inputSo6 = e.controller.inputSource) == null ? void 0 : _e$controller$inputSo6.handedness)) {
+      grabbingController.current = e.controller.controller;
+      previousTransform.current = new three.Matrix4().getInverse(e.controller.controller.matrixWorld);
+    }
+  }, []);
+  useXREvent('selectstart', onStart);
+  useXREvent('selectend', onEnd);
+  reactThreeFiber.useFrame(function () {
+    if (!grabbingController.current || !previousTransform.current || !groupRef.current) {
+      return;
+    }
+
+    var controller = grabbingController.current;
+    var group = groupRef.current;
+    group.applyMatrix4(previousTransform.current);
+    group.applyMatrix4(controller.matrixWorld);
+    group.updateWorldMatrix(false, true);
+    previousTransform.current.getInverse(controller.matrixWorld);
+  });
+  React.useEffect(function () {
+    addInteraction(groupRef.current, 'onHover', function (e) {
+      var _e$controller$inputSo7;
+
+      hoveredHandedness.current.add((_e$controller$inputSo7 = e.controller.inputSource) == null ? void 0 : _e$controller$inputSo7.handedness);
+    });
+    addInteraction(groupRef.current, 'onBlur', function (e) {
+      var _e$controller$inputSo8;
+
+      hoveredHandedness.current["delete"]((_e$controller$inputSo8 = e.controller.inputSource) == null ? void 0 : _e$controller$inputSo8.handedness);
+    });
+  }, [addInteraction]);
+  return /*#__PURE__*/React__default.createElement("group", {
+    ref: groupRef
+  }, children);
+}
+
 exports.ARCanvas = ARCanvas;
 exports.DefaultXRControllers = DefaultXRControllers;
 exports.Hover = Hover;
+exports.RayGrab = RayGrab;
 exports.Select = Select;
@@ -382,0 +435,0 @@ exports.VRCanvas = VRCanvas;

dist/index.js

@@ -156,5 +156,3 @@ import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
       gl
-    }) => {
-      document.body.appendChild(VRButton.createButton(gl));
-    }
+    }) => void document.body.appendChild(VRButton.createButton(gl))
   }, rest), children);
@@ -171,5 +169,3 @@ }
       gl
-    }) => {
-      document.body.appendChild(ARButton.createButton(gl));
-    }
+    }) => void document.body.appendChild(ARButton.createButton(gl))
   }, rest), children);
@@ -184,8 +180,6 @@ }
   } = useXR();
-  const handleEvent = useCallback(controller => e => {
-    handler({
-      originalEvent: e,
-      controller
-    });
-  }, [handler]);
+  const handleEvent = useCallback(controller => e => handler({
+    originalEvent: e,
+    controller
+  }), [handler]);
   useEffect(() => {
@@ -203,5 +197,3 @@ const controllers = handedness ? allControllers.filter(it => {
     });
-    return () => {
-      cleanups.forEach(fn => fn());
-    };
+    return () => cleanups.forEach(fn => fn());
   }, [event, handleEvent, allControllers, handedness]);
@@ -351,3 +343,55 @@ };
 }
+function RayGrab({
+  children
+}) {
+  const {
+    addInteraction
+  } = useXR();
+  const hoveredHandedness = useRef(new Set());
+  const grabbingController = useRef();
+  const groupRef = useRef();
+  const previousTransform = useRef(undefined);
+  const onEnd = useCallback(_ => {
+    grabbingController.current = undefined;
+    previousTransform.current = undefined;
+  }, []);
+  const onStart = useCallback(e => {
+    var _e$controller$inputSo6;
 
-export { ARCanvas, DefaultXRControllers, Hover, Select, VRCanvas, XR, XRController, useXR, useXREvent };
+    if (hoveredHandedness.current.has((_e$controller$inputSo6 = e.controller.inputSource) == null ? void 0 : _e$controller$inputSo6.handedness)) {
+      grabbingController.current = e.controller.controller;
+      previousTransform.current = new Matrix4().getInverse(e.controller.controller.matrixWorld);
+    }
+  }, []);
+  useXREvent('selectstart', onStart);
+  useXREvent('selectend', onEnd);
+  useFrame(() => {
+    if (!grabbingController.current || !previousTransform.current || !groupRef.current) {
+      return;
+    }
+
+    const controller = grabbingController.current;
+    const group = groupRef.current;
+    group.applyMatrix4(previousTransform.current);
+    group.applyMatrix4(controller.matrixWorld);
+    group.updateWorldMatrix(false, true);
+    previousTransform.current.getInverse(controller.matrixWorld);
+  });
+  useEffect(() => {
+    addInteraction(groupRef.current, 'onHover', e => {
+      var _e$controller$inputSo7;
+
+      hoveredHandedness.current.add((_e$controller$inputSo7 = e.controller.inputSource) == null ? void 0 : _e$controller$inputSo7.handedness);
+    });
+    addInteraction(groupRef.current, 'onBlur', e => {
+      var _e$controller$inputSo8;
+
+      hoveredHandedness.current.delete((_e$controller$inputSo8 = e.controller.inputSource) == null ? void 0 : _e$controller$inputSo8.handedness);
+    });
+  }, [addInteraction]);
+  return /*#__PURE__*/React__default.createElement("group", {
+    ref: groupRef
+  }, children);
+}
+
+export { ARCanvas, DefaultXRControllers, Hover, RayGrab, Select, VRCanvas, XR, XRController, useXR, useXREvent };

dist/Interactions.d.ts

@@ -1,3 +0,6 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 export declare function Hover({ onChange, children }: any): JSX.Element;
 export declare function Select({ onSelect, children }: any): JSX.Element;
+export declare function RayGrab({ children }: {
+    children: ReactNode;
+}): JSX.Element;

package.json

 {
   "name": "react-xr",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "main": "dist/index.cjs.js",
@@ -5,0 +5,0 @@ "module": "dist/index.js",

README.md

@@ -12,4 +12,5 @@ # react-xr
 <p align="center">
-  <a href="https://codesandbox.io/s/react-xr-paddle-demo-v4uet"><img width="288" src="https://i.imgur.com/K71D3Ts.gif" /></a>
-  <a href="https://codesandbox.io/s/react-xr-simple-demo-8i9ro"><img width="288" src="https://i.imgur.com/5yh7LKz.gif" /></a>
+  <a href="https://codesandbox.io/s/react-xr-paddle-demo-v4uet"><img width="390" src="https://i.imgur.com/K71D3Ts.gif" /></a>
+  <a href="https://codesandbox.io/s/react-xr-simple-demo-8i9ro"><img width="390" src="https://i.imgur.com/5yh7LKz.gif" /></a>
+  <a href="https://codesandbox.io/s/react-xr-simple-ar-demo-8w8hm"><img height="221" src="https://i.imgur.com/yuNwPpn.gif" /></a>
 </p>
@@ -23,3 +24,3 @@ <p align="middle">
 ```
-npm install react-xr
+yarn add react-xr
 ```
@@ -31,8 +32,10 @@
 
-```js
+```jsx
 import { VRCanvas } from 'react-xr'
 
 function App() {
-  return <VRCanvas>{/* All the stuff goes here */}</VRCanvas>
-}
+  return (
+    <VRCanvas>
+      {/* All your regular react-three-fiber elements go here */}
+    </VRCanvas>
 ```
@@ -44,12 +47,7 @@
 
-```js
+```jsx
 import { VRCanvas, DefaultXRControllers } from 'react-xr'
 
-function App() {
-  return (
-    <VRCanvas>
-      <DefaultXRControllers />
-    </VRCanvas>
-  )
-}
+<VRCanvas>
+  <DefaultXRControllers />
 ```
@@ -59,3 +57,3 @@
 
-```js
+```jsx
 const { controllers } = useXR()
@@ -77,8 +75,8 @@ ```
 
-```js
+```jsx
 import { VRCanvas } from 'react-xr'
 
-function App() {
-  return <VRCanvas>{/* All the stuff goes here */}</VRCanvas>
-}
+<VRCanvas>
+  {/* All your regular react-three-fiber elements go here */}
+</VRCanvas>
 ```
@@ -88,5 +86,5 @@
 
-Hook that can only beused by components insde <XRCanvas> component.
+Hook that can only beused by components inside `XRCanvas` component.
 
-```js
+```jsx
 const { controllers } = useXR()
@@ -97,3 +95,3 @@ ```
 
-```js
+```jsx
 interface XRController {
@@ -120,5 +118,4 @@ grip: Group
 
-```js
+```jsx
 const onSqueeze = useCallback(() => console.log('Squeezed'), [])
-
 useXREvent('squeeze', onSqueeze)
@@ -129,5 +126,4 @@ ```
 
-```js
+```jsx
 const onSqueeze = useCallback(() => console.log('Left controller squeeze'), [])
-
 useXREvent('squeeze', onSqueeze, { handedness: 'left' })
@@ -144,4 +140,6 @@ ```
 
-```js
-<Hover onChange={(value) => console.log(value ? 'hovered' : 'blurred')}>{/* your mesh here */}</Hover>
+```jsx
+<Hover onChange={(value) => console.log(value ? 'hovered' : 'blurred')}>
+  <mesh />
+</Hover>
 ```
@@ -153,4 +151,37 @@
 
-```js
-<Select onSelect={() => console.log('selected')}>{/* your mesh here */}</Select>
+```jsx
+<Select onSelect={() => console.log('mesh has been selected')}>
+  <mesh />
+</Select>
 ```
+
+## Getting the VR Camera (HMD) Location
+
+To get the position of the VR camera, use three's WebXRManager instance. 
+
+```jsx
+const { camera } = useThree()
+const cam = gl.xr.isPresenting ? gl.xr.getCamera(camera) : camera
+```
+
+## Parent VR HMD and Controllers to another object
+
+If you want to attach the user to an object so it can be moved around, just parent the VR camera and controllers to an object3D.
+
+```jsx
+const mesh = useRef()
+const { gl, camera } = useThree()
+  
+useEffect(() => {
+  const cam = gl.xr.isPresenting ? gl.xr.getCamera(camera) : camera
+  mesh.current.add(cam)
+  return () => mesh.current.remove(cam)
+}, [gl.xr.isPresenting, gl.xr, camera, mesh])
+
+// bundle add the controllers to the same object as the camera so it all stays together.
+const { controllers } = useXR()
+useEffect(() => {
+  if (controllers.length > 0) controllers.forEach(c => mesh.current.add(c.grip))
+  return () => controllers.forEach(c => mesh.current.remove(c.grip))
+}, [controllers, mesh])
+```

No alert changes

Improved metrics

Total package byte prevSize

53974

increased by14.51%

Lines of code

1267

increased by9.98%

Number of lines in readme file

176

increased by21.38%

No dependency changes