fix: head locked surfaces sample

Samples/HeadlockedSurfaces/README.md

@@ -0,0 +1,17 @@
+# HeadLockedSurfaces Sample
+
+## How to use?
+
+1. Create a new react-360 project with the following comand
+
+```bat
+
+$ npx react-360 init myProjectName
+
+```
+
+2. Replace the **client.js**, **index.html**, and the **index.js** files with the respective files in this directory
+
+3. Run `yarn add webgl-ui` to install the [webgl-ui library](https://www.npmjs.com/package/webgl-ui)
+
+4. Run `yarn start` to start up the application.

Samples/HeadlockedSurfaces/client.js

@@ -1,4 +1,5 @@
-import {Math as VRMath, ReactInstance, Surface} from 'react-360-web';
+import {ReactInstance, Surface} from 'react-360-web';
+import { Math as GLMath } from "webgl-ui";
 
 function init(bundle, parent, options = {}) {
   const horizontalPanel = new Surface(300, 300, Surface.SurfaceShape.Flat);
@@ -7,6 +8,7 @@ function init(bundle, parent, options = {}) {
   horizontalPanel.setAngle(0, -0.5);
 
   const cameraDirection = [0, 0, -1];
+  const { rotateByQuaternion } = GLMath;
 
   const r360 = new ReactInstance(bundle, parent, {
     fullScreen: true,
@@ -17,7 +19,7 @@ function init(bundle, parent, options = {}) {
       cameraDirection[2] = -1;
       // cameraDirection will point out from the view of the camera,
       // we can use it to compute surface angles
-      VRMath.rotateByQuaternion(cameraDirection, cameraQuat);
+      rotateByQuaternion(cameraDirection, cameraQuat);
       const cx = cameraDirection[0];
       const cy = cameraDirection[1];
       const cz = cameraDirection[2];