opal-js_wrap-three 0.1.1 → 0.1.2

data/lib-opal/js_wrap/three/webxr/Text2D.js

@@ -0,0 +1,54 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "three"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("three"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.three);
+    global.Text2D = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, THREE) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.createText = createText;
+  THREE = _interopRequireWildcard(THREE);
+
+  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+  function createText(message, height) {
+    var canvas = document.createElement('canvas');
+    var context = canvas.getContext('2d');
+    var metrics = null;
+    var textHeight = 100;
+    context.font = 'normal ' + textHeight + 'px Arial';
+    metrics = context.measureText(message);
+    var textWidth = metrics.width;
+    canvas.width = textWidth;
+    canvas.height = textHeight;
+    context.font = 'normal ' + textHeight + 'px Arial';
+    context.textAlign = 'center';
+    context.textBaseline = 'middle';
+    context.fillStyle = '#ffffff';
+    context.fillText(message, textWidth / 2, textHeight / 2);
+    var texture = new THREE.Texture(canvas);
+    texture.needsUpdate = true; //var spriteAlignment = new THREE.Vector2(0,0) ;
+
+    var material = new THREE.MeshBasicMaterial({
+      color: 0xffffff,
+      side: THREE.DoubleSide,
+      map: texture,
+      transparent: true
+    });
+    var geometry = new THREE.PlaneGeometry(height * textWidth / textHeight, height);
+    var plane = new THREE.Mesh(geometry, material);
+    return plane;
+  }
+});

data/lib-opal/js_wrap/three/webxr/VRButton.js

