-
-
Notifications
You must be signed in to change notification settings - Fork 152
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: renderers/webxr/webxrmanager (#7)
* fix (three): update WebXRManager getReferenceSpace / getSession should be nullable * fix (three): Update WebXRManager setSession should return Promise<void> instead of void since r125 See: mrdoob/three.js#20754 * fix (three): Update WebXRManager Trivial rename of arguments * test (three): add a test webxr-vr-cube.ts, a simple example featuring WebXR VR * fix (three): Update XRSession XRSession should extend EventTarget * chore (three): Modify tsconfig.json Forgot to add `webxr-vr-cube.ts` to the tsconfig.json * docs: add FMS-Cat as a contributor * refactor: ran prettier:write
- Loading branch information
Yutaka "FMS_Cat" Obuchi
committed
Feb 8, 2021
1 parent
5f58cbd
commit f82d6ea
Showing
6 changed files
with
117 additions
and
10 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| // A simple WebXR VR example that just shows a cube. | ||
|
|
||
| import * as THREE from 'three'; | ||
|
|
||
| const container = document.createElement('div'); | ||
|
|
||
| const renderer = new THREE.WebGLRenderer({ antialias: true }); | ||
| const camera = new THREE.PerspectiveCamera(50, 2, 0.1, 10); | ||
| const scene = new THREE.Scene(); | ||
|
|
||
| const vrButton = document.createElement('button'); | ||
| let currentSession: THREE.XRSession | null = null; | ||
| let mesh: THREE.Mesh; | ||
|
|
||
| init(); | ||
|
|
||
| async function onSessionStarted(session: THREE.XRSession): Promise<void> { | ||
| session.addEventListener('end', onSessionEnded); | ||
|
|
||
| await renderer.xr.setSession(session); | ||
| vrButton.innerText = 'Exit VR'; | ||
|
|
||
| currentSession = session; | ||
| } | ||
|
|
||
| function onSessionEnded(): void { | ||
| if (currentSession == null) { | ||
| return; | ||
| } | ||
|
|
||
| currentSession.removeEventListener('end', onSessionEnded); | ||
| vrButton.innerText = 'Enter VR'; | ||
|
|
||
| currentSession = null; | ||
| } | ||
|
|
||
| async function checkVRSupport(): Promise<THREE.XR | null> { | ||
| if ('xr' in navigator) { | ||
| const xr: THREE.XR = (navigator as any).xr; | ||
| const isSupported = await xr.isSessionSupported('immersive-vr').catch(() => false); | ||
| if (isSupported) { | ||
| return xr; | ||
| } else { | ||
| return null; | ||
| } | ||
| } else { | ||
| return null; | ||
| } | ||
| } | ||
|
|
||
| function init(): void { | ||
| document.body.appendChild(container); | ||
|
|
||
| renderer.setPixelRatio(window.devicePixelRatio); | ||
| renderer.setSize(300, 150); | ||
| renderer.outputEncoding = THREE.sRGBEncoding; | ||
| renderer.xr.enabled = true; | ||
| container.appendChild(renderer.domElement); | ||
|
|
||
| camera.position.set(0, 1.6, 0); | ||
| scene.add(camera); | ||
|
|
||
| const geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5); | ||
| const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 }); | ||
| mesh = new THREE.Mesh(geometry, material); | ||
| mesh.position.set(0, 1.6, -3); | ||
| scene.add(mesh); | ||
|
|
||
| const directionalLight = new THREE.DirectionalLight(0xffffff, 1); | ||
| directionalLight.position.set(1, 1, 1).normalize(); | ||
| scene.add(directionalLight); | ||
|
|
||
| checkVRSupport().then(xr => { | ||
| if (xr) { | ||
| vrButton.innerText = 'Enter VR'; | ||
|
|
||
| vrButton.addEventListener('click', async () => { | ||
| if (currentSession == null) { | ||
| const sessionInit = { optionalFeatures: ['local-floor', 'bounded-floor'] }; | ||
| const session = await xr.requestSession('immersive-vr', sessionInit); | ||
| await onSessionStarted(session); | ||
| } | ||
| }); | ||
| } else { | ||
| vrButton.innerText = 'VR Not Supported'; | ||
| } | ||
|
|
||
| container.appendChild(vrButton); | ||
| }); | ||
|
|
||
| renderer.setAnimationLoop(() => { | ||
| mesh.rotation.x += 0.005; | ||
| mesh.rotation.y += 0.01; | ||
|
|
||
| renderer.render(scene, camera); | ||
| }); | ||
| } |
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