.\n */\nfunction createPermissionDialog (\n denyText, allowText, dialogText, onAllowClicked, onDenyClicked) {\n var buttonsContainer;\n var denyButton;\n var acceptButton;\n\n buttonsContainer = document.createElement('div');\n buttonsContainer.classList.add(DIALOG_BUTTONS_CONTAINER_CLASS);\n\n // Buttons\n denyButton = document.createElement('button');\n denyButton.classList.add(DIALOG_BUTTON_CLASS, DIALOG_DENY_BUTTON_CLASS);\n denyButton.setAttribute(constants.AFRAME_INJECTED, '');\n denyButton.innerHTML = denyText;\n buttonsContainer.appendChild(denyButton);\n\n acceptButton = document.createElement('button');\n acceptButton.classList.add(DIALOG_BUTTON_CLASS, DIALOG_ALLOW_BUTTON_CLASS);\n acceptButton.setAttribute(constants.AFRAME_INJECTED, '');\n acceptButton.innerHTML = allowText;\n buttonsContainer.appendChild(acceptButton);\n\n // Ask for sensor events to be used\n acceptButton.addEventListener('click', function (evt) {\n evt.stopPropagation();\n onAllowClicked();\n });\n\n denyButton.addEventListener('click', function (evt) {\n evt.stopPropagation();\n onDenyClicked();\n });\n\n return createDialog(dialogText, buttonsContainer);\n}\n\nfunction createAlertDialog (closeText, dialogText, onOkClicked) {\n var buttonsContainer;\n var okButton;\n\n buttonsContainer = document.createElement('div');\n buttonsContainer.classList.add(DIALOG_BUTTONS_CONTAINER_CLASS);\n\n // Buttons\n okButton = document.createElement('button');\n okButton.classList.add(DIALOG_BUTTON_CLASS, DIALOG_OK_BUTTON_CLASS);\n okButton.setAttribute(constants.AFRAME_INJECTED, '');\n okButton.innerHTML = closeText;\n buttonsContainer.appendChild(okButton);\n\n // Ask for sensor events to be used\n okButton.addEventListener('click', function (evt) {\n evt.stopPropagation();\n onOkClicked();\n });\n\n return createDialog(dialogText, buttonsContainer);\n}\n\nfunction createDialog (text, buttonsContainerEl) {\n var modalContainer;\n var dialog;\n var dialogTextContainer;\n var dialogText;\n\n modalContainer = document.createElement('div');\n modalContainer.classList.add(MODAL_CLASS);\n modalContainer.setAttribute(constants.AFRAME_INJECTED, '');\n\n dialog = document.createElement('div');\n dialog.className = DIALOG_CLASS;\n dialog.setAttribute(constants.AFRAME_INJECTED, '');\n modalContainer.appendChild(dialog);\n\n dialogTextContainer = document.createElement('div');\n dialogTextContainer.classList.add(DIALOG_TEXT_CONTAINER_CLASS);\n dialog.appendChild(dialogTextContainer);\n\n dialogText = document.createElement('div');\n dialogText.classList.add(DIALOG_TEXT_CLASS);\n dialogText.innerHTML = text;\n dialogTextContainer.appendChild(dialogText);\n\n dialog.appendChild(buttonsContainerEl);\n\n return modalContainer;\n}\n","var registerComponent = require('../../core/component').registerComponent;\n\n/**\n * Component to embed an a-frame scene within the layout of a 2D page.\n */\nmodule.exports.Component = registerComponent('embedded', {\n dependencies: ['vr-mode-ui'],\n\n schema: {default: true},\n\n update: function () {\n var sceneEl = this.el;\n var enterVREl = sceneEl.querySelector('.a-enter-vr');\n if (this.data === true) {\n if (enterVREl) { enterVREl.classList.add('embedded'); }\n sceneEl.removeFullScreenStyles();\n } else {\n if (enterVREl) { enterVREl.classList.remove('embedded'); }\n sceneEl.addFullScreenStyles();\n }\n }\n\n});\n","var register = require('../../core/component').registerComponent;\nvar THREE = require('../../lib/three');\nvar debug = require('../../utils/debug');\n\nvar warn = debug('components:fog:warn');\n\n/**\n * Fog component.\n * Applies only to the scene entity.\n */\nmodule.exports.Component = register('fog', {\n schema: {\n color: {type: 'color', default: '#000'},\n density: {default: 0.00025},\n far: {default: 1000, min: 0},\n near: {default: 1, min: 0},\n type: {default: 'linear', oneOf: ['linear', 'exponential']}\n },\n\n update: function () {\n var data = this.data;\n var el = this.el;\n var fog = this.el.object3D.fog;\n\n if (!el.isScene) {\n warn('Fog component can only be applied to ');\n return;\n }\n\n // (Re)create fog if fog doesn't exist or fog type changed.\n if (!fog || data.type !== fog.name) {\n el.object3D.fog = getFog(data);\n el.systems.material.updateMaterials();\n return;\n }\n\n // Fog data changed. Update fog.\n Object.keys(this.schema).forEach(function (key) {\n var value = data[key];\n if (key === 'color') { value = new THREE.Color(value); }\n fog[key] = value;\n });\n },\n\n /**\n * Remove fog on remove (callback).\n */\n remove: function () {\n var fog = this.el.object3D.fog;\n if (!fog) { return; }\n fog.far = 0;\n fog.near = 0.1;\n }\n});\n\n/**\n * Creates a fog object. Sets fog.name to be able to detect fog type changes.\n *\n * @param {object} data - Fog data.\n * @returns {object} fog\n */\nfunction getFog (data) {\n var fog;\n if (data.type === 'exponential') {\n fog = new THREE.FogExp2(data.color, data.density);\n } else {\n fog = new THREE.Fog(data.color, data.near, data.far);\n }\n fog.name = data.type;\n return fog;\n}\n","/* global AFRAME */\nvar AFRAME_INJECTED = require('../../constants').AFRAME_INJECTED;\nvar pkg = require('../../../package');\nvar registerComponent = require('../../core/component').registerComponent;\nvar utils = require('../../utils/');\n\n/**\n * 0.4.2 to 0.4.x\n * Will need to update this when A-Frame goes to 1.x.x.\n */\nfunction getFuzzyPatchVersion (version) {\n var split = version.split('.');\n split[2] = 'x';\n return split.join('.');\n}\n\nvar INSPECTOR_DEV_URL = 'https://aframe.io/aframe-inspector/dist/aframe-inspector.js';\nvar INSPECTOR_RELEASE_URL = 'https://unpkg.com/aframe-inspector@' + getFuzzyPatchVersion(pkg.version) + '/dist/aframe-inspector.min.js';\nvar INSPECTOR_URL = process.env.INSPECTOR_VERSION === 'dev' ? INSPECTOR_DEV_URL : INSPECTOR_RELEASE_URL;\nvar LOADING_MESSAGE = 'Loading Inspector';\nvar LOADING_ERROR_MESSAGE = 'Error loading Inspector';\n\nmodule.exports.Component = registerComponent('inspector', {\n schema: {\n url: {default: INSPECTOR_URL}\n },\n\n init: function () {\n this.firstPlay = true;\n this.onKeydown = this.onKeydown.bind(this);\n this.onMessage = this.onMessage.bind(this);\n this.initOverlay();\n window.addEventListener('keydown', this.onKeydown);\n window.addEventListener('message', this.onMessage);\n },\n\n play: function () {\n var urlParam;\n if (!this.firstPlay) { return; }\n urlParam = utils.getUrlParameter('inspector');\n if (urlParam !== 'false' && !!urlParam) {\n this.openInspector();\n this.firstPlay = false;\n }\n },\n\n initOverlay: function () {\n var dotsHTML = '...';\n this.loadingMessageEl = document.createElement('div');\n this.loadingMessageEl.classList.add('a-inspector-loader');\n this.loadingMessageEl.innerHTML = LOADING_MESSAGE + dotsHTML;\n },\n\n remove: function () {\n this.removeEventListeners();\n },\n\n /**\n * + + i keyboard shortcut.\n */\n onKeydown: function (evt) {\n var shortcutPressed = evt.keyCode === 73 && (evt.ctrlKey && evt.altKey || evt.getModifierState('AltGraph'));\n if (!shortcutPressed) { return; }\n this.openInspector();\n },\n\n showLoader: function () {\n document.body.appendChild(this.loadingMessageEl);\n },\n\n hideLoader: function () {\n document.body.removeChild(this.loadingMessageEl);\n },\n\n /**\n * postMessage. aframe.io uses this to create a button on examples to open Inspector.\n */\n onMessage: function (evt) {\n if (evt.data === 'INJECT_AFRAME_INSPECTOR') { this.openInspector(); }\n },\n\n openInspector: function (focusEl) {\n var self = this;\n var script;\n\n // Already injected. Open.\n if (AFRAME.INSPECTOR || AFRAME.inspectorInjected) {\n AFRAME.INSPECTOR.open(focusEl);\n return;\n }\n\n this.showLoader();\n\n // Inject.\n script = document.createElement('script');\n script.src = this.data.url;\n script.setAttribute('data-name', 'aframe-inspector');\n script.setAttribute(AFRAME_INJECTED, '');\n script.onload = function () {\n AFRAME.INSPECTOR.open(focusEl);\n self.hideLoader();\n self.removeEventListeners();\n };\n script.onerror = function () {\n self.loadingMessageEl.innerHTML = LOADING_ERROR_MESSAGE;\n };\n document.head.appendChild(script);\n AFRAME.inspectorInjected = true;\n },\n\n removeEventListeners: function () {\n window.removeEventListener('keydown', this.onKeydown);\n window.removeEventListener('message', this.onMessage);\n }\n});\n","var registerComponent = require('../../core/component').registerComponent;\nvar shouldCaptureKeyEvent = require('../../utils/').shouldCaptureKeyEvent;\n\nmodule.exports.Component = registerComponent('keyboard-shortcuts', {\n schema: {\n enterVR: {default: true},\n exitVR: {default: true}\n },\n\n init: function () {\n this.onKeyup = this.onKeyup.bind(this);\n },\n\n update: function (oldData) {\n var data = this.data;\n this.enterVREnabled = data.enterVR;\n },\n\n play: function () {\n window.addEventListener('keyup', this.onKeyup, false);\n },\n\n pause: function () {\n window.removeEventListener('keyup', this.onKeyup);\n },\n\n onKeyup: function (evt) {\n var scene = this.el;\n if (!shouldCaptureKeyEvent(evt)) { return; }\n if (this.enterVREnabled && evt.keyCode === 70) { // f.\n scene.enterVR();\n }\n if (this.enterVREnabled && evt.keyCode === 27) { // escape.\n scene.exitVR();\n }\n }\n});\n","var debug = require('../../utils/debug');\nvar registerComponent = require('../../core/component').registerComponent;\n\nvar warn = debug('components:pool:warn');\n\n/**\n * Pool component to reuse entities.\n * Avoids creating and destroying the same kind of entities.\n * Helps reduce GC pauses. For example in a game to reuse enemies entities.\n *\n * @member {array} availableEls - Available entities in the pool.\n * @member {array} usedEls - Entities of the pool in use.\n */\nmodule.exports.Component = registerComponent('pool', {\n schema: {\n container: {default: ''},\n mixin: {default: ''},\n size: {default: 0},\n dynamic: {default: false}\n },\n\n multiple: true,\n\n initPool: function () {\n var i;\n\n this.availableEls = [];\n this.usedEls = [];\n\n if (!this.data.mixin) {\n warn('No mixin provided for pool component.');\n }\n\n if (this.data.container) {\n this.container = document.querySelector(this.data.container);\n if (!this.container) {\n warn('Container ' + this.data.container + ' not found.');\n }\n }\n this.container = this.container || this.el;\n\n for (i = 0; i < this.data.size; ++i) {\n this.createEntity();\n }\n },\n\n update: function (oldData) {\n var data = this.data;\n if (oldData.mixin !== data.mixin || oldData.size !== data.size) {\n this.initPool();\n }\n },\n\n /**\n * Add a new entity to the list of available entities.\n */\n createEntity: function () {\n var el;\n el = document.createElement('a-entity');\n el.play = this.wrapPlay(el.play);\n el.setAttribute('mixin', this.data.mixin);\n el.object3D.visible = false;\n el.pause();\n this.container.appendChild(el);\n this.availableEls.push(el);\n\n var usedEls = this.usedEls;\n el.addEventListener('loaded', function () {\n if (usedEls.indexOf(el) !== -1) { return; }\n el.object3DParent = el.object3D.parent;\n el.object3D.parent.remove(el.object3D);\n });\n },\n\n /**\n * Play wrapper for pooled entities. When pausing and playing a scene, don't want to play\n * entities that are not in use.\n */\n wrapPlay: function (playMethod) {\n var usedEls = this.usedEls;\n return function () {\n if (usedEls.indexOf(this) === -1) { return; }\n playMethod.call(this);\n };\n },\n\n /**\n * Used to request one of the available entities of the pool.\n */\n requestEntity: function () {\n var el;\n if (this.availableEls.length === 0) {\n if (this.data.dynamic === false) {\n warn('Requested entity from empty pool: ' + this.attrName);\n return;\n } else {\n warn('Requested entity from empty pool. This pool is dynamic and will resize ' +\n 'automatically. You might want to increase its initial size: ' + this.attrName);\n }\n this.createEntity();\n }\n el = this.availableEls.shift();\n this.usedEls.push(el);\n if (el.object3DParent) {\n el.object3DParent.add(el.object3D);\n this.updateRaycasters();\n }\n el.object3D.visible = true;\n return el;\n },\n\n /**\n * Used to return a used entity to the pool.\n */\n returnEntity: function (el) {\n var index = this.usedEls.indexOf(el);\n if (index === -1) {\n warn('The returned entity was not previously pooled from ' + this.attrName);\n return;\n }\n this.usedEls.splice(index, 1);\n this.availableEls.push(el);\n el.object3DParent = el.object3D.parent;\n el.object3D.parent.remove(el.object3D);\n this.updateRaycasters();\n el.object3D.visible = false;\n el.pause();\n return el;\n },\n\n updateRaycasters () {\n var raycasterEls = document.querySelectorAll('[raycaster]');\n\n raycasterEls.forEach(function (el) {\n el.components['raycaster'].setDirty();\n });\n }\n});\n","/* global THREE, XRWebGLBinding */\nvar register = require('../../core/component').registerComponent;\n\n// source: view-source:https://storage.googleapis.com/chromium-webxr-test/r886480/proposals/lighting-estimation.html\nfunction updateLights (estimate, probeLight, directionalLight, directionalLightPosition) {\n var intensityScalar =\n Math.max(estimate.primaryLightIntensity.x,\n Math.max(estimate.primaryLightIntensity.y,\n estimate.primaryLightIntensity.z));\n\n probeLight.sh.fromArray(estimate.sphericalHarmonicsCoefficients);\n probeLight.intensity = 1;\n\n if (directionalLight) {\n directionalLight.color.setRGB(\n estimate.primaryLightIntensity.x / intensityScalar,\n estimate.primaryLightIntensity.y / intensityScalar,\n estimate.primaryLightIntensity.z / intensityScalar);\n\n directionalLight.intensity = intensityScalar;\n directionalLightPosition.copy(estimate.primaryLightDirection);\n }\n}\n\nmodule.exports.Component = register('reflection', {\n schema: {\n directionalLight: { type: 'selector' }\n },\n init: function () {\n var self = this;\n this.cubeRenderTarget = new THREE.WebGLCubeRenderTarget(16);\n this.cubeCamera = new THREE.CubeCamera(0.1, 1000, this.cubeRenderTarget);\n this.lightingEstimationTexture = (new THREE.WebGLCubeRenderTarget(16)).texture;\n this.needsVREnvironmentUpdate = true;\n\n // Update WebXR to support light-estimation\n var webxrData = this.el.getAttribute('webxr');\n var optionalFeaturesArray = webxrData.optionalFeatures;\n if (!optionalFeaturesArray.includes('light-estimation')) {\n optionalFeaturesArray.push('light-estimation');\n this.el.setAttribute('webxr', webxrData);\n }\n\n this.el.addEventListener('enter-vr', function () {\n var renderer = self.el.renderer;\n var session = renderer.xr.getSession();\n if (\n session.requestLightProbe && self.el.is('ar-mode')\n ) {\n self.startLightProbe();\n }\n });\n\n this.el.addEventListener('exit-vr', function () {\n self.stopLightProbe();\n });\n\n this.el.object3D.environment = this.cubeRenderTarget.texture;\n },\n stopLightProbe: function () {\n this.xrLightProbe = null;\n if (this.probeLight) {\n this.probeLight.components.light.light.intensity = 0;\n }\n this.needsVREnvironmentUpdate = true;\n this.el.object3D.environment = this.cubeRenderTarget.texture;\n },\n startLightProbe: function () {\n this.needsLightProbeUpdate = true;\n },\n setupLightProbe: function () {\n var renderer = this.el.renderer;\n var xrSession = renderer.xr.getSession();\n var self = this;\n var gl = renderer.getContext();\n\n if (!this.probeLight) {\n var probeLight = document.createElement('a-light');\n probeLight.setAttribute('type', 'probe');\n probeLight.setAttribute('intensity', 0);\n this.el.appendChild(probeLight);\n this.probeLight = probeLight;\n }\n\n // Ensure that we have any extensions needed to use the preferred cube map format.\n switch (xrSession.preferredReflectionFormat) {\n case 'srgba8':\n gl.getExtension('EXT_sRGB');\n break;\n\n case 'rgba16f':\n gl.getExtension('OES_texture_half_float');\n break;\n }\n\n this.glBinding = new XRWebGLBinding(xrSession, gl);\n gl.getExtension('EXT_sRGB');\n gl.getExtension('OES_texture_half_float');\n\n xrSession.requestLightProbe()\n .then(function (lightProbe) {\n self.xrLightProbe = lightProbe;\n lightProbe.addEventListener('reflectionchange', self.updateXRCubeMap.bind(self));\n })\n .catch(function (err) {\n console.warn('Lighting estimation not supported: ' + err.message);\n console.warn('Are you missing: webxr=\"optionalFeatures: light-estimation;\" from ?');\n });\n },\n updateXRCubeMap: function () {\n // Update Cube Map, cubeMap maybe some unavailable on some hardware\n var renderer = this.el.renderer;\n var cubeMap = this.glBinding.getReflectionCubeMap(this.xrLightProbe);\n if (cubeMap) {\n var rendererProps = renderer.properties.get(this.lightingEstimationTexture);\n rendererProps.__webglTexture = cubeMap;\n this.lightingEstimationTexture.needsPMREMUpdate = true;\n this.el.object3D.environment = this.lightingEstimationTexture;\n }\n },\n tick: function () {\n var scene = this.el.object3D;\n var renderer = this.el.renderer;\n var frame = this.el.frame;\n\n if (frame && this.xrLightProbe) {\n // light estimate may not yet be available, it takes a few frames to start working\n var estimate = frame.getLightEstimate(this.xrLightProbe);\n\n if (estimate) {\n updateLights(\n estimate,\n this.probeLight.components.light.light,\n this.data.directionalLight && this.data.directionalLight.components.light.light,\n this.data.directionalLight && this.data.directionalLight.object3D.position\n );\n }\n }\n\n if (this.needsVREnvironmentUpdate) {\n scene.environment = null;\n this.needsVREnvironmentUpdate = false;\n this.cubeCamera.position.set(0, 1.6, 0);\n this.cubeCamera.update(renderer, scene);\n scene.environment = this.cubeRenderTarget.texture;\n }\n\n if (this.needsLightProbeUpdate && frame) {\n // wait until the XR Session has started before trying to make\n // the light probe\n this.setupLightProbe();\n this.needsLightProbeUpdate = false;\n }\n },\n\n remove: function () {\n this.el.object3D.environment = null;\n if (this.probeLight) {\n this.el.removeChild(this.probeLight);\n }\n }\n});\n","/* global ImageData, URL */\nvar registerComponent = require('../../core/component').registerComponent;\nvar THREE = require('../../lib/three');\n\nvar VERTEX_SHADER = [\n 'attribute vec3 position;',\n 'attribute vec2 uv;',\n 'uniform mat4 projectionMatrix;',\n 'uniform mat4 modelViewMatrix;',\n 'varying vec2 vUv;',\n 'void main() {',\n ' vUv = vec2( 1.- uv.x, uv.y );',\n ' gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',\n '}'\n].join('\\n');\n\nvar FRAGMENT_SHADER = [\n 'precision mediump float;',\n 'uniform samplerCube map;',\n 'varying vec2 vUv;',\n '#define M_PI 3.141592653589793238462643383279',\n 'void main() {',\n ' vec2 uv = vUv;',\n ' float longitude = uv.x * 2. * M_PI - M_PI + M_PI / 2.;',\n ' float latitude = uv.y * M_PI;',\n ' vec3 dir = vec3(',\n ' - sin( longitude ) * sin( latitude ),',\n ' cos( latitude ),',\n ' - cos( longitude ) * sin( latitude )',\n ' );',\n ' normalize( dir );',\n ' gl_FragColor = vec4( textureCube( map, dir ).rgb, 1.0 );',\n '}'\n].join('\\n');\n\n/**\n * Component to take screenshots of the scene using a keboard shortcut (alt+s).\n * It can be configured to either take 360° captures (`equirectangular`)\n * or regular screenshots (`projection`)\n *\n * This is based on https://github.com/spite/THREE.CubemapToEquirectangular\n * To capture an equirectangular projection of the scene a THREE.CubeCamera is used\n * The cube map produced by the CubeCamera is projected on a quad and then rendered to\n * WebGLRenderTarget with an ortographic camera.\n */\nmodule.exports.Component = registerComponent('screenshot', {\n schema: {\n width: {default: 4096},\n height: {default: 2048},\n camera: {type: 'selector'}\n },\n\n init: function () {\n var el = this.el;\n var self = this;\n\n if (el.renderer) {\n setup();\n } else {\n el.addEventListener('render-target-loaded', setup);\n }\n\n function setup () {\n var gl = el.renderer.getContext();\n if (!gl) { return; }\n self.cubeMapSize = gl.getParameter(gl.MAX_CUBE_MAP_TEXTURE_SIZE);\n self.material = new THREE.RawShaderMaterial({\n uniforms: {map: {type: 't', value: null}},\n vertexShader: VERTEX_SHADER,\n fragmentShader: FRAGMENT_SHADER,\n side: THREE.DoubleSide\n });\n self.quad = new THREE.Mesh(\n new THREE.PlaneGeometry(1, 1),\n self.material\n );\n self.quad.visible = false;\n self.camera = new THREE.OrthographicCamera(-1 / 2, 1 / 2, 1 / 2, -1 / 2, -10000, 10000);\n self.canvas = document.createElement('canvas');\n self.ctx = self.canvas.getContext('2d');\n el.object3D.add(self.quad);\n self.onKeyDown = self.onKeyDown.bind(self);\n }\n },\n\n getRenderTarget: function (width, height) {\n return new THREE.WebGLRenderTarget(width, height, {\n colorSpace: this.el.sceneEl.renderer.outputColorSpace,\n minFilter: THREE.LinearFilter,\n magFilter: THREE.LinearFilter,\n wrapS: THREE.ClampToEdgeWrapping,\n wrapT: THREE.ClampToEdgeWrapping,\n format: THREE.RGBAFormat,\n type: THREE.UnsignedByteType\n });\n },\n\n resize: function (width, height) {\n // Resize quad.\n this.quad.scale.set(width, height, 1);\n\n // Resize camera.\n this.camera.left = -1 * width / 2;\n this.camera.right = width / 2;\n this.camera.top = height / 2;\n this.camera.bottom = -1 * height / 2;\n this.camera.updateProjectionMatrix();\n\n // Resize canvas.\n this.canvas.width = width;\n this.canvas.height = height;\n },\n\n play: function () {\n window.addEventListener('keydown', this.onKeyDown);\n },\n\n /**\n * + + s = Regular screenshot.\n * + + + s = Equirectangular screenshot.\n */\n onKeyDown: function (evt) {\n var shortcutPressed = evt.keyCode === 83 && evt.ctrlKey && evt.altKey;\n if (!this.data || !shortcutPressed) { return; }\n var projection = evt.shiftKey ? 'equirectangular' : 'perspective';\n this.capture(projection);\n },\n\n /**\n * Capture a screenshot of the scene.\n *\n * @param {string} projection - Screenshot projection (equirectangular or perspective).\n */\n setCapture: function (projection) {\n var el = this.el;\n var size;\n var camera;\n var cubeCamera;\n var cubeRenderTarget;\n // Configure camera.\n if (projection === 'perspective') {\n // Quad is only used in equirectangular mode. Hide it in this case.\n this.quad.visible = false;\n // Use scene camera.\n camera = (this.data.camera && this.data.camera.components.camera.camera) || el.camera;\n size = {width: this.data.width, height: this.data.height};\n } else {\n // Use ortho camera.\n camera = this.camera;\n cubeRenderTarget = new THREE.WebGLCubeRenderTarget(\n Math.min(this.cubeMapSize, 2048),\n {\n format: THREE.RGBFormat,\n generateMipmaps: true,\n minFilter: THREE.LinearMipmapLinearFilter,\n colorSpace: THREE.SRGBColorSpace\n });\n // Create cube camera and copy position from scene camera.\n cubeCamera = new THREE.CubeCamera(el.camera.near, el.camera.far, cubeRenderTarget);\n // Copy camera position into cube camera;\n el.camera.getWorldPosition(cubeCamera.position);\n el.camera.getWorldQuaternion(cubeCamera.quaternion);\n // Render scene with cube camera.\n cubeCamera.update(el.renderer, el.object3D);\n this.quad.material.uniforms.map.value = cubeCamera.renderTarget.texture;\n size = {width: this.data.width, height: this.data.height};\n // Use quad to project image taken by the cube camera.\n this.quad.visible = true;\n }\n return {\n camera: camera,\n size: size,\n projection: projection\n };\n },\n\n /**\n * Maintained for backwards compatibility.\n */\n capture: function (projection) {\n var isVREnabled = this.el.renderer.xr.enabled;\n var renderer = this.el.renderer;\n var params;\n // Disable VR.\n renderer.xr.enabled = false;\n params = this.setCapture(projection);\n this.renderCapture(params.camera, params.size, params.projection);\n // Trigger file download.\n this.saveCapture();\n // Restore VR.\n renderer.xr.enabled = isVREnabled;\n },\n\n /**\n * Return canvas instead of triggering download (e.g., for uploading blob to server).\n */\n getCanvas: function (projection) {\n var isVREnabled = this.el.renderer.xr.enabled;\n var renderer = this.el.renderer;\n // Disable VR.\n var params = this.setCapture(projection);\n renderer.xr.enabled = false;\n this.renderCapture(params.camera, params.size, params.projection);\n // Restore VR.\n renderer.xr.enabled = isVREnabled;\n return this.canvas;\n },\n\n renderCapture: function (camera, size, projection) {\n var autoClear = this.el.renderer.autoClear;\n var el = this.el;\n var imageData;\n var output;\n var pixels;\n var renderer = el.renderer;\n // Create rendering target and buffer to store the read pixels.\n output = this.getRenderTarget(size.width, size.height);\n pixels = new Uint8Array(4 * size.width * size.height);\n // Resize quad, camera, and canvas.\n this.resize(size.width, size.height);\n // Render scene to render target.\n renderer.autoClear = true;\n renderer.clear();\n renderer.setRenderTarget(output);\n renderer.render(el.object3D, camera);\n renderer.autoClear = autoClear;\n // Read image pizels back.\n renderer.readRenderTargetPixels(output, 0, 0, size.width, size.height, pixels);\n renderer.setRenderTarget(null);\n if (projection === 'perspective') {\n pixels = this.flipPixelsVertically(pixels, size.width, size.height);\n }\n imageData = new ImageData(new Uint8ClampedArray(pixels), size.width, size.height);\n // Hide quad after projecting the image.\n this.quad.visible = false;\n // Copy pixels into canvas.\n this.ctx.putImageData(imageData, 0, 0);\n },\n\n flipPixelsVertically: function (pixels, width, height) {\n var flippedPixels = pixels.slice(0);\n for (var x = 0; x < width; ++x) {\n for (var y = 0; y < height; ++y) {\n flippedPixels[x * 4 + y * width * 4] = pixels[x * 4 + (height - y) * width * 4];\n flippedPixels[x * 4 + 1 + y * width * 4] = pixels[x * 4 + 1 + (height - y) * width * 4];\n flippedPixels[x * 4 + 2 + y * width * 4] = pixels[x * 4 + 2 + (height - y) * width * 4];\n flippedPixels[x * 4 + 3 + y * width * 4] = pixels[x * 4 + 3 + (height - y) * width * 4];\n }\n }\n return flippedPixels;\n },\n\n /**\n * Download capture to file.\n */\n saveCapture: function () {\n this.canvas.toBlob(function (blob) {\n var fileName = 'screenshot-' + document.title.toLowerCase() + '-' + Date.now() + '.png';\n var linkEl = document.createElement('a');\n var url = URL.createObjectURL(blob);\n linkEl.href = url;\n linkEl.setAttribute('download', fileName);\n linkEl.innerHTML = 'downloading...';\n linkEl.style.display = 'none';\n document.body.appendChild(linkEl);\n setTimeout(function () {\n linkEl.click();\n document.body.removeChild(linkEl);\n }, 1);\n }, 'image/png');\n }\n});\n","var registerComponent = require('../../core/component').registerComponent;\nvar RStats = require('../../../vendor/rStats');\nvar utils = require('../../utils');\nrequire('../../../vendor/rStats.extras');\nrequire('../../lib/rStatsAframe');\n\nvar AFrameStats = window.aframeStats;\nvar bind = utils.bind;\nvar HIDDEN_CLASS = 'a-hidden';\nvar ThreeStats = window.threeStats;\n\n/**\n * Stats appended to document.body by RStats.\n */\nmodule.exports.Component = registerComponent('stats', {\n schema: {default: true},\n\n init: function () {\n var scene = this.el;\n\n if (utils.getUrlParameter('stats') === 'false') { return; }\n\n this.stats = createStats(scene);\n this.statsEl = document.querySelector('.rs-base');\n\n this.hideBound = bind(this.hide, this);\n this.showBound = bind(this.show, this);\n\n scene.addEventListener('enter-vr', this.hideBound);\n scene.addEventListener('exit-vr', this.showBound);\n },\n\n update: function () {\n if (!this.stats) { return; }\n return (!this.data) ? this.hide() : this.show();\n },\n\n remove: function () {\n this.el.removeEventListener('enter-vr', this.hideBound);\n this.el.removeEventListener('exit-vr', this.showBound);\n if (!this.statsEl) { return; } // Scene detached.\n this.statsEl.parentNode.removeChild(this.statsEl);\n },\n\n tick: function () {\n var stats = this.stats;\n\n if (!stats) { return; }\n\n stats('rAF').tick();\n stats('FPS').frame();\n stats().update();\n },\n\n hide: function () {\n this.statsEl.classList.add(HIDDEN_CLASS);\n },\n\n show: function () {\n this.statsEl.classList.remove(HIDDEN_CLASS);\n }\n});\n\nfunction createStats (scene) {\n var threeStats = new ThreeStats(scene.renderer);\n var aframeStats = new AFrameStats(scene);\n var plugins = scene.isMobile ? [] : [threeStats, aframeStats];\n return new RStats({\n css: [], // Our stylesheet is injected from `src/index.js`.\n values: {\n fps: {caption: 'fps', below: 30}\n },\n groups: [\n {caption: 'Framerate', values: ['fps', 'raf']}\n ],\n plugins: plugins\n });\n}\n","var registerComponent = require('../../core/component').registerComponent;\nvar constants = require('../../constants/');\nvar utils = require('../../utils/');\nvar bind = utils.bind;\n\nvar ENTER_VR_CLASS = 'a-enter-vr';\nvar ENTER_AR_CLASS = 'a-enter-ar';\nvar ENTER_VR_BTN_CLASS = 'a-enter-vr-button';\nvar ENTER_AR_BTN_CLASS = 'a-enter-ar-button';\nvar HIDDEN_CLASS = 'a-hidden';\nvar ORIENTATION_MODAL_CLASS = 'a-orientation-modal';\n\n/**\n * UI for entering VR mode.\n */\nmodule.exports.Component = registerComponent('vr-mode-ui', {\n dependencies: ['canvas'],\n\n schema: {\n enabled: {default: true},\n cardboardModeEnabled: {default: false},\n enterVRButton: {default: ''},\n enterVREnabled: {default: true},\n enterARButton: {default: ''},\n enterAREnabled: {default: false}\n },\n\n init: function () {\n var self = this;\n var sceneEl = this.el;\n\n if (utils.getUrlParameter('ui') === 'false') { return; }\n\n this.insideLoader = false;\n this.enterVREl = null;\n this.enterAREl = null;\n this.orientationModalEl = null;\n this.bindMethods();\n\n // Hide/show VR UI when entering/exiting VR mode.\n sceneEl.addEventListener('enter-vr', this.updateEnterInterfaces);\n sceneEl.addEventListener('exit-vr', this.updateEnterInterfaces);\n sceneEl.addEventListener('update-vr-devices', this.updateEnterInterfaces);\n\n window.addEventListener('message', function (event) {\n if (event.data.type === 'loaderReady') {\n self.insideLoader = true;\n self.remove();\n }\n });\n\n // Modal that tells the user to change orientation if in portrait.\n window.addEventListener('orientationchange', this.toggleOrientationModalIfNeeded);\n },\n\n bindMethods: function () {\n this.onEnterVRButtonClick = bind(this.onEnterVRButtonClick, this);\n this.onEnterARButtonClick = bind(this.onEnterARButtonClick, this);\n this.onModalClick = bind(this.onModalClick, this);\n this.toggleOrientationModalIfNeeded = bind(this.toggleOrientationModalIfNeeded, this);\n this.updateEnterInterfaces = bind(this.updateEnterInterfaces, this);\n },\n\n /**\n * Exit VR when modal clicked.\n */\n onModalClick: function () {\n this.el.exitVR();\n },\n\n /**\n * Enter VR when clicked.\n */\n onEnterVRButtonClick: function () {\n this.el.enterVR();\n },\n\n /**\n * Enter AR when clicked.\n */\n onEnterARButtonClick: function () {\n this.el.enterAR();\n },\n\n update: function () {\n var data = this.data;\n var sceneEl = this.el;\n\n if (!data.enabled || this.insideLoader || utils.getUrlParameter('ui') === 'false') {\n return this.remove();\n }\n\n if (this.enterVREl || this.enterAREl || this.orientationModalEl) { return; }\n\n // Add UI if enabled and not already present.\n if (!this.enterVREl && data.enterVREnabled) {\n if (data.enterVRButton) {\n // Custom button.\n this.enterVREl = document.querySelector(data.enterVRButton);\n this.enterVREl.addEventListener('click', this.onEnterVRButtonClick);\n } else {\n this.enterVREl = createEnterVRButton(this.onEnterVRButtonClick);\n sceneEl.appendChild(this.enterVREl);\n }\n }\n\n if (!this.enterAREl && data.enterAREnabled) {\n if (data.enterARButton) {\n // Custom button.\n this.enterAREl = document.querySelector(data.enterARButton);\n this.enterAREl.addEventListener('click', this.onEnterARButtonClick);\n } else {\n this.enterAREl = createEnterARButton(this.onEnterARButtonClick);\n sceneEl.appendChild(this.enterAREl);\n }\n }\n\n this.orientationModalEl = createOrientationModal(this.onModalClick);\n sceneEl.appendChild(this.orientationModalEl);\n\n this.updateEnterInterfaces();\n },\n\n remove: function () {\n [this.enterVREl, this.enterAREl, this.orientationModalEl].forEach(function (uiElement) {\n if (uiElement && uiElement.parentNode) {\n uiElement.parentNode.removeChild(uiElement);\n }\n });\n this.enterVREl = undefined;\n this.enterAREl = undefined;\n this.orientationModalEl = undefined;\n },\n\n updateEnterInterfaces: function () {\n this.toggleEnterVRButtonIfNeeded();\n this.toggleEnterARButtonIfNeeded();\n this.toggleOrientationModalIfNeeded();\n },\n\n toggleEnterVRButtonIfNeeded: function () {\n var sceneEl = this.el;\n if (!this.enterVREl) { return; }\n if (sceneEl.is('vr-mode') ||\n ((sceneEl.isMobile || utils.device.isMobileDeviceRequestingDesktopSite()) && !this.data.cardboardModeEnabled && !utils.device.checkVRSupport())) {\n this.enterVREl.classList.add(HIDDEN_CLASS);\n } else {\n if (!utils.device.checkVRSupport()) { this.enterVREl.classList.add('fullscreen'); }\n this.enterVREl.classList.remove(HIDDEN_CLASS);\n }\n },\n\n toggleEnterARButtonIfNeeded: function () {\n var sceneEl = this.el;\n if (!this.enterAREl) { return; }\n // Hide the button while in a session, or if AR is not supported.\n if (sceneEl.is('vr-mode') || !utils.device.checkARSupport()) {\n this.enterAREl.classList.add(HIDDEN_CLASS);\n } else {\n this.enterAREl.classList.remove(HIDDEN_CLASS);\n }\n },\n\n toggleOrientationModalIfNeeded: function () {\n var sceneEl = this.el;\n var orientationModalEl = this.orientationModalEl;\n if (!orientationModalEl || !sceneEl.isMobile) { return; }\n if (!utils.device.isLandscape() && sceneEl.is('vr-mode')) {\n // Show if in VR mode on portrait.\n orientationModalEl.classList.remove(HIDDEN_CLASS);\n } else {\n orientationModalEl.classList.add(HIDDEN_CLASS);\n }\n }\n});\n\n/**\n * Create a button that when clicked will enter into stereo-rendering mode for VR.\n *\n * Structure: \n *\n * @param {function} onClick - click event handler\n * @returns {Element} Wrapper
.\n */\nfunction createEnterVRButton (onClick) {\n var vrButton;\n var wrapper;\n\n // Create elements.\n wrapper = document.createElement('div');\n wrapper.classList.add(ENTER_VR_CLASS);\n wrapper.setAttribute(constants.AFRAME_INJECTED, '');\n vrButton = document.createElement('button');\n vrButton.className = ENTER_VR_BTN_CLASS;\n vrButton.setAttribute('title',\n 'Enter VR mode with a headset or fullscreen without');\n vrButton.setAttribute(constants.AFRAME_INJECTED, '');\n if (utils.device.isMobile()) { applyStickyHoverFix(vrButton); }\n // Insert elements.\n wrapper.appendChild(vrButton);\n vrButton.addEventListener('click', function (evt) {\n onClick();\n evt.stopPropagation();\n });\n return wrapper;\n}\n\n/**\n * Create a button that when clicked will enter into AR mode\n *\n * Structure: \n *\n * @param {function} onClick - click event handler\n * @returns {Element} Wrapper
.\n */\nfunction createEnterARButton (onClick) {\n var arButton;\n var wrapper;\n\n // Create elements.\n wrapper = document.createElement('div');\n wrapper.classList.add(ENTER_AR_CLASS);\n wrapper.setAttribute(constants.AFRAME_INJECTED, '');\n arButton = document.createElement('button');\n arButton.className = ENTER_AR_BTN_CLASS;\n arButton.setAttribute('title',\n 'Enter AR mode with a headset or handheld device.');\n arButton.setAttribute(constants.AFRAME_INJECTED, '');\n if (utils.device.isMobile()) { applyStickyHoverFix(arButton); }\n // Insert elements.\n wrapper.appendChild(arButton);\n arButton.addEventListener('click', function (evt) {\n onClick();\n evt.stopPropagation();\n });\n return wrapper;\n}\n\n/**\n * Creates a modal dialog to request the user to switch to landscape orientation.\n *\n * @param {function} onClick - click event handler\n * @returns {Element} Wrapper
.\n */\nfunction createOrientationModal (onClick) {\n var modal = document.createElement('div');\n modal.className = ORIENTATION_MODAL_CLASS;\n modal.classList.add(HIDDEN_CLASS);\n modal.setAttribute(constants.AFRAME_INJECTED, '');\n\n var exit = document.createElement('button');\n exit.setAttribute(constants.AFRAME_INJECTED, '');\n exit.innerHTML = 'Exit VR';\n\n // Exit VR on close.\n exit.addEventListener('click', onClick);\n\n modal.appendChild(exit);\n\n return modal;\n}\n\n/**\n * CSS hover state is sticky in iOS (as in 12/18/2019)\n * They are not removed on mouseleave and this function applies a class\n * to resets the style.\n *\n * @param {function} buttonEl - Button element\n */\nfunction applyStickyHoverFix (buttonEl) {\n buttonEl.addEventListener('touchstart', function () {\n buttonEl.classList.remove('resethover');\n });\n buttonEl.addEventListener('touchend', function () {\n buttonEl.classList.add('resethover');\n });\n}\n","var component = require('../core/component');\nvar THREE = require('../lib/three');\nvar bind = require('../utils/bind');\nvar registerComponent = component.registerComponent;\n\n/**\n * Shadow component.\n *\n * When applied to an entity, that entity's geometry and any descendants will cast or receive\n * shadows as specified by the `cast` and `receive` properties.\n */\nmodule.exports.Component = registerComponent('shadow', {\n schema: {\n cast: {default: true},\n receive: {default: true}\n },\n\n init: function () {\n this.onMeshChanged = bind(this.update, this);\n this.el.addEventListener('object3dset', this.onMeshChanged);\n this.system.setShadowMapEnabled(true);\n },\n\n update: function () {\n var data = this.data;\n this.updateDescendants(data.cast, data.receive);\n },\n\n remove: function () {\n var el = this.el;\n el.removeEventListener('object3dset', this.onMeshChanged);\n this.updateDescendants(false, false);\n },\n\n updateDescendants: function (cast, receive) {\n var sceneEl = this.el.sceneEl;\n this.el.object3D.traverse(function (node) {\n if (!(node instanceof THREE.Mesh)) { return; }\n\n node.castShadow = cast;\n node.receiveShadow = receive;\n\n // If scene has already rendered, materials must be updated.\n if (sceneEl.hasLoaded && node.material) {\n var materials = Array.isArray(node.material) ? node.material : [node.material];\n for (var i = 0; i < materials.length; i++) {\n materials[i].needsUpdate = true;\n }\n }\n });\n }\n});\n","var registerComponent = require('../core/component').registerComponent;\nvar debug = require('../utils/debug');\nvar THREE = require('../lib/three');\n\nvar warn = debug('components:sound:warn');\n\n/**\n * Sound component.\n */\nmodule.exports.Component = registerComponent('sound', {\n schema: {\n autoplay: {default: false},\n distanceModel: {default: 'inverse', oneOf: ['linear', 'inverse', 'exponential']},\n loop: {default: false},\n maxDistance: {default: 10000},\n on: {default: ''},\n poolSize: {default: 1},\n positional: {default: true},\n refDistance: {default: 1},\n rolloffFactor: {default: 1},\n src: {type: 'audio'},\n volume: {default: 1}\n },\n\n multiple: true,\n\n init: function () {\n var self = this;\n\n this.listener = null;\n this.audioLoader = new THREE.AudioLoader();\n this.pool = new THREE.Group();\n this.loaded = false;\n this.mustPlay = false;\n\n // Don't pass evt because playSound takes a function as parameter.\n this.playSoundBound = function () { self.playSound(); };\n },\n\n update: function (oldData) {\n var data = this.data;\n var i;\n var sound;\n var srcChanged = data.src !== oldData.src;\n\n // Create new sound if not yet created or changing `src`.\n if (srcChanged) {\n if (!data.src) { return; }\n this.setupSound();\n }\n\n for (i = 0; i < this.pool.children.length; i++) {\n sound = this.pool.children[i];\n if (data.positional) {\n sound.setDistanceModel(data.distanceModel);\n sound.setMaxDistance(data.maxDistance);\n sound.setRefDistance(data.refDistance);\n sound.setRolloffFactor(data.rolloffFactor);\n }\n sound.setLoop(data.loop);\n sound.setVolume(data.volume);\n sound.isPaused = false;\n }\n\n if (data.on !== oldData.on) {\n this.updateEventListener(oldData.on);\n }\n\n // All sound values set. Load in `src`.\n if (srcChanged) {\n var self = this;\n\n this.loaded = false;\n this.audioLoader.load(data.src, function (buffer) {\n for (i = 0; i < self.pool.children.length; i++) {\n sound = self.pool.children[i];\n sound.setBuffer(buffer);\n }\n self.loaded = true;\n\n // Remove this key from cache, otherwise we can't play it again\n THREE.Cache.remove(data.src);\n if (self.data.autoplay || self.mustPlay) { self.playSound(); }\n self.el.emit('sound-loaded', self.evtDetail, false);\n });\n }\n },\n\n pause: function () {\n this.stopSound();\n this.removeEventListener();\n },\n\n play: function () {\n if (this.data.autoplay) { this.playSound(); }\n this.updateEventListener();\n },\n\n remove: function () {\n var i;\n var sound;\n\n this.removeEventListener();\n\n if (this.el.getObject3D(this.attrName)) {\n this.el.removeObject3D(this.attrName);\n }\n\n try {\n for (i = 0; i < this.pool.children.length; i++) {\n sound = this.pool.children[i];\n sound.disconnect();\n }\n } catch (e) {\n // disconnect() will throw if it was never connected initially.\n warn('Audio source not properly disconnected');\n }\n },\n\n /**\n * Update listener attached to the user defined on event.\n */\n updateEventListener: function (oldEvt) {\n var el = this.el;\n if (oldEvt) { el.removeEventListener(oldEvt, this.playSoundBound); }\n el.addEventListener(this.data.on, this.playSoundBound);\n },\n\n removeEventListener: function () {\n this.el.removeEventListener(this.data.on, this.playSoundBound);\n },\n\n /**\n * Removes current sound object, creates new sound object, adds to entity.\n *\n * @returns {object} sound\n */\n setupSound: function () {\n var el = this.el;\n var i;\n var sceneEl = el.sceneEl;\n var self = this;\n var sound;\n\n if (this.pool.children.length > 0) {\n this.stopSound();\n el.removeObject3D('sound');\n }\n\n // Only want one AudioListener. Cache it on the scene.\n var listener = this.listener = sceneEl.audioListener || new THREE.AudioListener();\n sceneEl.audioListener = listener;\n\n if (sceneEl.camera) {\n sceneEl.camera.add(listener);\n }\n\n // Wait for camera if necessary.\n sceneEl.addEventListener('camera-set-active', function (evt) {\n evt.detail.cameraEl.getObject3D('camera').add(listener);\n });\n\n // Create [poolSize] audio instances and attach them to pool\n this.pool = new THREE.Group();\n for (i = 0; i < this.data.poolSize; i++) {\n sound = this.data.positional\n ? new THREE.PositionalAudio(listener)\n : new THREE.Audio(listener);\n this.pool.add(sound);\n }\n el.setObject3D(this.attrName, this.pool);\n\n for (i = 0; i < this.pool.children.length; i++) {\n sound = this.pool.children[i];\n sound.onEnded = function () {\n this.isPlaying = false;\n self.el.emit('sound-ended', self.evtDetail, false);\n };\n }\n },\n\n /**\n * Pause all the sounds in the pool.\n */\n pauseSound: function () {\n var i;\n var sound;\n\n this.isPlaying = false;\n for (i = 0; i < this.pool.children.length; i++) {\n sound = this.pool.children[i];\n if (!sound.source || !sound.source.buffer || !sound.isPlaying || sound.isPaused) {\n continue;\n }\n sound.isPaused = true;\n sound.pause();\n }\n },\n\n /**\n * Look for an unused sound in the pool and play it if found.\n */\n playSound: function (processSound) {\n var found;\n var i;\n var sound;\n\n if (!this.loaded) {\n warn('Sound not loaded yet. It will be played once it finished loading');\n this.mustPlay = true;\n return;\n }\n\n found = false;\n this.isPlaying = true;\n for (i = 0; i < this.pool.children.length; i++) {\n sound = this.pool.children[i];\n if (!sound.isPlaying && sound.buffer && !found) {\n if (processSound) { processSound(sound); }\n sound.play();\n sound.isPaused = false;\n found = true;\n continue;\n }\n }\n\n if (!found) {\n warn('All the sounds are playing. If you need to play more sounds simultaneously ' +\n 'consider increasing the size of pool with the `poolSize` attribute.', this.el);\n return;\n }\n\n this.mustPlay = false;\n },\n\n /**\n * Stop all the sounds in the pool.\n */\n stopSound: function () {\n var i;\n var sound;\n this.isPlaying = false;\n for (i = 0; i < this.pool.children.length; i++) {\n sound = this.pool.children[i];\n if (!sound.source || !sound.source.buffer) { return; }\n sound.stop();\n }\n }\n});\n","var createTextGeometry = require('three-bmfont-text');\nvar loadBMFont = require('load-bmfont');\n\nvar registerComponent = require('../core/component').registerComponent;\nvar coreShader = require('../core/shader');\nvar THREE = require('../lib/three');\nvar utils = require('../utils/');\n\nvar error = utils.debug('components:text:error');\nvar shaders = coreShader.shaders;\nvar warn = utils.debug('components:text:warn');\n\n// 1 to match other A-Frame default widths.\nvar DEFAULT_WIDTH = 1;\n\n// @bryik set anisotropy to 16. Improves look of large amounts of text when viewed from angle.\nvar MAX_ANISOTROPY = 16;\n\nvar AFRAME_CDN_ROOT = require('../constants').AFRAME_CDN_ROOT;\nvar FONT_BASE_URL = AFRAME_CDN_ROOT + 'fonts/';\nvar FONTS = {\n aileronsemibold: FONT_BASE_URL + 'Aileron-Semibold.fnt',\n dejavu: FONT_BASE_URL + 'DejaVu-sdf.fnt',\n exo2bold: FONT_BASE_URL + 'Exo2Bold.fnt',\n exo2semibold: FONT_BASE_URL + 'Exo2SemiBold.fnt',\n kelsonsans: FONT_BASE_URL + 'KelsonSans.fnt',\n monoid: FONT_BASE_URL + 'Monoid.fnt',\n mozillavr: FONT_BASE_URL + 'mozillavr.fnt',\n roboto: FONT_BASE_URL + 'Roboto-msdf.json',\n sourcecodepro: FONT_BASE_URL + 'SourceCodePro.fnt'\n};\nvar MSDF_FONTS = ['roboto'];\nvar DEFAULT_FONT = 'roboto';\nmodule.exports.FONTS = FONTS;\n\nvar cache = new PromiseCache();\nvar fontWidthFactors = {};\nvar textures = {};\n\n// Regular expression for detecting a URLs with a protocol prefix.\nvar protocolRe = /^\\w+:/;\n\n/**\n * SDF-based text component.\n * Based on https://github.com/Jam3/three-bmfont-text.\n *\n * All the stock fonts are for the `sdf` registered shader, an improved version of jam3's\n * original `sdf` shader.\n */\nmodule.exports.Component = registerComponent('text', {\n multiple: true,\n\n schema: {\n align: {type: 'string', default: 'left', oneOf: ['left', 'right', 'center']},\n alphaTest: {default: 0.5},\n // `anchor` defaults to center to match geometries.\n anchor: {default: 'center', oneOf: ['left', 'right', 'center', 'align']},\n baseline: {default: 'center', oneOf: ['top', 'center', 'bottom']},\n color: {type: 'color', default: '#FFF'},\n font: {type: 'string', default: DEFAULT_FONT},\n // `fontImage` defaults to the font name as a .png (e.g., mozillavr.fnt -> mozillavr.png).\n fontImage: {type: 'string'},\n // `height` has no default, will be populated at layout.\n height: {type: 'number'},\n letterSpacing: {type: 'number', default: 0},\n // `lineHeight` defaults to font's `lineHeight` value.\n lineHeight: {type: 'number'},\n // `negate` must be true for fonts generated with older versions of msdfgen (white background).\n negate: {type: 'boolean', default: true},\n opacity: {type: 'number', default: 1.0},\n shader: {default: 'sdf', oneOf: shaders},\n side: {default: 'front', oneOf: ['front', 'back', 'double']},\n tabSize: {default: 4},\n transparent: {default: true},\n value: {type: 'string'},\n whiteSpace: {default: 'normal', oneOf: ['normal', 'pre', 'nowrap']},\n // `width` defaults to geometry width if present, else `DEFAULT_WIDTH`.\n width: {type: 'number'},\n // `wrapCount` units are about one default font character. Wrap roughly at this number.\n wrapCount: {type: 'number', default: 40},\n // `wrapPixels` will wrap using bmfont pixel units (e.g., dejavu's is 32 pixels).\n wrapPixels: {type: 'number'},\n // `xOffset` to add padding.\n xOffset: {type: 'number', default: 0},\n // `yOffset` to adjust generated fonts from tools that may have incorrect metrics.\n yOffset: {type: 'number', default: 0},\n // `zOffset` will provide a small z offset to avoid z-fighting.\n zOffset: {type: 'number', default: 0.001}\n },\n\n init: function () {\n this.shaderData = {};\n this.geometry = createTextGeometry();\n this.createOrUpdateMaterial();\n this.explicitGeoDimensionsChecked = false;\n },\n\n update: function (oldData) {\n var data = this.data;\n var font = this.currentFont;\n if (textures[data.font]) {\n this.texture = textures[data.font];\n } else {\n // Create texture per font.\n this.texture = textures[data.font] = new THREE.Texture();\n this.texture.anisotropy = MAX_ANISOTROPY;\n }\n\n // Update material.\n this.createOrUpdateMaterial();\n\n // New font. `updateFont` will later change data and layout.\n if (oldData.font !== data.font) {\n this.updateFont();\n return;\n }\n\n // Update geometry and layout.\n if (font) {\n this.updateGeometry(this.geometry, font);\n this.updateLayout();\n }\n },\n\n /**\n * Clean up geometry, material, texture, mesh, objects.\n */\n remove: function () {\n this.geometry.dispose();\n this.geometry = null;\n this.el.removeObject3D(this.attrName);\n this.material.dispose();\n this.material = null;\n this.texture.dispose();\n this.texture = null;\n if (this.shaderObject) { delete this.shaderObject; }\n },\n\n /**\n * Update the shader of the material.\n */\n createOrUpdateMaterial: function () {\n var data = this.data;\n var hasChangedShader;\n var material = this.material;\n var NewShader;\n var shaderData = this.shaderData;\n var shaderName;\n\n // Infer shader if using a stock font (or from `-msdf` filename convention).\n shaderName = data.shader;\n if (MSDF_FONTS.indexOf(data.font) !== -1 || data.font.indexOf('-msdf.') >= 0) {\n shaderName = 'msdf';\n } else if (data.font in FONTS && MSDF_FONTS.indexOf(data.font) === -1) {\n shaderName = 'sdf';\n }\n\n hasChangedShader = (this.shaderObject && this.shaderObject.name) !== shaderName;\n\n shaderData.alphaTest = data.alphaTest;\n shaderData.color = data.color;\n shaderData.map = this.texture;\n shaderData.opacity = data.opacity;\n shaderData.side = parseSide(data.side);\n shaderData.transparent = data.transparent;\n shaderData.negate = data.negate;\n\n // Shader has not changed, do an update.\n if (!hasChangedShader) {\n // Update shader material.\n this.shaderObject.update(shaderData);\n // Apparently, was not set on `init` nor `update`.\n material.transparent = shaderData.transparent;\n material.side = shaderData.side;\n return;\n }\n\n // Shader has changed. Create a shader material.\n NewShader = createShader(this.el, shaderName, shaderData);\n this.material = NewShader.material;\n this.shaderObject = NewShader.shader;\n\n // Set new shader material.\n this.material.side = shaderData.side;\n if (this.mesh) { this.mesh.material = this.material; }\n },\n\n /**\n * Load font for geometry, load font image for material, and apply.\n */\n updateFont: function () {\n var data = this.data;\n var el = this.el;\n var fontSrc;\n var geometry = this.geometry;\n var self = this;\n\n if (!data.font) { warn('No font specified. Using the default font.'); }\n\n // Make invisible during font swap.\n if (this.mesh) { this.mesh.visible = false; }\n\n // Look up font URL to use, and perform cached load.\n fontSrc = this.lookupFont(data.font || DEFAULT_FONT) || data.font;\n cache.get(fontSrc, function doLoadFont () {\n return loadFont(fontSrc, data.yOffset);\n }).then(function setFont (font) {\n var fontImgSrc;\n\n if (font.pages.length !== 1) {\n throw new Error('Currently only single-page bitmap fonts are supported.');\n }\n\n if (!fontWidthFactors[fontSrc]) {\n font.widthFactor = fontWidthFactors[font] = computeFontWidthFactor(font);\n }\n self.currentFont = font;\n // Look up font image URL to use, and perform cached load.\n fontImgSrc = self.getFontImageSrc();\n cache.get(fontImgSrc, function () {\n return loadTexture(fontImgSrc);\n }).then(function (image) {\n // Make mesh visible and apply font image as texture.\n var texture = self.texture;\n // The component may have been removed at this point and texture will\n // be null. This happens mainly while executing the tests,\n // in this case we just return.\n if (!texture) return;\n texture.image = image;\n texture.needsUpdate = true;\n textures[data.font] = texture;\n self.texture = texture;\n self.initMesh();\n self.currentFont = font;\n // Update geometry given font metrics.\n self.updateGeometry(geometry, font);\n self.updateLayout();\n self.mesh.visible = true;\n el.emit('textfontset', {font: data.font, fontObj: font});\n }).catch(function (err) {\n error(err.message);\n error(err.stack);\n });\n }).catch(function (err) {\n error(err.message);\n error(err.stack);\n });\n },\n\n initMesh: function () {\n if (this.mesh) { return; }\n this.mesh = new THREE.Mesh(this.geometry, this.material);\n this.el.setObject3D(this.attrName, this.mesh);\n },\n\n getFontImageSrc: function () {\n if (this.data.fontImage) { return this.data.fontImage; }\n var fontSrc = this.lookupFont(this.data.font || DEFAULT_FONT) || this.data.font;\n var imageSrc = this.currentFont.pages[0];\n // If the image URL contains a non-HTTP(S) protocol, assume it's an absolute\n // path on disk and try to infer the path from the font source instead.\n if (imageSrc.match(protocolRe) && imageSrc.indexOf('http') !== 0) {\n return fontSrc.replace(/(\\.fnt)|(\\.json)/, '.png');\n }\n return THREE.LoaderUtils.extractUrlBase(fontSrc) + imageSrc;\n },\n\n /**\n * Update layout with anchor, alignment, baseline, and considering any meshes.\n */\n updateLayout: function () {\n var anchor;\n var baseline;\n var el = this.el;\n var data = this.data;\n var geometry = this.geometry;\n var geometryComponent;\n var height;\n var layout;\n var mesh = this.mesh;\n var textRenderWidth;\n var textScale;\n var width;\n var x;\n var y;\n\n if (!mesh || !geometry.layout) { return; }\n\n // Determine width to use (defined width, geometry's width, or default width).\n geometryComponent = el.getAttribute('geometry');\n width = data.width || (geometryComponent && geometryComponent.width) || DEFAULT_WIDTH;\n\n // Determine wrap pixel count. Either specified or by experimental fudge factor.\n // Note that experimental factor will never be correct for variable width fonts.\n textRenderWidth = computeWidth(data.wrapPixels, data.wrapCount,\n this.currentFont.widthFactor);\n textScale = width / textRenderWidth;\n\n // Determine height to use.\n layout = geometry.layout;\n height = textScale * (layout.height + layout.descender);\n\n // Update geometry dimensions to match text layout if width and height are set to 0.\n // For example, scales a plane to fit text.\n if (geometryComponent && geometryComponent.primitive === 'plane') {\n if (!this.explicitGeoDimensionsChecked) {\n this.explicitGeoDimensionsChecked = true;\n this.hasExplicitGeoWidth = !!geometryComponent.width;\n this.hasExplicitGeoHeight = !!geometryComponent.height;\n }\n if (!this.hasExplicitGeoWidth) { el.setAttribute('geometry', 'width', width); }\n if (!this.hasExplicitGeoHeight) { el.setAttribute('geometry', 'height', height); }\n }\n\n // Calculate X position to anchor text left, center, or right.\n anchor = data.anchor === 'align' ? data.align : data.anchor;\n if (anchor === 'left') {\n x = 0;\n } else if (anchor === 'right') {\n x = -1 * layout.width;\n } else if (anchor === 'center') {\n x = -1 * layout.width / 2;\n } else {\n throw new TypeError('Invalid text.anchor property value', anchor);\n }\n\n // Calculate Y position to anchor text top, center, or bottom.\n baseline = data.baseline;\n if (baseline === 'bottom') {\n y = 0;\n } else if (baseline === 'top') {\n y = -1 * layout.height + layout.ascender;\n } else if (baseline === 'center') {\n y = -1 * layout.height / 2;\n } else {\n throw new TypeError('Invalid text.baseline property value', baseline);\n }\n\n // Position and scale mesh to apply layout.\n mesh.position.x = x * textScale + data.xOffset;\n mesh.position.y = y * textScale;\n // Place text slightly in front to avoid Z-fighting.\n mesh.position.z = data.zOffset;\n mesh.scale.set(textScale, -1 * textScale, textScale);\n },\n\n /**\n * Grab font from the constant.\n * Set as a method for test stubbing purposes.\n */\n lookupFont: function (key) {\n return FONTS[key];\n },\n\n /**\n * Update the text geometry using `three-bmfont-text.update`.\n */\n updateGeometry: (function () {\n var geometryUpdateBase = {};\n var geometryUpdateData = {};\n var newLineRegex = /\\\\n/g;\n var tabRegex = /\\\\t/g;\n\n return function (geometry, font) {\n var data = this.data;\n\n geometryUpdateData.font = font;\n geometryUpdateData.lineHeight = data.lineHeight && isFinite(data.lineHeight)\n ? data.lineHeight\n : font.common.lineHeight;\n geometryUpdateData.text = data.value.toString().replace(newLineRegex, '\\n')\n .replace(tabRegex, '\\t');\n geometryUpdateData.width = computeWidth(data.wrapPixels, data.wrapCount,\n font.widthFactor);\n geometry.update(utils.extend(geometryUpdateBase, data, geometryUpdateData));\n };\n })()\n});\n\n/**\n * Due to using negative scale, we return the opposite side specified.\n * https://github.com/mrdoob/three.js/pull/12787/\n */\nfunction parseSide (side) {\n switch (side) {\n case 'back': {\n return THREE.FrontSide;\n }\n case 'double': {\n return THREE.DoubleSide;\n }\n default: {\n return THREE.BackSide;\n }\n }\n}\n\n/**\n * @returns {Promise}\n */\nfunction loadFont (src, yOffset) {\n return new Promise(function (resolve, reject) {\n loadBMFont(src, function (err, font) {\n if (err) {\n error('Error loading font', src);\n reject(err);\n return;\n }\n\n // Fix negative Y offsets for Roboto MSDF font from tool. Experimentally determined.\n if (src.indexOf('/Roboto-msdf.json') >= 0) { yOffset = 30; }\n if (yOffset) { font.chars.map(function doOffset (ch) { ch.yoffset += yOffset; }); }\n\n resolve(font);\n });\n });\n}\n\n/**\n * @returns {Promise}\n */\nfunction loadTexture (src) {\n return new Promise(function (resolve, reject) {\n new THREE.ImageLoader().load(src, function (image) {\n resolve(image);\n }, undefined, function () {\n error('Error loading font image', src);\n reject(null);\n });\n });\n}\n\nfunction createShader (el, shaderName, data) {\n var shader;\n var shaderObject;\n\n // Set up Shader.\n shaderObject = new shaders[shaderName].Shader();\n shaderObject.el = el;\n shaderObject.init(data);\n shaderObject.update(data);\n\n // Get material.\n shader = shaderObject.material;\n // Apparently, was not set on `init` nor `update`.\n shader.transparent = data.transparent;\n\n return {\n material: shader,\n shader: shaderObject\n };\n}\n\n/**\n * Determine wrap pixel count. Either specified or by experimental fudge factor.\n * Note that experimental factor will never be correct for variable width fonts.\n */\nfunction computeWidth (wrapPixels, wrapCount, widthFactor) {\n return wrapPixels || ((0.5 + wrapCount) * widthFactor);\n}\n\n/**\n * Compute default font width factor to use.\n */\nfunction computeFontWidthFactor (font) {\n var sum = 0;\n var digitsum = 0;\n var digits = 0;\n font.chars.map(function (ch) {\n sum += ch.xadvance;\n if (ch.id >= 48 && ch.id <= 57) {\n digits++;\n digitsum += ch.xadvance;\n }\n });\n return digits ? digitsum / digits : sum / font.chars.length;\n}\n\n/**\n * Get or create a promise given a key and promise generator.\n * @todo Move to a utility and use in other parts of A-Frame.\n */\nfunction PromiseCache () {\n var cache = this.cache = {};\n\n this.get = function (key, promiseGenerator) {\n if (key in cache) {\n return cache[key];\n }\n cache[key] = promiseGenerator();\n return cache[key];\n };\n}\n","var registerComponent = require('../core/component').registerComponent;\nvar controllerUtils = require('../utils/tracked-controls');\nvar DEFAULT_CAMERA_HEIGHT = require('../constants').DEFAULT_CAMERA_HEIGHT;\nvar THREE = require('../lib/three');\n\nvar DEFAULT_HANDEDNESS = require('../constants').DEFAULT_HANDEDNESS;\n// Vector from eyes to elbow (divided by user height).\nvar EYES_TO_ELBOW = {x: 0.175, y: -0.3, z: -0.03};\n// Vector from eyes to elbow (divided by user height).\nvar FOREARM = {x: 0, y: 0, z: -0.175};\n\n// Due to unfortunate name collision, add empty touches array to avoid Daydream error.\nvar EMPTY_DAYDREAM_TOUCHES = {touches: []};\n\nvar EVENTS = {\n AXISMOVE: 'axismove',\n BUTTONCHANGED: 'buttonchanged',\n BUTTONDOWN: 'buttondown',\n BUTTONUP: 'buttonup',\n TOUCHSTART: 'touchstart',\n TOUCHEND: 'touchend'\n};\n\n/**\n * Tracked controls component.\n * Wrap the gamepad API for pose and button states.\n * Select the appropriate controller and apply pose to the entity.\n * Observe button states and emit appropriate events.\n *\n * @property {number} controller - Index of controller in array returned by Gamepad API.\n * Only used if hand property is not set.\n * @property {string} id - Selected controller among those returned by Gamepad API.\n * @property {number} hand - If multiple controllers found with id, choose the one with the\n * given value for hand. If set, we ignore 'controller' property\n */\nmodule.exports.Component = registerComponent('tracked-controls-webvr', {\n schema: {\n autoHide: {default: true},\n controller: {default: 0},\n id: {type: 'string', default: ''},\n hand: {type: 'string', default: ''},\n idPrefix: {type: 'string', default: ''},\n orientationOffset: {type: 'vec3'},\n // Arm model parameters when not 6DoF.\n armModel: {default: false},\n headElement: {type: 'selector'}\n },\n\n init: function () {\n // Copy variables back to tracked-controls for backwards compatibility.\n // Some 3rd components rely on them.\n this.axis = this.el.components['tracked-controls'].axis = [0, 0, 0];\n this.buttonStates = this.el.components['tracked-controls'].buttonStates = {};\n this.changedAxes = [];\n this.targetControllerNumber = this.data.controller;\n\n this.axisMoveEventDetail = {axis: this.axis, changed: this.changedAxes};\n this.deltaControllerPosition = new THREE.Vector3();\n this.controllerQuaternion = new THREE.Quaternion();\n this.controllerEuler = new THREE.Euler();\n\n this.updateGamepad();\n\n this.buttonEventDetails = {};\n },\n\n tick: function (time, delta) {\n var mesh = this.el.getObject3D('mesh');\n // Update mesh animations.\n if (mesh && mesh.update) { mesh.update(delta / 1000); }\n this.updateGamepad();\n this.updatePose();\n this.updateButtons();\n },\n\n /**\n * Return default user height to use for non-6DOF arm model.\n */\n defaultUserHeight: function () {\n return DEFAULT_CAMERA_HEIGHT;\n },\n\n /**\n * Return head element to use for non-6DOF arm model.\n */\n getHeadElement: function () {\n return this.data.headElement || this.el.sceneEl.camera.el;\n },\n\n /**\n * Handle update controller match criteria (such as `id`, `idPrefix`, `hand`, `controller`)\n */\n updateGamepad: function () {\n var data = this.data;\n var controller = controllerUtils.findMatchingControllerWebVR(\n this.system.controllers,\n data.id,\n data.idPrefix,\n data.hand,\n data.controller\n );\n\n this.controller = controller;\n // Legacy handle to the controller for old components.\n this.el.components['tracked-controls'].controller = controller;\n\n if (this.data.autoHide) { this.el.object3D.visible = !!this.controller; }\n },\n\n /**\n * Applies an artificial arm model to simulate elbow to wrist positioning\n * based on the orientation of the controller.\n *\n * @param {object} controllerPosition - Existing vector to update with controller position.\n */\n applyArmModel: function (controllerPosition) {\n // Use controllerPosition and deltaControllerPosition to avoid creating variables.\n var controller = this.controller;\n var controllerEuler = this.controllerEuler;\n var controllerQuaternion = this.controllerQuaternion;\n var deltaControllerPosition = this.deltaControllerPosition;\n var hand;\n var headEl;\n var headObject3D;\n var pose;\n var userHeight;\n\n headEl = this.getHeadElement();\n headObject3D = headEl.object3D;\n userHeight = this.defaultUserHeight();\n\n pose = controller.pose;\n hand = (controller ? controller.hand : undefined) || DEFAULT_HANDEDNESS;\n\n // Use camera position as head position.\n controllerPosition.copy(headObject3D.position);\n // Set offset for degenerate \"arm model\" to elbow.\n deltaControllerPosition.set(\n EYES_TO_ELBOW.x * (hand === 'left' ? -1 : hand === 'right' ? 1 : 0),\n EYES_TO_ELBOW.y, // Lower than our eyes.\n EYES_TO_ELBOW.z); // Slightly out in front.\n // Scale offset by user height.\n deltaControllerPosition.multiplyScalar(userHeight);\n // Apply camera Y rotation (not X or Z, so you can look down at your hand).\n deltaControllerPosition.applyAxisAngle(headObject3D.up, headObject3D.rotation.y);\n // Apply rotated offset to position.\n controllerPosition.add(deltaControllerPosition);\n\n // Set offset for degenerate \"arm model\" forearm. Forearm sticking out from elbow.\n deltaControllerPosition.set(FOREARM.x, FOREARM.y, FOREARM.z);\n // Scale offset by user height.\n deltaControllerPosition.multiplyScalar(userHeight);\n // Apply controller X/Y rotation (tilting up/down/left/right is usually moving the arm).\n if (pose.orientation) {\n controllerQuaternion.fromArray(pose.orientation);\n } else {\n controllerQuaternion.copy(headObject3D.quaternion);\n }\n controllerEuler.setFromQuaternion(controllerQuaternion);\n controllerEuler.set(controllerEuler.x, controllerEuler.y, 0);\n deltaControllerPosition.applyEuler(controllerEuler);\n // Apply rotated offset to position.\n controllerPosition.add(deltaControllerPosition);\n },\n\n /**\n * Read pose from controller (from Gamepad API), apply transforms, apply to entity.\n */\n updatePose: function () {\n var controller = this.controller;\n var data = this.data;\n var object3D = this.el.object3D;\n var pose;\n var vrDisplay = this.system.vrDisplay;\n var standingMatrix;\n\n if (!controller) { return; }\n\n // Compose pose from Gamepad.\n pose = controller.pose;\n\n if (pose.position) {\n object3D.position.fromArray(pose.position);\n } else {\n // Controller not 6DOF, apply arm model.\n if (data.armModel) { this.applyArmModel(object3D.position); }\n }\n\n if (pose.orientation) {\n object3D.quaternion.fromArray(pose.orientation);\n }\n\n // Apply transforms, if 6DOF and in VR.\n if (vrDisplay && pose.position) {\n standingMatrix = this.el.sceneEl.renderer.xr.getStandingMatrix();\n object3D.matrix.compose(object3D.position, object3D.quaternion, object3D.scale);\n object3D.matrix.multiplyMatrices(standingMatrix, object3D.matrix);\n object3D.matrix.decompose(object3D.position, object3D.quaternion, object3D.scale);\n }\n\n object3D.rotateX(this.data.orientationOffset.x * THREE.MathUtils.DEG2RAD);\n object3D.rotateY(this.data.orientationOffset.y * THREE.MathUtils.DEG2RAD);\n object3D.rotateZ(this.data.orientationOffset.z * THREE.MathUtils.DEG2RAD);\n },\n\n /**\n * Handle button changes including axes, presses, touches, values.\n */\n updateButtons: function () {\n var buttonState;\n var controller = this.controller;\n var id;\n\n if (!controller) { return; }\n\n // Check every button.\n for (id = 0; id < controller.buttons.length; ++id) {\n // Initialize button state.\n if (!this.buttonStates[id]) {\n this.buttonStates[id] = {pressed: false, touched: false, value: 0};\n }\n if (!this.buttonEventDetails[id]) {\n this.buttonEventDetails[id] = {id: id, state: this.buttonStates[id]};\n }\n\n buttonState = controller.buttons[id];\n this.handleButton(id, buttonState);\n }\n // Check axes.\n this.handleAxes();\n },\n\n /**\n * Handle presses and touches for a single button.\n *\n * @param {number} id - Index of button in Gamepad button array.\n * @param {number} buttonState - Value of button state from 0 to 1.\n * @returns {boolean} Whether button has changed in any way.\n */\n handleButton: function (id, buttonState) {\n var changed;\n changed = this.handlePress(id, buttonState) |\n this.handleTouch(id, buttonState) |\n this.handleValue(id, buttonState);\n if (!changed) { return false; }\n this.el.emit(EVENTS.BUTTONCHANGED, this.buttonEventDetails[id], false);\n return true;\n },\n\n /**\n * An axis is an array of values from -1 (up, left) to 1 (down, right).\n * Compare each component of the axis to the previous value to determine change.\n *\n * @returns {boolean} Whether axes changed.\n */\n handleAxes: function () {\n var changed = false;\n var controllerAxes = this.controller.axes;\n var i;\n var previousAxis = this.axis;\n var changedAxes = this.changedAxes;\n\n // Check if axis changed.\n this.changedAxes.splice(0, this.changedAxes.length);\n for (i = 0; i < controllerAxes.length; ++i) {\n changedAxes.push(previousAxis[i] !== controllerAxes[i]);\n if (changedAxes[i]) { changed = true; }\n }\n if (!changed) { return false; }\n\n this.axis.splice(0, this.axis.length);\n for (i = 0; i < controllerAxes.length; i++) {\n this.axis.push(controllerAxes[i]);\n }\n this.el.emit(EVENTS.AXISMOVE, this.axisMoveEventDetail, false);\n return true;\n },\n\n /**\n * Determine whether a button press has occured and emit events as appropriate.\n *\n * @param {string} id - ID of the button to check.\n * @param {object} buttonState - State of the button to check.\n * @returns {boolean} Whether button press state changed.\n */\n handlePress: function (id, buttonState) {\n var evtName;\n var previousButtonState = this.buttonStates[id];\n\n // Not changed.\n if (buttonState.pressed === previousButtonState.pressed) { return false; }\n\n evtName = buttonState.pressed ? EVENTS.BUTTONDOWN : EVENTS.BUTTONUP;\n this.el.emit(evtName, this.buttonEventDetails[id], false);\n previousButtonState.pressed = buttonState.pressed;\n return true;\n },\n\n /**\n * Determine whether a button touch has occured and emit events as appropriate.\n *\n * @param {string} id - ID of the button to check.\n * @param {object} buttonState - State of the button to check.\n * @returns {boolean} Whether button touch state changed.\n */\n handleTouch: function (id, buttonState) {\n var evtName;\n var previousButtonState = this.buttonStates[id];\n\n // Not changed.\n if (buttonState.touched === previousButtonState.touched) { return false; }\n\n evtName = buttonState.touched ? EVENTS.TOUCHSTART : EVENTS.TOUCHEND;\n this.el.emit(evtName, this.buttonEventDetails[id], false, EMPTY_DAYDREAM_TOUCHES);\n previousButtonState.touched = buttonState.touched;\n return true;\n },\n\n /**\n * Determine whether a button value has changed.\n *\n * @param {string} id - Id of the button to check.\n * @param {object} buttonState - State of the button to check.\n * @returns {boolean} Whether button value changed.\n */\n handleValue: function (id, buttonState) {\n var previousButtonState = this.buttonStates[id];\n\n // Not changed.\n if (buttonState.value === previousButtonState.value) { return false; }\n\n previousButtonState.value = buttonState.value;\n return true;\n }\n});\n","var controllerUtils = require('../utils/tracked-controls');\nvar registerComponent = require('../core/component').registerComponent;\n\nvar EVENTS = {\n AXISMOVE: 'axismove',\n BUTTONCHANGED: 'buttonchanged',\n BUTTONDOWN: 'buttondown',\n BUTTONUP: 'buttonup',\n TOUCHSTART: 'touchstart',\n TOUCHEND: 'touchend'\n};\n\nmodule.exports.Component = registerComponent('tracked-controls-webxr', {\n schema: {\n id: {type: 'string', default: ''},\n hand: {type: 'string', default: ''},\n handTrackingEnabled: {default: false},\n index: {type: 'int', default: -1},\n iterateControllerProfiles: {default: false},\n space: {type: 'string', oneOf: ['targetRaySpace', 'gripSpace'], default: 'gripSpace'}\n },\n\n init: function () {\n this.updateController = this.updateController.bind(this);\n this.buttonEventDetails = {};\n this.buttonStates = this.el.components['tracked-controls'].buttonStates = {};\n this.axis = this.el.components['tracked-controls'].axis = [0, 0, 0];\n this.changedAxes = [];\n this.axisMoveEventDetail = {axis: this.axis, changed: this.changedAxes};\n },\n\n update: function () {\n this.updateController();\n },\n\n play: function () {\n var sceneEl = this.el.sceneEl;\n this.updateController();\n sceneEl.addEventListener('controllersupdated', this.updateController);\n },\n\n pause: function () {\n var sceneEl = this.el.sceneEl;\n sceneEl.removeEventListener('controllersupdated', this.updateController);\n },\n\n isControllerPresent: function (evt) {\n if (!this.controller || this.controller.gamepad) { return false; }\n if (evt.inputSource.handedness !== 'none' &&\n evt.inputSource.handedness !== this.data.hand) {\n return false;\n }\n return true;\n },\n\n /**\n * Handle update controller match criteria (such as `id`, `idPrefix`, `hand`, `controller`)\n */\n updateController: function () {\n this.controller = controllerUtils.findMatchingControllerWebXR(\n this.system.controllers,\n this.data.id,\n this.data.hand,\n this.data.index,\n this.data.iterateControllerProfiles,\n this.data.handTrackingEnabled\n );\n // Legacy handle to the controller for old components.\n this.el.components['tracked-controls'].controller = this.controller;\n if (this.data.autoHide) { this.el.object3D.visible = !!this.controller; }\n },\n\n tick: function () {\n var sceneEl = this.el.sceneEl;\n var controller = this.controller;\n var frame = sceneEl.frame;\n if (!controller || !sceneEl.frame || !this.system.referenceSpace) { return; }\n if (!controller.hand) {\n this.pose = frame.getPose(controller[this.data.space], this.system.referenceSpace);\n this.updatePose();\n this.updateButtons();\n }\n },\n\n updatePose: function () {\n var object3D = this.el.object3D;\n var pose = this.pose;\n if (!pose) { return; }\n object3D.matrix.elements = pose.transform.matrix;\n object3D.matrix.decompose(object3D.position, object3D.rotation, object3D.scale);\n },\n\n /**\n * Handle button changes including axes, presses, touches, values.\n */\n updateButtons: function () {\n var buttonState;\n var id;\n var controller = this.controller;\n var gamepad;\n if (!controller || !controller.gamepad) { return; }\n\n gamepad = controller.gamepad;\n // Check every button.\n for (id = 0; id < gamepad.buttons.length; ++id) {\n // Initialize button state.\n if (!this.buttonStates[id]) {\n this.buttonStates[id] = {pressed: false, touched: false, value: 0};\n }\n if (!this.buttonEventDetails[id]) {\n this.buttonEventDetails[id] = {id: id, state: this.buttonStates[id]};\n }\n\n buttonState = gamepad.buttons[id];\n this.handleButton(id, buttonState);\n }\n // Check axes.\n this.handleAxes();\n },\n\n /**\n * Handle presses and touches for a single button.\n *\n * @param {number} id - Index of button in Gamepad button array.\n * @param {number} buttonState - Value of button state from 0 to 1.\n * @returns {boolean} Whether button has changed in any way.\n */\n handleButton: function (id, buttonState) {\n var changed;\n changed = this.handlePress(id, buttonState) |\n this.handleTouch(id, buttonState) |\n this.handleValue(id, buttonState);\n if (!changed) { return false; }\n this.el.emit(EVENTS.BUTTONCHANGED, this.buttonEventDetails[id], false);\n return true;\n },\n\n /**\n * An axis is an array of values from -1 (up, left) to 1 (down, right).\n * Compare each component of the axis to the previous value to determine change.\n *\n * @returns {boolean} Whether axes changed.\n */\n handleAxes: function () {\n var changed = false;\n var controllerAxes = this.controller.gamepad.axes;\n var i;\n var previousAxis = this.axis;\n var changedAxes = this.changedAxes;\n\n // Check if axis changed.\n this.changedAxes.splice(0, this.changedAxes.length);\n for (i = 0; i < controllerAxes.length; ++i) {\n changedAxes.push(previousAxis[i] !== controllerAxes[i]);\n if (changedAxes[i]) { changed = true; }\n }\n if (!changed) { return false; }\n\n this.axis.splice(0, this.axis.length);\n for (i = 0; i < controllerAxes.length; i++) {\n this.axis.push(controllerAxes[i]);\n }\n this.el.emit(EVENTS.AXISMOVE, this.axisMoveEventDetail, false);\n return true;\n },\n\n /**\n * Determine whether a button press has occured and emit events as appropriate.\n *\n * @param {string} id - ID of the button to check.\n * @param {object} buttonState - State of the button to check.\n * @returns {boolean} Whether button press state changed.\n */\n handlePress: function (id, buttonState) {\n var evtName;\n var previousButtonState = this.buttonStates[id];\n\n // Not changed.\n if (buttonState.pressed === previousButtonState.pressed) { return false; }\n\n evtName = buttonState.pressed ? EVENTS.BUTTONDOWN : EVENTS.BUTTONUP;\n this.el.emit(evtName, this.buttonEventDetails[id], false);\n previousButtonState.pressed = buttonState.pressed;\n return true;\n },\n\n /**\n * Determine whether a button touch has occured and emit events as appropriate.\n *\n * @param {string} id - ID of the button to check.\n * @param {object} buttonState - State of the button to check.\n * @returns {boolean} Whether button touch state changed.\n */\n handleTouch: function (id, buttonState) {\n var evtName;\n var previousButtonState = this.buttonStates[id];\n\n // Not changed.\n if (buttonState.touched === previousButtonState.touched) { return false; }\n\n evtName = buttonState.touched ? EVENTS.TOUCHSTART : EVENTS.TOUCHEND;\n this.el.emit(evtName, this.buttonEventDetails[id], false);\n previousButtonState.touched = buttonState.touched;\n return true;\n },\n\n /**\n * Determine whether a button value has changed.\n *\n * @param {string} id - Id of the button to check.\n * @param {object} buttonState - State of the button to check.\n * @returns {boolean} Whether button value changed.\n */\n handleValue: function (id, buttonState) {\n var previousButtonState = this.buttonStates[id];\n\n // Not changed.\n if (buttonState.value === previousButtonState.value) { return false; }\n\n previousButtonState.value = buttonState.value;\n return true;\n }\n});\n","var registerComponent = require('../core/component').registerComponent;\n\n/**\n * Tracked controls.\n * Abstract controls that decide if the WebVR or WebXR version is going to be applied.\n *\n * @property {number} controller - Index of controller in array returned by Gamepad API.\n * Only used if hand property is not set.\n * @property {string} id - Selected controller among those returned by Gamepad API.\n * @property {number} hand - If multiple controllers found with id, choose the one with the\n * given value for hand. If set, we ignore 'controller' property\n */\nmodule.exports.Component = registerComponent('tracked-controls', {\n schema: {\n autoHide: {default: true},\n controller: {default: -1},\n id: {type: 'string', default: ''},\n hand: {type: 'string', default: ''},\n idPrefix: {type: 'string', default: ''},\n handTrackingEnabled: {default: false},\n orientationOffset: {type: 'vec3'},\n // Arm model parameters when not 6DoF.\n armModel: {default: false},\n headElement: {type: 'selector'},\n iterateControllerProfiles: {default: false},\n space: {type: 'string', oneOf: ['targetRaySpace', 'gripSpace'], default: 'targetRaySpace'}\n },\n\n update: function () {\n var data = this.data;\n var el = this.el;\n if (el.sceneEl.hasWebXR) {\n el.setAttribute('tracked-controls-webxr', {\n id: data.id,\n hand: data.hand,\n index: data.controller,\n iterateControllerProfiles: data.iterateControllerProfiles,\n handTrackingEnabled: data.handTrackingEnabled,\n space: data.space\n });\n } else {\n el.setAttribute('tracked-controls-webvr', data);\n }\n }\n});\n","var registerComponent = require('../core/component').registerComponent;\nvar bind = require('../utils/bind');\nvar THREE = require('../lib/three');\n\nvar trackedControlsUtils = require('../utils/tracked-controls');\nvar checkControllerPresentAndSetup = trackedControlsUtils.checkControllerPresentAndSetup;\nvar emitIfAxesChanged = trackedControlsUtils.emitIfAxesChanged;\nvar onButtonEvent = trackedControlsUtils.onButtonEvent;\n\nvar AFRAME_CDN_ROOT = require('../constants').AFRAME_CDN_ROOT;\nvar INDEX_CONTROLLER_MODEL_BASE_URL = AFRAME_CDN_ROOT + 'controllers/valve/index/valve-index-';\nvar INDEX_CONTROLLER_MODEL_URL = {\n left: INDEX_CONTROLLER_MODEL_BASE_URL + 'left.glb',\n right: INDEX_CONTROLLER_MODEL_BASE_URL + 'right.glb'\n};\n\nvar GAMEPAD_ID_PREFIX = 'valve';\n\nvar isWebXRAvailable = require('../utils/').device.isWebXRAvailable;\n\nvar INDEX_CONTROLLER_POSITION_OFFSET_WEBVR = {\n left: {x: -0.00023692678902063457, y: 0.04724540367838371, z: -0.061959880395271096},\n right: {x: 0.002471558599671131, y: 0.055765208987076195, z: -0.061068168708348844}\n};\n\nvar INDEX_CONTROLLER_POSITION_OFFSET_WEBXR = {\n left: {x: 0, y: -0.05, z: 0.06},\n right: {x: 0, y: -0.05, z: 0.06}\n};\n\nvar INDEX_CONTROLLER_ROTATION_OFFSET_WEBVR = {\n left: {_x: 0.692295102620542, _y: -0.0627618864318427, _z: -0.06265893149611756, _order: 'XYZ'},\n right: {_x: 0.6484021229942998, _y: -0.032563619881892894, _z: -0.1327973171917482, _order: 'XYZ'}\n};\n\nvar INDEX_CONTROLLER_ROTATION_OFFSET_WEBXR = {\n left: {_x: Math.PI / 3, _y: 0, _z: 0, _order: 'XYZ'},\n right: {_x: Math.PI / 3, _y: 0, _z: 0, _order: 'XYZ'}\n};\n\nvar INDEX_CONTROLLER_ROTATION_OFFSET = isWebXRAvailable ? INDEX_CONTROLLER_ROTATION_OFFSET_WEBXR : INDEX_CONTROLLER_ROTATION_OFFSET_WEBVR;\n\nvar INDEX_CONTROLLER_POSITION_OFFSET = isWebXRAvailable ? INDEX_CONTROLLER_POSITION_OFFSET_WEBXR : INDEX_CONTROLLER_POSITION_OFFSET_WEBVR;\n/**\n * Vive controls.\n * Interface with Vive controllers and map Gamepad events to controller buttons:\n * trackpad, trigger, grip, menu, system\n * Load a controller model and highlight the pressed buttons.\n */\nmodule.exports.Component = registerComponent('valve-index-controls', {\n schema: {\n hand: {default: 'left'},\n buttonColor: {type: 'color', default: '#FAFAFA'}, // Off-white.\n buttonHighlightColor: {type: 'color', default: '#22D1EE'}, // Light blue.\n model: {default: true},\n orientationOffset: {type: 'vec3'}\n },\n\n mapping: {\n axes: {\n trackpad: [0, 1],\n thumbstick: [2, 3]\n },\n buttons: ['trigger', 'grip', 'trackpad', 'thumbstick', 'abutton']\n },\n\n init: function () {\n var self = this;\n this.controllerPresent = false;\n this.lastControllerCheck = 0;\n this.onButtonChanged = bind(this.onButtonChanged, this);\n this.onButtonDown = function (evt) { onButtonEvent(evt.detail.id, 'down', self); };\n this.onButtonUp = function (evt) { onButtonEvent(evt.detail.id, 'up', self); };\n this.onButtonTouchEnd = function (evt) { onButtonEvent(evt.detail.id, 'touchend', self); };\n this.onButtonTouchStart = function (evt) { onButtonEvent(evt.detail.id, 'touchstart', self); };\n this.previousButtonValues = {};\n\n this.bindMethods();\n },\n\n play: function () {\n this.checkIfControllerPresent();\n this.addControllersUpdateListener();\n },\n\n pause: function () {\n this.removeEventListeners();\n this.removeControllersUpdateListener();\n },\n\n bindMethods: function () {\n this.onModelLoaded = bind(this.onModelLoaded, this);\n this.onControllersUpdate = bind(this.onControllersUpdate, this);\n this.checkIfControllerPresent = bind(this.checkIfControllerPresent, this);\n this.removeControllersUpdateListener = bind(this.removeControllersUpdateListener, this);\n this.onAxisMoved = bind(this.onAxisMoved, this);\n },\n\n addEventListeners: function () {\n var el = this.el;\n el.addEventListener('buttonchanged', this.onButtonChanged);\n el.addEventListener('buttondown', this.onButtonDown);\n el.addEventListener('buttonup', this.onButtonUp);\n el.addEventListener('touchend', this.onButtonTouchEnd);\n el.addEventListener('touchstart', this.onButtonTouchStart);\n el.addEventListener('model-loaded', this.onModelLoaded);\n el.addEventListener('axismove', this.onAxisMoved);\n this.controllerEventsActive = true;\n },\n\n removeEventListeners: function () {\n var el = this.el;\n el.removeEventListener('buttonchanged', this.onButtonChanged);\n el.removeEventListener('buttondown', this.onButtonDown);\n el.removeEventListener('buttonup', this.onButtonUp);\n el.removeEventListener('touchend', this.onButtonTouchEnd);\n el.removeEventListener('touchstart', this.onButtonTouchStart);\n el.removeEventListener('model-loaded', this.onModelLoaded);\n el.removeEventListener('axismove', this.onAxisMoved);\n this.controllerEventsActive = false;\n },\n\n /**\n * Once OpenVR returns correct hand data in supporting browsers, we can use hand property.\n * var isPresent = checkControllerPresentAndSetup(this.el.sceneEl, GAMEPAD_ID_PREFIX,\n { hand: data.hand });\n * Until then, use hardcoded index.\n */\n checkIfControllerPresent: function () {\n var data = this.data;\n var controllerIndex = data.hand === 'right' ? 0 : data.hand === 'left' ? 1 : 2;\n checkControllerPresentAndSetup(this, GAMEPAD_ID_PREFIX, {index: controllerIndex, iterateControllerProfiles: true, hand: data.hand});\n },\n\n injectTrackedControls: function () {\n var el = this.el;\n var data = this.data;\n\n // If we have an OpenVR Gamepad, use the fixed mapping.\n el.setAttribute('tracked-controls', {\n idPrefix: GAMEPAD_ID_PREFIX,\n // Hand IDs: 1 = right, 0 = left, 2 = anything else.\n controller: data.hand === 'right' ? 1 : data.hand === 'left' ? 0 : 2,\n hand: data.hand,\n orientationOffset: data.orientationOffset\n });\n\n this.loadModel();\n },\n\n loadModel: function () {\n var data = this.data;\n if (!data.model) { return; }\n this.el.setAttribute('gltf-model', '' + INDEX_CONTROLLER_MODEL_URL[data.hand] + '');\n },\n\n addControllersUpdateListener: function () {\n this.el.sceneEl.addEventListener('controllersupdated', this.onControllersUpdate, false);\n },\n\n removeControllersUpdateListener: function () {\n this.el.sceneEl.removeEventListener('controllersupdated', this.onControllersUpdate, false);\n },\n\n onControllersUpdate: function () {\n this.checkIfControllerPresent();\n },\n\n /**\n * Rotate the trigger button based on how hard the trigger is pressed.\n */\n onButtonChanged: function (evt) {\n var button = this.mapping.buttons[evt.detail.id];\n var buttonMeshes = this.buttonMeshes;\n var analogValue;\n\n if (!button) { return; }\n\n if (button === 'trigger') {\n analogValue = evt.detail.state.value;\n // Update trigger rotation depending on button value.\n if (buttonMeshes && buttonMeshes.trigger) {\n buttonMeshes.trigger.rotation.x = this.triggerOriginalRotationX - analogValue * (Math.PI / 40);\n }\n }\n\n // Pass along changed event with button state, using button mapping for convenience.\n this.el.emit(button + 'changed', evt.detail.state);\n },\n\n onModelLoaded: function (evt) {\n var buttonMeshes;\n var controllerObject3D = evt.detail.model;\n var self = this;\n\n if (!this.data.model) { return; }\n\n // Store button meshes object to be able to change their colors.\n buttonMeshes = this.buttonMeshes = {};\n buttonMeshes.grip = {\n left: controllerObject3D.getObjectByName('leftgrip'),\n right: controllerObject3D.getObjectByName('rightgrip')\n };\n buttonMeshes.menu = controllerObject3D.getObjectByName('menubutton');\n buttonMeshes.system = controllerObject3D.getObjectByName('systembutton');\n buttonMeshes.trackpad = controllerObject3D.getObjectByName('touchpad');\n buttonMeshes.trigger = controllerObject3D.getObjectByName('trigger');\n this.triggerOriginalRotationX = buttonMeshes.trigger.rotation.x;\n\n // Set default colors.\n Object.keys(buttonMeshes).forEach(function (buttonName) {\n self.setButtonColor(buttonName, self.data.buttonColor);\n });\n\n // Offset pivot point.\n controllerObject3D.position.copy(INDEX_CONTROLLER_POSITION_OFFSET[this.data.hand]);\n controllerObject3D.rotation.copy(INDEX_CONTROLLER_ROTATION_OFFSET[this.data.hand]);\n\n this.el.emit('controllermodelready', {\n name: 'valve-index-controlls',\n model: this.data.model,\n rayOrigin: new THREE.Vector3(0, 0, 0)\n });\n },\n\n onAxisMoved: function (evt) {\n emitIfAxesChanged(this, this.mapping.axes, evt);\n },\n\n updateModel: function (buttonName, evtName) {\n var color;\n var isTouch;\n if (!this.data.model) { return; }\n\n isTouch = evtName.indexOf('touch') !== -1;\n // Don't change color for trackpad touch.\n if (isTouch) { return; }\n\n // Update colors.\n color = evtName === 'up' ? this.data.buttonColor : this.data.buttonHighlightColor;\n this.setButtonColor(buttonName, color);\n },\n setButtonColor: function (buttonName, color) {\n // TODO: The meshes aren't set up correctly now, skipping for the moment\n return;\n }\n});\n","var registerComponent = require('../core/component').registerComponent;\n\n/**\n * Visibility component.\n */\nmodule.exports.Component = registerComponent('visible', {\n schema: {default: true},\n\n update: function () {\n this.el.object3D.visible = this.data;\n }\n});\n","var registerComponent = require('../core/component').registerComponent;\nvar bind = require('../utils/bind');\n\nvar trackedControlsUtils = require('../utils/tracked-controls');\nvar checkControllerPresentAndSetup = trackedControlsUtils.checkControllerPresentAndSetup;\nvar emitIfAxesChanged = trackedControlsUtils.emitIfAxesChanged;\nvar onButtonEvent = trackedControlsUtils.onButtonEvent;\n\nvar AFRAME_CDN_ROOT = require('../constants').AFRAME_CDN_ROOT;\nvar VIVE_CONTROLLER_MODEL_OBJ_URL = AFRAME_CDN_ROOT + 'controllers/vive/vr_controller_vive.obj';\nvar VIVE_CONTROLLER_MODEL_OBJ_MTL = AFRAME_CDN_ROOT + 'controllers/vive/vr_controller_vive.mtl';\n\nvar isWebXRAvailable = require('../utils/').device.isWebXRAvailable;\n\nvar GAMEPAD_ID_WEBXR = 'htc-vive';\nvar GAMEPAD_ID_WEBVR = 'OpenVR ';\n\n// Prefix for Gen1 and Gen2 Oculus Touch Controllers.\nvar GAMEPAD_ID_PREFIX = isWebXRAvailable ? GAMEPAD_ID_WEBXR : GAMEPAD_ID_WEBVR;\n\n/**\n * Button IDs:\n * 0 - trackpad\n * 1 - trigger (intensity value from 0.5 to 1)\n * 2 - grip\n * 3 - menu (dispatch but better for menu options)\n * 4 - system (never dispatched on this layer)\n */\nvar INPUT_MAPPING_WEBVR = {\n axes: {trackpad: [0, 1]},\n buttons: ['trackpad', 'trigger', 'grip', 'menu', 'system']\n};\n\n/**\n * Button IDs:\n * 0 - trigger\n * 1 - squeeze\n * 2 - touchpad\n * 3 - none (dispatch but better for menu options)\n * 4 - menu (never dispatched on this layer)\n *\n * Axis:\n * 0 - touchpad x axis\n * 1 - touchpad y axis\n * Reference: https://github.com/immersive-web/webxr-input-profiles/blob/master/packages/registry/profiles/htc/htc-vive.json\n */\nvar INPUT_MAPPING_WEBXR = {\n axes: {thumbstick: [0, 1]},\n buttons: ['trigger', 'grip', 'trackpad', 'none', 'menu']\n};\n\nvar INPUT_MAPPING = isWebXRAvailable ? INPUT_MAPPING_WEBXR : INPUT_MAPPING_WEBVR;\n\n/**\n * Vive controls.\n * Interface with Vive controllers and map Gamepad events to controller buttons:\n * trackpad, trigger, grip, menu, system\n * Load a controller model and highlight the pressed buttons.\n */\nmodule.exports.Component = registerComponent('vive-controls', {\n schema: {\n hand: {default: 'left'},\n buttonColor: {type: 'color', default: '#FAFAFA'}, // Off-white.\n buttonHighlightColor: {type: 'color', default: '#22D1EE'}, // Light blue.\n model: {default: true},\n orientationOffset: {type: 'vec3'}\n },\n\n mapping: INPUT_MAPPING,\n\n init: function () {\n var self = this;\n this.controllerPresent = false;\n this.lastControllerCheck = 0;\n this.onButtonChanged = bind(this.onButtonChanged, this);\n this.onButtonDown = function (evt) { onButtonEvent(evt.detail.id, 'down', self); };\n this.onButtonUp = function (evt) { onButtonEvent(evt.detail.id, 'up', self); };\n this.onButtonTouchEnd = function (evt) { onButtonEvent(evt.detail.id, 'touchend', self); };\n this.onButtonTouchStart = function (evt) { onButtonEvent(evt.detail.id, 'touchstart', self); };\n this.previousButtonValues = {};\n\n this.bindMethods();\n },\n\n update: function () {\n var data = this.data;\n this.controllerIndex = data.hand === 'right' ? 0 : data.hand === 'left' ? 1 : 2;\n },\n\n play: function () {\n this.checkIfControllerPresent();\n this.addControllersUpdateListener();\n },\n\n pause: function () {\n this.removeEventListeners();\n this.removeControllersUpdateListener();\n },\n\n bindMethods: function () {\n this.onModelLoaded = bind(this.onModelLoaded, this);\n this.onControllersUpdate = bind(this.onControllersUpdate, this);\n this.checkIfControllerPresent = bind(this.checkIfControllerPresent, this);\n this.removeControllersUpdateListener = bind(this.removeControllersUpdateListener, this);\n this.onAxisMoved = bind(this.onAxisMoved, this);\n },\n\n addEventListeners: function () {\n var el = this.el;\n el.addEventListener('buttonchanged', this.onButtonChanged);\n el.addEventListener('buttondown', this.onButtonDown);\n el.addEventListener('buttonup', this.onButtonUp);\n el.addEventListener('touchend', this.onButtonTouchEnd);\n el.addEventListener('touchstart', this.onButtonTouchStart);\n el.addEventListener('model-loaded', this.onModelLoaded);\n el.addEventListener('axismove', this.onAxisMoved);\n this.controllerEventsActive = true;\n },\n\n removeEventListeners: function () {\n var el = this.el;\n el.removeEventListener('buttonchanged', this.onButtonChanged);\n el.removeEventListener('buttondown', this.onButtonDown);\n el.removeEventListener('buttonup', this.onButtonUp);\n el.removeEventListener('touchend', this.onButtonTouchEnd);\n el.removeEventListener('touchstart', this.onButtonTouchStart);\n el.removeEventListener('model-loaded', this.onModelLoaded);\n el.removeEventListener('axismove', this.onAxisMoved);\n this.controllerEventsActive = false;\n },\n\n /**\n * Once OpenVR returns correct hand data in supporting browsers, we can use hand property.\n * var isPresent = checkControllerPresentAndSetup(this.el.sceneEl, GAMEPAD_ID_PREFIX,\n { hand: data.hand });\n * Until then, use hardcoded index.\n */\n checkIfControllerPresent: function () {\n var data = this.data;\n checkControllerPresentAndSetup(this, GAMEPAD_ID_PREFIX, {index: this.controllerIndex, hand: data.hand});\n },\n\n injectTrackedControls: function () {\n var el = this.el;\n var data = this.data;\n\n // If we have an OpenVR Gamepad, use the fixed mapping.\n el.setAttribute('tracked-controls', {\n idPrefix: GAMEPAD_ID_PREFIX,\n hand: data.hand,\n controller: this.controllerIndex,\n orientationOffset: data.orientationOffset\n });\n\n // Load model.\n if (!this.data.model) { return; }\n this.el.setAttribute('obj-model', {\n obj: VIVE_CONTROLLER_MODEL_OBJ_URL,\n mtl: VIVE_CONTROLLER_MODEL_OBJ_MTL\n });\n },\n\n addControllersUpdateListener: function () {\n this.el.sceneEl.addEventListener('controllersupdated', this.onControllersUpdate, false);\n },\n\n removeControllersUpdateListener: function () {\n this.el.sceneEl.removeEventListener('controllersupdated', this.onControllersUpdate, false);\n },\n\n onControllersUpdate: function () {\n this.checkIfControllerPresent();\n },\n\n /**\n * Rotate the trigger button based on how hard the trigger is pressed.\n */\n onButtonChanged: function (evt) {\n var button = this.mapping.buttons[evt.detail.id];\n var buttonMeshes = this.buttonMeshes;\n var analogValue;\n\n if (!button) { return; }\n\n if (button === 'trigger') {\n analogValue = evt.detail.state.value;\n // Update trigger rotation depending on button value.\n if (buttonMeshes && buttonMeshes.trigger) {\n buttonMeshes.trigger.rotation.x = -analogValue * (Math.PI / 12);\n }\n }\n\n // Pass along changed event with button state, using button mapping for convenience.\n this.el.emit(button + 'changed', evt.detail.state);\n },\n\n onModelLoaded: function (evt) {\n var buttonMeshes;\n var controllerObject3D = evt.detail.model;\n var self = this;\n\n if (!this.data.model) { return; }\n\n // Store button meshes object to be able to change their colors.\n buttonMeshes = this.buttonMeshes = {};\n buttonMeshes.grip = {\n left: controllerObject3D.getObjectByName('leftgrip'),\n right: controllerObject3D.getObjectByName('rightgrip')\n };\n buttonMeshes.menu = controllerObject3D.getObjectByName('menubutton');\n buttonMeshes.system = controllerObject3D.getObjectByName('systembutton');\n buttonMeshes.trackpad = controllerObject3D.getObjectByName('touchpad');\n buttonMeshes.trigger = controllerObject3D.getObjectByName('trigger');\n\n // Set default colors.\n Object.keys(buttonMeshes).forEach(function (buttonName) {\n self.setButtonColor(buttonName, self.data.buttonColor);\n });\n\n // Offset pivot point.\n controllerObject3D.position.set(0, -0.015, 0.04);\n },\n\n onAxisMoved: function (evt) {\n emitIfAxesChanged(this, this.mapping.axes, evt);\n },\n\n updateModel: function (buttonName, evtName) {\n var color;\n var isTouch;\n if (!this.data.model) { return; }\n\n isTouch = evtName.indexOf('touch') !== -1;\n // Don't change color for trackpad touch.\n if (isTouch) { return; }\n\n // Update colors.\n color = evtName === 'up' ? this.data.buttonColor : this.data.buttonHighlightColor;\n this.setButtonColor(buttonName, color);\n },\n\n setButtonColor: function (buttonName, color) {\n var buttonMeshes = this.buttonMeshes;\n\n if (!buttonMeshes) { return; }\n\n // Need to do both left and right sides for grip.\n if (buttonName === 'grip') {\n buttonMeshes.grip.left.material.color.set(color);\n buttonMeshes.grip.right.material.color.set(color);\n return;\n }\n buttonMeshes[buttonName].material.color.set(color);\n }\n});\n","var registerComponent = require('../core/component').registerComponent;\nvar bind = require('../utils/bind');\n\nvar trackedControlsUtils = require('../utils/tracked-controls');\nvar checkControllerPresentAndSetup = trackedControlsUtils.checkControllerPresentAndSetup;\nvar emitIfAxesChanged = trackedControlsUtils.emitIfAxesChanged;\nvar onButtonEvent = trackedControlsUtils.onButtonEvent;\n\nvar GAMEPAD_ID_PREFIX = 'HTC Vive Focus';\n\nvar AFRAME_CDN_ROOT = require('../constants').AFRAME_CDN_ROOT;\nvar VIVE_FOCUS_CONTROLLER_MODEL_URL = AFRAME_CDN_ROOT + 'controllers/vive/focus-controller/focus-controller.gltf';\n\n/**\n * Vive Focus controls.\n * Interface with Vive Focus controller and map Gamepad events to\n * controller buttons: trackpad, trigger\n * Load a controller model and highlight the pressed buttons.\n */\nmodule.exports.Component = registerComponent('vive-focus-controls', {\n schema: {\n hand: {default: ''}, // This informs the degenerate arm model.\n buttonTouchedColor: {type: 'color', default: '#BBBBBB'},\n buttonHighlightColor: {type: 'color', default: '#7A7A7A'},\n model: {default: true},\n orientationOffset: {type: 'vec3'},\n armModel: {default: true}\n },\n\n /**\n * Button IDs:\n * 0 - trackpad\n * 1 - trigger\n */\n mapping: {\n axes: {trackpad: [0, 1]},\n buttons: ['trackpad', 'trigger']\n },\n\n bindMethods: function () {\n this.onModelLoaded = bind(this.onModelLoaded, this);\n this.onControllersUpdate = bind(this.onControllersUpdate, this);\n this.checkIfControllerPresent = bind(this.checkIfControllerPresent, this);\n this.removeControllersUpdateListener = bind(this.removeControllersUpdateListener, this);\n this.onAxisMoved = bind(this.onAxisMoved, this);\n },\n\n init: function () {\n var self = this;\n this.onButtonChanged = bind(this.onButtonChanged, this);\n this.onButtonDown = function (evt) { onButtonEvent(evt.detail.id, 'down', self); };\n this.onButtonUp = function (evt) { onButtonEvent(evt.detail.id, 'up', self); };\n this.onButtonTouchStart = function (evt) { onButtonEvent(evt.detail.id, 'touchstart', self); };\n this.onButtonTouchEnd = function (evt) { onButtonEvent(evt.detail.id, 'touchend', self); };\n this.controllerPresent = false;\n this.lastControllerCheck = 0;\n this.bindMethods();\n },\n\n addEventListeners: function () {\n var el = this.el;\n el.addEventListener('buttonchanged', this.onButtonChanged);\n el.addEventListener('buttondown', this.onButtonDown);\n el.addEventListener('buttonup', this.onButtonUp);\n el.addEventListener('touchstart', this.onButtonTouchStart);\n el.addEventListener('touchend', this.onButtonTouchEnd);\n el.addEventListener('model-loaded', this.onModelLoaded);\n el.addEventListener('axismove', this.onAxisMoved);\n this.controllerEventsActive = true;\n this.addControllersUpdateListener();\n },\n\n removeEventListeners: function () {\n var el = this.el;\n el.removeEventListener('buttonchanged', this.onButtonChanged);\n el.removeEventListener('buttondown', this.onButtonDown);\n el.removeEventListener('buttonup', this.onButtonUp);\n el.removeEventListener('touchstart', this.onButtonTouchStart);\n el.removeEventListener('touchend', this.onButtonTouchEnd);\n el.removeEventListener('model-loaded', this.onModelLoaded);\n el.removeEventListener('axismove', this.onAxisMoved);\n this.controllerEventsActive = false;\n this.removeControllersUpdateListener();\n },\n\n checkIfControllerPresent: function () {\n checkControllerPresentAndSetup(this, GAMEPAD_ID_PREFIX,\n this.data.hand ? {hand: this.data.hand} : {});\n },\n\n play: function () {\n this.checkIfControllerPresent();\n this.addControllersUpdateListener();\n },\n\n pause: function () {\n this.removeEventListeners();\n this.removeControllersUpdateListener();\n },\n\n injectTrackedControls: function () {\n var el = this.el;\n var data = this.data;\n el.setAttribute('tracked-controls', {\n armModel: data.armModel,\n idPrefix: GAMEPAD_ID_PREFIX,\n orientationOffset: data.orientationOffset\n });\n if (!this.data.model) { return; }\n this.el.setAttribute('gltf-model', VIVE_FOCUS_CONTROLLER_MODEL_URL);\n },\n\n addControllersUpdateListener: function () {\n this.el.sceneEl.addEventListener('controllersupdated', this.onControllersUpdate, false);\n },\n\n removeControllersUpdateListener: function () {\n this.el.sceneEl.removeEventListener('controllersupdated', this.onControllersUpdate, false);\n },\n\n onControllersUpdate: function () {\n this.checkIfControllerPresent();\n },\n\n onModelLoaded: function (evt) {\n var controllerObject3D = evt.detail.model;\n var buttonMeshes;\n\n if (!this.data.model) { return; }\n buttonMeshes = this.buttonMeshes = {};\n buttonMeshes.trigger = controllerObject3D.getObjectByName('BumperKey');\n buttonMeshes.triggerPressed = controllerObject3D.getObjectByName('BumperKey_Press');\n if (buttonMeshes.triggerPressed) {\n buttonMeshes.triggerPressed.visible = false;\n }\n buttonMeshes.trackpad = controllerObject3D.getObjectByName('TouchPad');\n buttonMeshes.trackpadPressed = controllerObject3D.getObjectByName('TouchPad_Press');\n if (buttonMeshes.trackpadPressed) {\n buttonMeshes.trackpadPressed.visible = false;\n }\n },\n\n // No analog buttons, only emits 0/1 values\n onButtonChanged: function (evt) {\n var button = this.mapping.buttons[evt.detail.id];\n if (!button) return;\n // Pass along changed event with button state, using button mapping for convenience.\n this.el.emit(button + 'changed', evt.detail.state);\n },\n\n onAxisMoved: function (evt) {\n emitIfAxesChanged(this, this.mapping.axes, evt);\n },\n\n updateModel: function (buttonName, evtName) {\n if (!this.data.model) { return; }\n this.updateButtonModel(buttonName, evtName);\n },\n\n updateButtonModel: function (buttonName, state) {\n var buttonMeshes = this.buttonMeshes;\n var pressedName = buttonName + 'Pressed';\n if (!buttonMeshes || !buttonMeshes[buttonName] || !buttonMeshes[pressedName]) {\n return;\n }\n var color;\n switch (state) {\n case 'down':\n color = this.data.buttonHighlightColor;\n break;\n case 'touchstart':\n color = this.data.buttonTouchedColor;\n break;\n }\n if (color) {\n buttonMeshes[pressedName].material.color.set(color);\n }\n buttonMeshes[pressedName].visible = !!color;\n buttonMeshes[buttonName].visible = !color;\n }\n});\n","var KEYCODE_TO_CODE = require('../constants').keyboardevent.KEYCODE_TO_CODE;\nvar registerComponent = require('../core/component').registerComponent;\nvar THREE = require('../lib/three');\nvar utils = require('../utils/');\n\nvar bind = utils.bind;\nvar shouldCaptureKeyEvent = utils.shouldCaptureKeyEvent;\n\nvar CLAMP_VELOCITY = 0.00001;\nvar MAX_DELTA = 0.2;\nvar KEYS = [\n 'KeyW', 'KeyA', 'KeyS', 'KeyD',\n 'ArrowUp', 'ArrowLeft', 'ArrowRight', 'ArrowDown'\n];\n\n/**\n * WASD component to control entities using WASD keys.\n */\nmodule.exports.Component = registerComponent('wasd-controls', {\n schema: {\n acceleration: {default: 65},\n adAxis: {default: 'x', oneOf: ['x', 'y', 'z']},\n adEnabled: {default: true},\n adInverted: {default: false},\n enabled: {default: true},\n fly: {default: false},\n wsAxis: {default: 'z', oneOf: ['x', 'y', 'z']},\n wsEnabled: {default: true},\n wsInverted: {default: false}\n },\n\n init: function () {\n // To keep track of the pressed keys.\n this.keys = {};\n this.easing = 1.1;\n\n this.velocity = new THREE.Vector3();\n\n // Bind methods and add event listeners.\n this.onBlur = bind(this.onBlur, this);\n this.onContextMenu = bind(this.onContextMenu, this);\n this.onFocus = bind(this.onFocus, this);\n this.onKeyDown = bind(this.onKeyDown, this);\n this.onKeyUp = bind(this.onKeyUp, this);\n this.onVisibilityChange = bind(this.onVisibilityChange, this);\n this.attachVisibilityEventListeners();\n },\n\n tick: function (time, delta) {\n var data = this.data;\n var el = this.el;\n var velocity = this.velocity;\n\n if (!velocity[data.adAxis] && !velocity[data.wsAxis] &&\n isEmptyObject(this.keys)) { return; }\n\n // Update velocity.\n delta = delta / 1000;\n this.updateVelocity(delta);\n\n if (!velocity[data.adAxis] && !velocity[data.wsAxis]) { return; }\n\n // Get movement vector and translate position.\n el.object3D.position.add(this.getMovementVector(delta));\n },\n\n update: function (oldData) {\n // Reset velocity if axis have changed.\n if (oldData.adAxis !== this.data.adAxis) { this.velocity[oldData.adAxis] = 0; }\n if (oldData.wsAxis !== this.data.wsAxis) { this.velocity[oldData.wsAxis] = 0; }\n },\n\n remove: function () {\n this.removeKeyEventListeners();\n this.removeVisibilityEventListeners();\n },\n\n play: function () {\n this.attachKeyEventListeners();\n },\n\n pause: function () {\n this.keys = {};\n this.removeKeyEventListeners();\n },\n\n updateVelocity: function (delta) {\n var acceleration;\n var adAxis;\n var adSign;\n var data = this.data;\n var keys = this.keys;\n var velocity = this.velocity;\n var wsAxis;\n var wsSign;\n\n adAxis = data.adAxis;\n wsAxis = data.wsAxis;\n\n // If FPS too low, reset velocity.\n if (delta > MAX_DELTA) {\n velocity[adAxis] = 0;\n velocity[wsAxis] = 0;\n return;\n }\n\n // https://gamedev.stackexchange.com/questions/151383/frame-rate-independant-movement-with-acceleration\n var scaledEasing = Math.pow(1 / this.easing, delta * 60);\n // Velocity Easing.\n if (velocity[adAxis] !== 0) {\n velocity[adAxis] = velocity[adAxis] * scaledEasing;\n }\n if (velocity[wsAxis] !== 0) {\n velocity[wsAxis] = velocity[wsAxis] * scaledEasing;\n }\n\n // Clamp velocity easing.\n if (Math.abs(velocity[adAxis]) < CLAMP_VELOCITY) { velocity[adAxis] = 0; }\n if (Math.abs(velocity[wsAxis]) < CLAMP_VELOCITY) { velocity[wsAxis] = 0; }\n\n if (!data.enabled) { return; }\n\n // Update velocity using keys pressed.\n acceleration = data.acceleration;\n if (data.adEnabled) {\n adSign = data.adInverted ? -1 : 1;\n if (keys.KeyA || keys.ArrowLeft) { velocity[adAxis] -= adSign * acceleration * delta; }\n if (keys.KeyD || keys.ArrowRight) { velocity[adAxis] += adSign * acceleration * delta; }\n }\n if (data.wsEnabled) {\n wsSign = data.wsInverted ? -1 : 1;\n if (keys.KeyW || keys.ArrowUp) { velocity[wsAxis] -= wsSign * acceleration * delta; }\n if (keys.KeyS || keys.ArrowDown) { velocity[wsAxis] += wsSign * acceleration * delta; }\n }\n },\n\n getMovementVector: (function () {\n var directionVector = new THREE.Vector3(0, 0, 0);\n var rotationEuler = new THREE.Euler(0, 0, 0, 'YXZ');\n\n return function (delta) {\n var rotation = this.el.getAttribute('rotation');\n var velocity = this.velocity;\n var xRotation;\n\n directionVector.copy(velocity);\n directionVector.multiplyScalar(delta);\n\n // Absolute.\n if (!rotation) { return directionVector; }\n\n xRotation = this.data.fly ? rotation.x : 0;\n\n // Transform direction relative to heading.\n rotationEuler.set(THREE.MathUtils.degToRad(xRotation), THREE.MathUtils.degToRad(rotation.y), 0);\n directionVector.applyEuler(rotationEuler);\n return directionVector;\n };\n })(),\n\n attachVisibilityEventListeners: function () {\n window.oncontextmenu = this.onContextMenu;\n window.addEventListener('blur', this.onBlur);\n window.addEventListener('focus', this.onFocus);\n document.addEventListener('visibilitychange', this.onVisibilityChange);\n },\n\n removeVisibilityEventListeners: function () {\n window.removeEventListener('blur', this.onBlur);\n window.removeEventListener('focus', this.onFocus);\n document.removeEventListener('visibilitychange', this.onVisibilityChange);\n },\n\n attachKeyEventListeners: function () {\n window.addEventListener('keydown', this.onKeyDown);\n window.addEventListener('keyup', this.onKeyUp);\n },\n\n removeKeyEventListeners: function () {\n window.removeEventListener('keydown', this.onKeyDown);\n window.removeEventListener('keyup', this.onKeyUp);\n },\n\n onContextMenu: function () {\n var keys = Object.keys(this.keys);\n for (var i = 0; i < keys.length; i++) {\n delete this.keys[keys[i]];\n }\n },\n\n onBlur: function () {\n this.pause();\n },\n\n onFocus: function () {\n this.play();\n },\n\n onVisibilityChange: function () {\n if (document.hidden) {\n this.onBlur();\n } else {\n this.onFocus();\n }\n },\n\n onKeyDown: function (event) {\n var code;\n if (!shouldCaptureKeyEvent(event)) { return; }\n code = event.code || KEYCODE_TO_CODE[event.keyCode];\n if (KEYS.indexOf(code) !== -1) { this.keys[code] = true; }\n },\n\n onKeyUp: function (event) {\n var code;\n code = event.code || KEYCODE_TO_CODE[event.keyCode];\n delete this.keys[code];\n }\n});\n\nfunction isEmptyObject (keys) {\n var key;\n for (key in keys) { return false; }\n return true;\n}\n","/* global THREE */\nvar registerComponent = require('../core/component').registerComponent;\nvar bind = require('../utils/bind');\n\nvar trackedControlsUtils = require('../utils/tracked-controls');\nvar checkControllerPresentAndSetup = trackedControlsUtils.checkControllerPresentAndSetup;\nvar emitIfAxesChanged = trackedControlsUtils.emitIfAxesChanged;\nvar onButtonEvent = trackedControlsUtils.onButtonEvent;\n\nvar utils = require('../utils/');\n\nvar debug = utils.debug('components:windows-motion-controls:debug');\nvar warn = utils.debug('components:windows-motion-controls:warn');\n\nvar DEFAULT_HANDEDNESS = require('../constants').DEFAULT_HANDEDNESS;\n\nvar AFRAME_CDN_ROOT = require('../constants').AFRAME_CDN_ROOT;\nvar MODEL_BASE_URL = AFRAME_CDN_ROOT + 'controllers/microsoft/';\nvar MODEL_FILENAMES = { left: 'left.glb', right: 'right.glb', default: 'universal.glb' };\n\nvar isWebXRAvailable = require('../utils/').device.isWebXRAvailable;\n\nvar GAMEPAD_ID_WEBXR = 'windows-mixed-reality';\nvar GAMEPAD_ID_WEBVR = 'Spatial Controller (Spatial Interaction Source) ';\nvar GAMEPAD_ID_PATTERN = /([0-9a-zA-Z]+-[0-9a-zA-Z]+)$/;\n\nvar GAMEPAD_ID_PREFIX = isWebXRAvailable ? GAMEPAD_ID_WEBXR : GAMEPAD_ID_WEBVR;\n\nvar INPUT_MAPPING_WEBVR = {\n // A-Frame specific semantic axis names\n axes: {'thumbstick': [0, 1], 'trackpad': [2, 3]},\n // A-Frame specific semantic button names\n buttons: ['thumbstick', 'trigger', 'grip', 'menu', 'trackpad'],\n // A mapping of the semantic name to node name in the glTF model file,\n // that should be transformed by axis value.\n // This array mirrors the browser Gamepad.axes array, such that\n // the mesh corresponding to axis 0 is in this array index 0.\n axisMeshNames: [\n 'THUMBSTICK_X',\n 'THUMBSTICK_Y',\n 'TOUCHPAD_TOUCH_X',\n 'TOUCHPAD_TOUCH_Y'\n ],\n // A mapping of the semantic name to button node name in the glTF model file,\n // that should be transformed by button value.\n buttonMeshNames: {\n 'trigger': 'SELECT',\n 'menu': 'MENU',\n 'grip': 'GRASP',\n 'thumbstick': 'THUMBSTICK_PRESS',\n 'trackpad': 'TOUCHPAD_PRESS'\n },\n pointingPoseMeshName: 'POINTING_POSE'\n};\n\nvar INPUT_MAPPING_WEBXR = {\n // A-Frame specific semantic axis names\n axes: {'touchpad': [0, 1], 'thumbstick': [2, 3]},\n // A-Frame specific semantic button names\n buttons: ['trigger', 'squeeze', 'touchpad', 'thumbstick', 'menu'],\n // A mapping of the semantic name to node name in the glTF model file,\n // that should be transformed by axis value.\n // This array mirrors the browser Gamepad.axes array, such that\n // the mesh corresponding to axis 0 is in this array index 0.\n axisMeshNames: [\n 'TOUCHPAD_TOUCH_X',\n 'TOUCHPAD_TOUCH_X',\n 'THUMBSTICK_X',\n 'THUMBSTICK_Y'\n ],\n // A mapping of the semantic name to button node name in the glTF model file,\n // that should be transformed by button value.\n buttonMeshNames: {\n 'trigger': 'SELECT',\n 'menu': 'MENU',\n 'squeeze': 'GRASP',\n 'thumbstick': 'THUMBSTICK_PRESS',\n 'touchpad': 'TOUCHPAD_PRESS'\n },\n pointingPoseMeshName: 'POINTING_POSE'\n};\n\nvar INPUT_MAPPING = isWebXRAvailable ? INPUT_MAPPING_WEBXR : INPUT_MAPPING_WEBVR;\n\n/**\n * Windows Motion Controller controls.\n * Interface with Windows Motion Controller controllers and map Gamepad events to\n * controller buttons: trackpad, trigger, grip, menu, thumbstick\n * Load a controller model and transform the pressed buttons.\n */\nmodule.exports.Component = registerComponent('windows-motion-controls', {\n schema: {\n hand: {default: DEFAULT_HANDEDNESS},\n // It is possible to have multiple pairs of controllers attached (a pair has both left and right).\n // Set this to 1 to use a controller from the second pair, 2 from the third pair, etc.\n pair: {default: 0},\n // If true, loads the controller glTF asset.\n model: {default: true},\n // If true, will hide the model from the scene if no matching gamepad (based on ID & hand) is connected.\n hideDisconnected: {default: true}\n },\n\n mapping: INPUT_MAPPING,\n\n bindMethods: function () {\n this.onModelError = bind(this.onModelError, this);\n this.onModelLoaded = bind(this.onModelLoaded, this);\n this.onControllersUpdate = bind(this.onControllersUpdate, this);\n this.checkIfControllerPresent = bind(this.checkIfControllerPresent, this);\n this.onAxisMoved = bind(this.onAxisMoved, this);\n },\n\n init: function () {\n var self = this;\n var el = this.el;\n this.onButtonChanged = bind(this.onButtonChanged, this);\n this.onButtonDown = function (evt) { onButtonEvent(evt.detail.id, 'down', self); };\n this.onButtonUp = function (evt) { onButtonEvent(evt.detail.id, 'up', self); };\n this.onButtonTouchStart = function (evt) { onButtonEvent(evt.detail.id, 'touchstart', self); };\n this.onButtonTouchEnd = function (evt) { onButtonEvent(evt.detail.id, 'touchend', self); };\n this.onControllerConnected = function () { self.setModelVisibility(true); };\n this.onControllerDisconnected = function () { self.setModelVisibility(false); };\n this.controllerPresent = false;\n this.lastControllerCheck = 0;\n this.previousButtonValues = {};\n this.bindMethods();\n\n // Cache for submeshes that we have looked up by name.\n this.loadedMeshInfo = {\n buttonMeshes: null,\n axisMeshes: null\n };\n\n // Pointing poses\n this.rayOrigin = {\n origin: new THREE.Vector3(),\n direction: new THREE.Vector3(0, 0, -1),\n createdFromMesh: false\n };\n\n el.addEventListener('controllerconnected', this.onControllerConnected);\n el.addEventListener('controllerdisconnected', this.onControllerDisconnected);\n },\n\n addEventListeners: function () {\n var el = this.el;\n el.addEventListener('buttonchanged', this.onButtonChanged);\n el.addEventListener('buttondown', this.onButtonDown);\n el.addEventListener('buttonup', this.onButtonUp);\n el.addEventListener('touchstart', this.onButtonTouchStart);\n el.addEventListener('touchend', this.onButtonTouchEnd);\n el.addEventListener('axismove', this.onAxisMoved);\n el.addEventListener('model-error', this.onModelError);\n el.addEventListener('model-loaded', this.onModelLoaded);\n this.controllerEventsActive = true;\n },\n\n removeEventListeners: function () {\n var el = this.el;\n el.removeEventListener('buttonchanged', this.onButtonChanged);\n el.removeEventListener('buttondown', this.onButtonDown);\n el.removeEventListener('buttonup', this.onButtonUp);\n el.removeEventListener('touchstart', this.onButtonTouchStart);\n el.removeEventListener('touchend', this.onButtonTouchEnd);\n el.removeEventListener('axismove', this.onAxisMoved);\n el.removeEventListener('model-error', this.onModelError);\n el.removeEventListener('model-loaded', this.onModelLoaded);\n this.controllerEventsActive = false;\n },\n\n checkIfControllerPresent: function () {\n checkControllerPresentAndSetup(this, GAMEPAD_ID_PREFIX, {\n hand: this.data.hand,\n index: this.data.pair,\n iterateControllerProfiles: true\n });\n },\n\n play: function () {\n this.checkIfControllerPresent();\n this.addControllersUpdateListener();\n },\n\n pause: function () {\n this.removeEventListeners();\n this.removeControllersUpdateListener();\n },\n\n updateControllerModel: function () {\n // If we do not want to load a model, or, have already loaded the model, emit the controllermodelready event.\n if (!this.data.model || this.rayOrigin.createdFromMesh) {\n this.modelReady();\n return;\n }\n\n var sourceUrl = this.createControllerModelUrl();\n this.loadModel(sourceUrl);\n },\n\n /**\n * Helper function that constructs a URL from the controller ID suffix, for future proofed\n * art assets.\n */\n createControllerModelUrl: function (forceDefault) {\n // Determine the device specific folder based on the ID suffix\n var trackedControlsComponent = this.el.components['tracked-controls'];\n var controller = trackedControlsComponent ? trackedControlsComponent.controller : null;\n var device = 'default';\n var hand = this.data.hand;\n var filename;\n\n if (controller && !window.hasNativeWebXRImplementation) {\n // Read hand directly from the controller, rather than this.data, as in the case that the controller\n // is unhanded this.data will still have 'left' or 'right' (depending on what the user inserted in to the scene).\n // In this case, we want to load the universal model, so need to get the '' from the controller.\n hand = controller.hand;\n\n if (!forceDefault) {\n var match = controller.id.match(GAMEPAD_ID_PATTERN);\n device = ((match && match[0]) || device);\n }\n }\n\n // Hand\n filename = MODEL_FILENAMES[hand] || MODEL_FILENAMES.default;\n\n // Final url\n return MODEL_BASE_URL + device + '/' + filename;\n },\n\n injectTrackedControls: function () {\n var data = this.data;\n this.el.setAttribute('tracked-controls', {\n idPrefix: GAMEPAD_ID_PREFIX,\n controller: data.pair,\n hand: data.hand,\n armModel: false\n });\n\n this.updateControllerModel();\n },\n\n addControllersUpdateListener: function () {\n this.el.sceneEl.addEventListener('controllersupdated', this.onControllersUpdate, false);\n },\n\n removeControllersUpdateListener: function () {\n this.el.sceneEl.removeEventListener('controllersupdated', this.onControllersUpdate, false);\n },\n\n onControllersUpdate: function () {\n this.checkIfControllerPresent();\n },\n\n onModelError: function (evt) {\n var defaultUrl = this.createControllerModelUrl(true);\n if (evt.detail.src !== defaultUrl) {\n warn('Failed to load controller model for device, attempting to load default.');\n this.loadModel(defaultUrl);\n } else {\n warn('Failed to load default controller model.');\n }\n },\n\n loadModel: function (url) {\n // The model is loaded by the gltf-model compoent when this attribute is initially set,\n // removed and re-loaded if the given url changes.\n this.el.setAttribute('gltf-model', 'url(' + url + ')');\n },\n\n onModelLoaded: function (evt) {\n var rootNode = this.controllerModel = evt.detail.model;\n var loadedMeshInfo = this.loadedMeshInfo;\n var i;\n var meshName;\n var mesh;\n var meshInfo;\n\n debug('Processing model');\n\n // Reset the caches\n loadedMeshInfo.buttonMeshes = {};\n loadedMeshInfo.axisMeshes = {};\n\n // Cache our meshes so we aren't traversing the hierarchy per frame\n if (rootNode) {\n // Button Meshes\n for (i = 0; i < this.mapping.buttons.length; i++) {\n meshName = this.mapping.buttonMeshNames[this.mapping.buttons[i]];\n if (!meshName) {\n debug('Skipping unknown button at index: ' + i + ' with mapped name: ' + this.mapping.buttons[i]);\n continue;\n }\n\n mesh = rootNode.getObjectByName(meshName);\n if (!mesh) {\n warn('Missing button mesh with name: ' + meshName);\n continue;\n }\n\n meshInfo = {\n index: i,\n value: getImmediateChildByName(mesh, 'VALUE'),\n pressed: getImmediateChildByName(mesh, 'PRESSED'),\n unpressed: getImmediateChildByName(mesh, 'UNPRESSED')\n };\n if (meshInfo.value && meshInfo.pressed && meshInfo.unpressed) {\n loadedMeshInfo.buttonMeshes[this.mapping.buttons[i]] = meshInfo;\n } else {\n // If we didn't find the mesh, it simply means this button won't have transforms applied as mapped button value changes.\n warn('Missing button submesh under mesh with name: ' + meshName +\n '(VALUE: ' + !!meshInfo.value +\n ', PRESSED: ' + !!meshInfo.pressed +\n ', UNPRESSED:' + !!meshInfo.unpressed +\n ')');\n }\n }\n\n // Axis Meshes\n for (i = 0; i < this.mapping.axisMeshNames.length; i++) {\n meshName = this.mapping.axisMeshNames[i];\n if (!meshName) {\n debug('Skipping unknown axis at index: ' + i);\n continue;\n }\n\n mesh = rootNode.getObjectByName(meshName);\n if (!mesh) {\n warn('Missing axis mesh with name: ' + meshName);\n continue;\n }\n\n meshInfo = {\n index: i,\n value: getImmediateChildByName(mesh, 'VALUE'),\n min: getImmediateChildByName(mesh, 'MIN'),\n max: getImmediateChildByName(mesh, 'MAX')\n };\n if (meshInfo.value && meshInfo.min && meshInfo.max) {\n loadedMeshInfo.axisMeshes[i] = meshInfo;\n } else {\n // If we didn't find the mesh, it simply means this axis won't have transforms applied as mapped axis values change.\n warn('Missing axis submesh under mesh with name: ' + meshName +\n '(VALUE: ' + !!meshInfo.value +\n ', MIN: ' + !!meshInfo.min +\n ', MAX:' + !!meshInfo.max +\n ')');\n }\n }\n\n this.calculateRayOriginFromMesh(rootNode);\n // Determine if the model has to be visible or not.\n this.setModelVisibility();\n }\n\n debug('Model load complete.');\n\n // Look through only immediate children. This will return null if no mesh exists with the given name.\n function getImmediateChildByName (object3d, value) {\n for (var i = 0, l = object3d.children.length; i < l; i++) {\n var obj = object3d.children[i];\n if (obj && obj['name'] === value) {\n return obj;\n }\n }\n return undefined;\n }\n },\n\n calculateRayOriginFromMesh: (function () {\n var quaternion = new THREE.Quaternion();\n return function (rootNode) {\n var mesh;\n\n // Calculate the pointer pose (used for rays), by applying the world transform of th POINTER_POSE node\n // in the glTF (assumes that root node is at world origin)\n this.rayOrigin.origin.set(0, 0, 0);\n this.rayOrigin.direction.set(0, 0, -1);\n this.rayOrigin.createdFromMesh = true;\n\n // Try to read Pointing pose from the source model\n mesh = rootNode.getObjectByName(this.mapping.pointingPoseMeshName);\n if (mesh) {\n var parent = rootNode.parent;\n\n // We need to read pose transforms accumulated from the root of the glTF, not the scene.\n if (parent) {\n rootNode.parent = null;\n rootNode.updateMatrixWorld(true);\n rootNode.parent = parent;\n }\n\n mesh.getWorldPosition(this.rayOrigin.origin);\n mesh.getWorldQuaternion(quaternion);\n this.rayOrigin.direction.applyQuaternion(quaternion);\n\n // Recalculate the world matrices now that the rootNode is re-attached to the parent.\n if (parent) {\n rootNode.updateMatrixWorld(true);\n }\n } else {\n debug('Mesh does not contain pointing origin data, defaulting to none.');\n }\n\n // Emit event stating that our pointing ray is now accurate.\n this.modelReady();\n };\n })(),\n\n lerpAxisTransform: (function () {\n var quaternion = new THREE.Quaternion();\n return function (axis, axisValue) {\n var axisMeshInfo = this.loadedMeshInfo.axisMeshes[axis];\n if (!axisMeshInfo) return;\n\n var min = axisMeshInfo.min;\n var max = axisMeshInfo.max;\n var target = axisMeshInfo.value;\n\n // Convert from gamepad value range (-1 to +1) to lerp range (0 to 1)\n var lerpValue = axisValue * 0.5 + 0.5;\n target.setRotationFromQuaternion(quaternion.copy(min.quaternion).slerp(max.quaternion, lerpValue));\n target.position.lerpVectors(min.position, max.position, lerpValue);\n };\n })(),\n\n lerpButtonTransform: (function () {\n var quaternion = new THREE.Quaternion();\n return function (buttonName, buttonValue) {\n var buttonMeshInfo = this.loadedMeshInfo.buttonMeshes[buttonName];\n if (!buttonMeshInfo) return;\n\n var min = buttonMeshInfo.unpressed;\n var max = buttonMeshInfo.pressed;\n var target = buttonMeshInfo.value;\n\n target.setRotationFromQuaternion(quaternion.copy(min.quaternion).slerp(max.quaternion, buttonValue));\n target.position.lerpVectors(min.position, max.position, buttonValue);\n };\n })(),\n\n modelReady: function () {\n this.el.emit('controllermodelready', {\n name: 'windows-motion-controls',\n model: this.data.model,\n rayOrigin: this.rayOrigin\n });\n },\n\n onButtonChanged: function (evt) {\n var buttonName = this.mapping.buttons[evt.detail.id];\n\n if (buttonName) {\n // Update the button mesh transform\n if (this.loadedMeshInfo && this.loadedMeshInfo.buttonMeshes) {\n this.lerpButtonTransform(buttonName, evt.detail.state.value);\n }\n\n // Only emit events for buttons that we know how to map from index to name\n this.el.emit(buttonName + 'changed', evt.detail.state);\n }\n },\n\n onAxisMoved: function (evt) {\n var numAxes = this.mapping.axisMeshNames.length;\n\n // Only attempt to update meshes if we have valid data.\n if (this.loadedMeshInfo && this.loadedMeshInfo.axisMeshes) {\n for (var axis = 0; axis < numAxes; axis++) {\n // Update the button mesh transform\n this.lerpAxisTransform(axis, evt.detail.axis[axis] || 0.0);\n }\n }\n\n emitIfAxesChanged(this, this.mapping.axes, evt);\n },\n\n setModelVisibility: function (visible) {\n var model = this.el.getObject3D('mesh');\n visible = visible !== undefined ? visible : this.modelVisible;\n this.modelVisible = visible;\n if (!model) { return; }\n model.visible = visible;\n }\n});\n","module.exports = {\n AFRAME_CDN_ROOT: window.AFRAME_CDN_ROOT || 'https://cdn.aframe.io/',\n AFRAME_INJECTED: 'aframe-injected',\n DEFAULT_CAMERA_HEIGHT: 1.6,\n DEFAULT_HANDEDNESS: 'right',\n keyboardevent: require('./keyboardevent')\n};\n","module.exports = {\n // Tiny KeyboardEvent.code polyfill.\n KEYCODE_TO_CODE: {\n '38': 'ArrowUp',\n '37': 'ArrowLeft',\n '40': 'ArrowDown',\n '39': 'ArrowRight',\n '87': 'KeyW',\n '65': 'KeyA',\n '83': 'KeyS',\n '68': 'KeyD'\n }\n};\n","/* global customElements */\nvar ANode = require('./a-node').ANode;\nvar bind = require('../utils/bind');\nvar debug = require('../utils/debug');\nvar THREE = require('../lib/three');\n\nvar fileLoader = new THREE.FileLoader();\nvar warn = debug('core:a-assets:warn');\n\n/**\n * Asset management system. Handles blocking on asset loading.\n */\nclass AAssets extends ANode {\n constructor () {\n super();\n this.isAssets = true;\n this.fileLoader = fileLoader;\n this.timeout = null;\n }\n\n connectedCallback () {\n // Defer if DOM is not ready.\n if (document.readyState !== 'complete') {\n document.addEventListener('readystatechange', this.onReadyStateChange.bind(this));\n return;\n }\n\n this.doConnectedCallback();\n }\n\n doConnectedCallback () {\n var self = this;\n var i;\n var loaded = [];\n var mediaEl;\n var mediaEls;\n var imgEl;\n var imgEls;\n var timeout;\n\n super.connectedCallback();\n\n if (!this.parentNode.isScene) {\n throw new Error(' must be a child of a .');\n }\n\n // Wait for ![]()
s.\n imgEls = this.querySelectorAll('img');\n for (i = 0; i < imgEls.length; i++) {\n imgEl = fixUpMediaElement(imgEls[i]);\n loaded.push(new Promise(function (resolve, reject) {\n // Set in cache because we won't be needing to call three.js loader if we have.\n // a loaded media element.\n THREE.Cache.add(imgEls[i].getAttribute('src'), imgEl);\n if (imgEl.complete) {\n resolve();\n return;\n }\n imgEl.onload = resolve;\n imgEl.onerror = reject;\n }));\n }\n\n // Wait for