@@ -0,0 +1,181 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports);
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports);
+    global.VRButton = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.VRButton = void 0;
+
+  function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+  function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+  function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+  var VRButton = /*#__PURE__*/function () {
+    function VRButton() {
+      _classCallCheck(this, VRButton);
+    }
+
+    _createClass(VRButton, null, [{
+      key: "createButton",
+      value: function createButton(renderer, options) {
+        if (options) {
+          console.error('THREE.VRButton: The "options" parameter has been removed. Please set the reference space type via renderer.xr.setReferenceSpaceType() instead.');
+        }
+
+        var button = document.createElement('button');
+
+        function
+          /*device*/
+        showEnterVR() {
+          var currentSession = null;
+
+          function onSessionStarted(_x) {
+            return _onSessionStarted.apply(this, arguments);
+          }
+
+          function _onSessionStarted() {
+            _onSessionStarted = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(session) {
+              return regeneratorRuntime.wrap(function _callee$(_context) {
+                while (1) {
+                  switch (_context.prev = _context.next) {
+                    case 0:
+                      session.addEventListener('end', onSessionEnded);
+                      _context.next = 3;
+                      return renderer.xr.setSession(session);
+
+                    case 3:
+                      button.textContent = 'EXIT VR';
+                      currentSession = session;
+
+                    case 5:
+                    case "end":
+                      return _context.stop();
+                  }
+                }
+              }, _callee);
+            }));
+            return _onSessionStarted.apply(this, arguments);
+          }
+
+          function
+            /*event*/
+          onSessionEnded() {
+            currentSession.removeEventListener('end', onSessionEnded);
+            button.textContent = 'ENTER VR';
+            currentSession = null;
+          } //
+
+
+          button.style.display = '';
+          button.style.cursor = 'pointer';
+          button.style.left = 'calc(50% - 50px)';
+          button.style.width = '100px';
+          button.textContent = 'ENTER VR';
+
+          button.onmouseenter = function () {
+            button.style.opacity = '1.0';
+          };
+
+          button.onmouseleave = function () {
+            button.style.opacity = '0.5';
+          };
+
+          button.onclick = function () {
+            if (currentSession === null) {
+              // WebXR's requestReferenceSpace only works if the corresponding feature
+              // was requested at session creation time. For simplicity, just ask for
+              // the interesting ones as optional features, but be aware that the
+              // requestReferenceSpace call will fail if it turns out to be unavailable.
+              // ('local' is always available for immersive sessions and doesn't need to
+              // be requested separately.)
+              var sessionInit = {
+                optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers']
+              };
+              navigator.xr.requestSession('immersive-vr', sessionInit).then(onSessionStarted);
+            } else {
+              currentSession.end();
+            }
+          };
+        }
+
+        function disableButton() {
+          button.style.display = '';
+          button.style.cursor = 'auto';
+          button.style.left = 'calc(50% - 75px)';
+          button.style.width = '150px';
+          button.onmouseenter = null;
+          button.onmouseleave = null;
+          button.onclick = null;
+        }
+
+        function showWebXRNotFound() {
+          disableButton();
+          button.textContent = 'VR NOT SUPPORTED';
+        }
+
+        function stylizeElement(element) {
+          element.style.position = 'absolute';
+          element.style.bottom = '20px';
+          element.style.padding = '12px 6px';
+          element.style.border = '1px solid #fff';
+          element.style.borderRadius = '4px';
+          element.style.background = 'rgba(0,0,0,0.1)';
+          element.style.color = '#fff';
+          element.style.font = 'normal 13px sans-serif';
+          element.style.textAlign = 'center';
+          element.style.opacity = '0.5';
+          element.style.outline = 'none';
+          element.style.zIndex = '999';
+        }
+
+        if ('xr' in navigator) {
+          button.id = 'VRButton';
+          button.style.display = 'none';
+          stylizeElement(button);
+          navigator.xr.isSessionSupported('immersive-vr').then(function (supported) {
+            supported ? showEnterVR() : showWebXRNotFound();
+          });
+          return button;
+        } else {
+          var message = document.createElement('a');
+
+          if (window.isSecureContext === false) {
+            message.href = document.location.href.replace(/^http:/, 'https:');
+            message.innerHTML = 'WEBXR NEEDS HTTPS'; // TODO Improve message
+          } else {
+            message.href = 'https://immersiveweb.dev/';
+            message.innerHTML = 'WEBXR NOT AVAILABLE';
+          }
+
+          message.style.left = 'calc(50% - 90px)';
+          message.style.width = '180px';
+          message.style.textDecoration = 'none';
+          stylizeElement(message);
+          return message;
+        }
+      }
+    }]);
+
+    return VRButton;
+  }();
+
+  _exports.VRButton = VRButton;
+});

data/lib-opal/js_wrap/three/webxr/XRControllerModelFactory.js

