-
-
Notifications
You must be signed in to change notification settings - Fork 166
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Use new hand models, fix default controllers, remove three-stdlib dep…
…endency for now
- Loading branch information
Showing
13 changed files
with
949 additions
and
123 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,159 @@ | ||
| class ARButton { | ||
| static createButton(renderer, sessionInit = {}) { | ||
| const button = document.createElement('button') | ||
|
|
||
| function showStartAR(/*device*/) { | ||
| if (sessionInit.domOverlay === undefined) { | ||
| const overlay = document.createElement('div') | ||
| overlay.style.display = 'none' | ||
| document.body.appendChild(overlay) | ||
|
|
||
| const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg') | ||
| svg.setAttribute('width', 38) | ||
| svg.setAttribute('height', 38) | ||
| svg.style.position = 'absolute' | ||
| svg.style.right = '20px' | ||
| svg.style.top = '20px' | ||
| svg.addEventListener('click', function () { | ||
| currentSession.end() | ||
| }) | ||
| overlay.appendChild(svg) | ||
|
|
||
| const path = document.createElementNS('http://www.w3.org/2000/svg', 'path') | ||
| path.setAttribute('d', 'M 12,12 L 28,28 M 28,12 12,28') | ||
| path.setAttribute('stroke', '#fff') | ||
| path.setAttribute('stroke-width', 2) | ||
| svg.appendChild(path) | ||
|
|
||
| if (sessionInit.optionalFeatures === undefined) { | ||
| sessionInit.optionalFeatures = [] | ||
| } | ||
|
|
||
| sessionInit.optionalFeatures.push('dom-overlay') | ||
| sessionInit.domOverlay = { root: overlay } | ||
| } | ||
|
|
||
| // | ||
|
|
||
| let currentSession = null | ||
|
|
||
| async function onSessionStarted(session) { | ||
| session.addEventListener('end', onSessionEnded) | ||
|
|
||
| renderer.xr.setReferenceSpaceType('local') | ||
|
|
||
| await renderer.xr.setSession(session) | ||
|
|
||
| button.textContent = 'STOP AR' | ||
| sessionInit.domOverlay.root.style.display = '' | ||
|
|
||
| currentSession = session | ||
| } | ||
|
|
||
| function onSessionEnded(/*event*/) { | ||
| currentSession.removeEventListener('end', onSessionEnded) | ||
|
|
||
| button.textContent = 'START AR' | ||
| sessionInit.domOverlay.root.style.display = 'none' | ||
|
|
||
| currentSession = null | ||
| } | ||
|
|
||
| // | ||
|
|
||
| button.style.display = '' | ||
|
|
||
| button.style.cursor = 'pointer' | ||
| button.style.left = 'calc(50% - 50px)' | ||
| button.style.width = '100px' | ||
|
|
||
| button.textContent = 'START AR' | ||
|
|
||
| button.onmouseenter = function () { | ||
| button.style.opacity = '1.0' | ||
| } | ||
|
|
||
| button.onmouseleave = function () { | ||
| button.style.opacity = '0.5' | ||
| } | ||
|
|
||
| button.onclick = function () { | ||
| if (currentSession === null) { | ||
| navigator.xr.requestSession('immersive-ar', sessionInit).then(onSessionStarted) | ||
| } else { | ||
| currentSession.end() | ||
| } | ||
| } | ||
| } | ||
|
|
||
| function disableButton() { | ||
| button.style.display = '' | ||
|
|
||
| button.style.cursor = 'auto' | ||
| button.style.left = 'calc(50% - 75px)' | ||
| button.style.width = '150px' | ||
|
|
||
| button.onmouseenter = null | ||
| button.onmouseleave = null | ||
|
|
||
| button.onclick = null | ||
| } | ||
|
|
||
| function showARNotSupported() { | ||
| disableButton() | ||
|
|
||
| button.textContent = 'AR NOT SUPPORTED' | ||
| } | ||
|
|
||
| function stylizeElement(element) { | ||
| element.style.position = 'absolute' | ||
| element.style.bottom = '20px' | ||
| element.style.padding = '12px 6px' | ||
| element.style.border = '1px solid #fff' | ||
| element.style.borderRadius = '4px' | ||
| element.style.background = 'rgba(0,0,0,0.1)' | ||
| element.style.color = '#fff' | ||
| element.style.font = 'normal 13px sans-serif' | ||
| element.style.textAlign = 'center' | ||
| element.style.opacity = '0.5' | ||
| element.style.outline = 'none' | ||
| element.style.zIndex = '999' | ||
| } | ||
|
|
||
| if ('xr' in navigator) { | ||
| button.id = 'ARButton' | ||
| button.style.display = 'none' | ||
|
|
||
| stylizeElement(button) | ||
|
|
||
| navigator.xr | ||
| .isSessionSupported('immersive-ar') | ||
| .then(function (supported) { | ||
| supported ? showStartAR() : showARNotSupported() | ||
| }) | ||
| .catch(showARNotSupported) | ||
|
|
||
| return button | ||
| } else { | ||
| const message = document.createElement('a') | ||
|
|
||
| if (window.isSecureContext === false) { | ||
| message.href = document.location.href.replace(/^http:/, 'https:') | ||
| message.innerHTML = 'WEBXR NEEDS HTTPS' // TODO Improve message | ||
| } else { | ||
| message.href = 'https://immersiveweb.dev/' | ||
| message.innerHTML = 'WEBXR NOT AVAILABLE' | ||
| } | ||
|
|
||
| message.style.left = 'calc(50% - 90px)' | ||
| message.style.width = '180px' | ||
| message.style.textDecoration = 'none' | ||
|
|
||
| stylizeElement(message) | ||
|
|
||
| return message | ||
| } | ||
| } | ||
| } | ||
|
|
||
| export { ARButton } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import { Object3D, Sphere, Box3 } from 'three' | ||
| import { XRHandMeshModel } from './XRHandMeshModel.js' | ||
|
|
||
| const TOUCH_RADIUS = 0.01 | ||
| const POINTING_JOINT = 'index-finger-tip' | ||
|
|
||
| class OculusHandModel extends Object3D { | ||
| constructor(controller) { | ||
| super() | ||
|
|
||
| this.controller = controller | ||
| this.motionController = null | ||
| this.envMap = null | ||
|
|
||
| this.mesh = null | ||
|
|
||
| controller.addEventListener('connected', (event) => { | ||
| const xrInputSource = event.data | ||
|
|
||
| if (xrInputSource.hand && !this.motionController) { | ||
| this.xrInputSource = xrInputSource | ||
|
|
||
| this.motionController = new XRHandMeshModel(this, controller, this.path, xrInputSource.handedness) | ||
| } | ||
| }) | ||
|
|
||
| controller.addEventListener('disconnected', () => { | ||
| this.clear() | ||
| this.motionController = null | ||
| }) | ||
| } | ||
|
|
||
| updateMatrixWorld(force) { | ||
| super.updateMatrixWorld(force) | ||
|
|
||
| if (this.motionController) { | ||
| this.motionController.updateMesh() | ||
| } | ||
| } | ||
|
|
||
| getPointerPosition() { | ||
| const indexFingerTip = this.controller.joints[POINTING_JOINT] | ||
| if (indexFingerTip) { | ||
| return indexFingerTip.position | ||
| } else { | ||
| return null | ||
| } | ||
| } | ||
|
|
||
| intersectBoxObject(boxObject) { | ||
| const pointerPosition = this.getPointerPosition() | ||
| if (pointerPosition) { | ||
| const indexSphere = new Sphere(pointerPosition, TOUCH_RADIUS) | ||
| const box = new Box3().setFromObject(boxObject) | ||
| return indexSphere.intersectsBox(box) | ||
| } else { | ||
| return false | ||
| } | ||
| } | ||
|
|
||
| checkButton(button) { | ||
| if (this.intersectBoxObject(button)) { | ||
| button.onPress() | ||
| } else { | ||
| button.onClear() | ||
| } | ||
|
|
||
| if (button.isPressed()) { | ||
| button.whilePressed() | ||
| } | ||
| } | ||
| } | ||
|
|
||
| export { OculusHandModel } |
Oops, something went wrong.