@@ -0,0 +1,266 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "three", "../loaders/GLTFLoader.js", "../libs/motion-controllers.module.js"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("three"), require("../loaders/GLTFLoader.js"), require("../libs/motion-controllers.module.js"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.three, global.GLTFLoader, global.motionControllersModule);
+    global.XRControllerModelFactory = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _three, _GLTFLoader, _motionControllersModule) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.XRControllerModelFactory = void 0;
+
+  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+  function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+  function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
+
+  function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
+
+  function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+  function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+  function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+  function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+  function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+  var DEFAULT_PROFILES_PATH = 'https://cdn.jsdelivr.net/npm/@webxr-input-profiles/assets@1.0/dist/profiles';
+  var DEFAULT_PROFILE = 'generic-trigger';
+
+  var XRControllerModel = /*#__PURE__*/function (_Object3D) {
+    _inherits(XRControllerModel, _Object3D);
+
+    var _super = _createSuper(XRControllerModel);
+
+    function XRControllerModel() {
+      var _this;
+
+      _classCallCheck(this, XRControllerModel);
+
+      _this = _super.call(this);
+      _this.motionController = null;
+      _this.envMap = null;
+      return _this;
+    }
+
+    _createClass(XRControllerModel, [{
+      key: "setEnvironmentMap",
+      value: function setEnvironmentMap(envMap) {
+        var _this2 = this;
+
+        if (this.envMap == envMap) {
+          return this;
+        }
+
+        this.envMap = envMap;
+        this.traverse(function (child) {
+          if (child.isMesh) {
+            child.material.envMap = _this2.envMap;
+            child.material.needsUpdate = true;
+          }
+        });
+        return this;
+      }
+      /**
+       * Polls data from the XRInputSource and updates the model's components to match
+       * the real world data
+       */
+
+    }, {
+      key: "updateMatrixWorld",
+      value: function updateMatrixWorld(force) {
+        _get(_getPrototypeOf(XRControllerModel.prototype), "updateMatrixWorld", this).call(this, force);
+
+        if (!this.motionController) return; // Cause the MotionController to poll the Gamepad for data
+
+        this.motionController.updateFromGamepad(); // Update the 3D model to reflect the button, thumbstick, and touchpad state
+
+        Object.values(this.motionController.components).forEach(function (component) {
+          // Update node data based on the visual responses' current states
+          Object.values(component.visualResponses).forEach(function (visualResponse) {
+            var valueNode = visualResponse.valueNode,
+                minNode = visualResponse.minNode,
+                maxNode = visualResponse.maxNode,
+                value = visualResponse.value,
+                valueNodeProperty = visualResponse.valueNodeProperty; // Skip if the visual response node is not found. No error is needed,
+            // because it will have been reported at load time.
+
+            if (!valueNode) return; // Calculate the new properties based on the weight supplied
+
+            if (valueNodeProperty === _motionControllersModule.Constants.VisualResponseProperty.VISIBILITY) {
+              valueNode.visible = value;
+            } else if (valueNodeProperty === _motionControllersModule.Constants.VisualResponseProperty.TRANSFORM) {
+              valueNode.quaternion.slerpQuaternions(minNode.quaternion, maxNode.quaternion, value);
+              valueNode.position.lerpVectors(minNode.position, maxNode.position, value);
+            }
+          });
+        });
+      }
+    }]);
+
+    return XRControllerModel;
+  }(_three.Object3D);
+  /**
+   * Walks the model's tree to find the nodes needed to animate the components and
+   * saves them to the motionContoller components for use in the frame loop. When
+   * touchpads are found, attaches a touch dot to them.
+   */
+
+
+  function findNodes(motionController, scene) {
+    // Loop through the components and find the nodes needed for each components' visual responses
+    Object.values(motionController.components).forEach(function (component) {
+      var type = component.type,
+          touchPointNodeName = component.touchPointNodeName,
+          visualResponses = component.visualResponses;
+
+      if (type === _motionControllersModule.Constants.ComponentType.TOUCHPAD) {
+        component.touchPointNode = scene.getObjectByName(touchPointNodeName);
+
+        if (component.touchPointNode) {
+          // Attach a touch dot to the touchpad.
+          var sphereGeometry = new _three.SphereGeometry(0.001);
+          var material = new _three.MeshBasicMaterial({
+            color: 0x0000FF
+          });
+          var sphere = new _three.Mesh(sphereGeometry, material);
+          component.touchPointNode.add(sphere);
+        } else {
+          console.warn("Could not find touch dot, ".concat(component.touchPointNodeName, ", in touchpad component ").concat(component.id));
+        }
+      } // Loop through all the visual responses to be applied to this component
+
+
+      Object.values(visualResponses).forEach(function (visualResponse) {
+        var valueNodeName = visualResponse.valueNodeName,
+            minNodeName = visualResponse.minNodeName,
+            maxNodeName = visualResponse.maxNodeName,
+            valueNodeProperty = visualResponse.valueNodeProperty; // If animating a transform, find the two nodes to be interpolated between.
+
+        if (valueNodeProperty === _motionControllersModule.Constants.VisualResponseProperty.TRANSFORM) {
+          visualResponse.minNode = scene.getObjectByName(minNodeName);
+          visualResponse.maxNode = scene.getObjectByName(maxNodeName); // If the extents cannot be found, skip this animation
+
+          if (!visualResponse.minNode) {
+            console.warn("Could not find ".concat(minNodeName, " in the model"));
+            return;
+          }
+
+          if (!visualResponse.maxNode) {
+            console.warn("Could not find ".concat(maxNodeName, " in the model"));
+            return;
+          }
+        } // If the target node cannot be found, skip this animation
+
+
+        visualResponse.valueNode = scene.getObjectByName(valueNodeName);
+
+        if (!visualResponse.valueNode) {
+          console.warn("Could not find ".concat(valueNodeName, " in the model"));
+        }
+      });
+    });
+  }
+
+  function addAssetSceneToControllerModel(controllerModel, scene) {
+    // Find the nodes needed for animation and cache them on the motionController.
+    findNodes(controllerModel.motionController, scene); // Apply any environment map that the mesh already has set.
+
+    if (controllerModel.envMap) {
+      scene.traverse(function (child) {
+        if (child.isMesh) {
+          child.material.envMap = controllerModel.envMap;
+          child.material.needsUpdate = true;
+        }
+      });
+    } // Add the glTF scene to the controllerModel.
+
+
+    controllerModel.add(scene);
+  }
+
+  var XRControllerModelFactory = /*#__PURE__*/function () {
+    function XRControllerModelFactory() {
+      var gltfLoader = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+
+      _classCallCheck(this, XRControllerModelFactory);
+
+      this.gltfLoader = gltfLoader;
+      this.path = DEFAULT_PROFILES_PATH;
+      this._assetCache = {}; // If a GLTFLoader wasn't supplied to the constructor create a new one.
+
+      if (!this.gltfLoader) {
+        this.gltfLoader = new _GLTFLoader.GLTFLoader();
+      }
+    }
+
+    _createClass(XRControllerModelFactory, [{
+      key: "createControllerModel",
+      value: function createControllerModel(controller) {
+        var _this3 = this;
+
+        var controllerModel = new XRControllerModel();
+        var scene = null;
+        controller.addEventListener('connected', function (event) {
+          var xrInputSource = event.data;
+          if (xrInputSource.targetRayMode !== 'tracked-pointer' || !xrInputSource.gamepad) return;
+          (0, _motionControllersModule.fetchProfile)(xrInputSource, _this3.path, DEFAULT_PROFILE).then(function (_ref) {
+            var profile = _ref.profile,
+                assetPath = _ref.assetPath;
+            controllerModel.motionController = new _motionControllersModule.MotionController(xrInputSource, profile, assetPath);
+            var cachedAsset = _this3._assetCache[controllerModel.motionController.assetUrl];
+
+            if (cachedAsset) {
+              scene = cachedAsset.scene.clone();
+              addAssetSceneToControllerModel(controllerModel, scene);
+            } else {
+              if (!_this3.gltfLoader) {
+                throw new Error('GLTFLoader not set.');
+              }
+
+              _this3.gltfLoader.setPath('');
+
+              _this3.gltfLoader.load(controllerModel.motionController.assetUrl, function (asset) {
+                _this3._assetCache[controllerModel.motionController.assetUrl] = asset;
+                scene = asset.scene.clone();
+                addAssetSceneToControllerModel(controllerModel, scene);
+              }, null, function () {
+                throw new Error("Asset ".concat(controllerModel.motionController.assetUrl, " missing or malformed."));
+              });
+            }
+          }).catch(function (err) {
+            console.warn(err);
+          });
+        });
+        controller.addEventListener('disconnected', function () {
+          controllerModel.motionController = null;
+          controllerModel.remove(scene);
+          scene = null;
+        });
+        return controllerModel;
+      }
+    }]);
+
+    return XRControllerModelFactory;
+  }();
+
+  _exports.XRControllerModelFactory = XRControllerModelFactory;
+});