From 74fdf547679316e954b126aa4385f91db5d047ce Mon Sep 17 00:00:00 2001 From: Mugen87 Date: Fri, 12 Jul 2019 11:28:53 +0200 Subject: [PATCH] JSM: Added module and TS file for WebVR. --- .../How-to-create-VR-content.html | 2 +- .../How-to-create-VR-content.html | 2 +- editor/js/Menubar.View.js | 10 +- editor/js/libs/app.js | 2 +- examples/js/vr/WebVR.js | 34 ++- examples/jsm/vr/WebVR.d.ts | 11 + examples/jsm/vr/WebVR.js | 245 ++++++++++++++++++ examples/webvr_ballshooter.html | 2 +- examples/webvr_cubes.html | 2 +- examples/webvr_dragging.html | 2 +- examples/webvr_lorenzattractor.html | 2 +- examples/webvr_paint.html | 2 +- examples/webvr_panorama.html | 2 +- examples/webvr_rollercoaster.html | 2 +- examples/webvr_sandbox.html | 2 +- examples/webvr_sculpt.html | 2 +- examples/webvr_video.html | 2 +- examples/webvr_vive_paint.html | 2 +- examples/webvr_vive_sculpt.html | 2 +- utils/modularize.js | 1 + 20 files changed, 299 insertions(+), 32 deletions(-) create mode 100644 examples/jsm/vr/WebVR.d.ts create mode 100644 examples/jsm/vr/WebVR.js diff --git a/docs/manual/en/introduction/How-to-create-VR-content.html b/docs/manual/en/introduction/How-to-create-VR-content.html index 71d297c46d4ae2..45231e99e9470b 100644 --- a/docs/manual/en/introduction/How-to-create-VR-content.html +++ b/docs/manual/en/introduction/How-to-create-VR-content.html @@ -25,7 +25,7 @@

Workflow

-<script src="/path/to/WebVR.js"></script> +import { WEBVR } from 'three/examples/jsm/vr/WebVR.js';

diff --git a/docs/manual/zh/introduction/How-to-create-VR-content.html b/docs/manual/zh/introduction/How-to-create-VR-content.html index d14c0dd41304ba..123d3c7f77dddb 100644 --- a/docs/manual/zh/introduction/How-to-create-VR-content.html +++ b/docs/manual/zh/introduction/How-to-create-VR-content.html @@ -24,7 +24,7 @@

工作流程

-<script src="/path/to/WebVR.js"></script> +import { WEBVR } from 'three/examples/jsm/vr/WebVR.js';

*WEBVR.createButton()*做了两件重要的事情：首先，它创建了一个按钮，指示了VR的兼容性； diff --git a/editor/js/Menubar.View.js b/editor/js/Menubar.View.js index 2acaa3fd07f214..3cb905c6d4a7ae 100644 --- a/editor/js/Menubar.View.js +++ b/editor/js/Menubar.View.js @@ -23,15 +23,7 @@ Menubar.View = function ( editor ) { option.setTextContent( 'VR mode' ); option.onClick( function () { - if ( WEBVR.isAvailable() === true ) { - - editor.signals.enterVR.dispatch(); - - } else { - - alert( 'WebVR not available' ); - - } + editor.signals.enterVR.dispatch(); } ); options.add( option ); diff --git a/editor/js/libs/app.js b/editor/js/libs/app.js index bbc4a06701ad9c..1e379cf986eaf8 100644 --- a/editor/js/libs/app.js +++ b/editor/js/libs/app.js @@ -112,7 +112,7 @@ var APP = { if ( renderer.vr.enabled ) { - dom.appendChild( WEBVR.createButton( renderer ) ); + dom.appendChild( THREE.WEBVR.createButton( renderer ) ); } diff --git a/examples/js/vr/WebVR.js b/examples/js/vr/WebVR.js index 5edc49e3bc948d..076228143e0cf0 100644 --- a/examples/js/vr/WebVR.js +++ b/examples/js/vr/WebVR.js @@ -5,7 +5,7 @@ * Based on @tojiro's vr-samples-utils.js */ -var WEBVR = { +THREE.WEBVR = { createButton: function ( renderer, options ) { @@ -25,8 +25,17 @@ var WEBVR = { button.textContent = 'ENTER VR'; - button.onmouseenter = function () { button.style.opacity = '1.0'; }; - button.onmouseleave = function () { button.style.opacity = '0.5'; }; + button.onmouseenter = function () { + + button.style.opacity = '1.0'; + + }; + + button.onmouseleave = function () { + + button.style.opacity = '0.5'; + + }; button.onclick = function () { @@ -38,7 +47,7 @@ var WEBVR = { } - function showEnterXR( device ) { + function showEnterXR( /*device*/ ) { var currentSession = null; @@ -53,7 +62,7 @@ var WEBVR = { } - function onSessionEnded( event ) { + function onSessionEnded( /*event*/ ) { currentSession.removeEventListener( 'end', onSessionEnded ); @@ -74,8 +83,17 @@ var WEBVR = { button.textContent = 'ENTER XR'; - button.onmouseenter = function () { button.style.opacity = '1.0'; }; - button.onmouseleave = function () { button.style.opacity = '0.5'; }; + button.onmouseenter = function () { + + button.style.opacity = '1.0'; + + }; + + button.onmouseleave = function () { + + button.style.opacity = '0.5'; + + }; button.onclick = function () { @@ -167,7 +185,7 @@ var WEBVR = { }, false ); - window.addEventListener( 'vrdisplaydisconnect', function ( event ) { + window.addEventListener( 'vrdisplaydisconnect', function ( /*event*/ ) { showVRNotFound(); diff --git a/examples/jsm/vr/WebVR.d.ts b/examples/jsm/vr/WebVR.d.ts new file mode 100644 index 00000000000000..f888bc33cc784d --- /dev/null +++ b/examples/jsm/vr/WebVR.d.ts @@ -0,0 +1,11 @@ +import { + WebGLRenderer +} from '../../../src/Three'; + +export interface WEBVROptions { + referenceSpaceType: string; +} + +export namespace WEBVR { + export function createButton(renderer: WebGLRenderer, options: WEBVROptions); +} diff --git a/examples/jsm/vr/WebVR.js b/examples/jsm/vr/WebVR.js new file mode 100644 index 00000000000000..1b93855157bb5a --- /dev/null +++ b/examples/jsm/vr/WebVR.js @@ -0,0 +1,245 @@ +/** + * @author mrdoob / http://mrdoob.com + * @author Mugen87 / https://github.com/Mugen87 + * + * Based on @tojiro's vr-samples-utils.js + */ + + + +var WEBVR = { + + createButton: function ( renderer, options ) { + + if ( options && options.referenceSpaceType ) { + + renderer.vr.setReferenceSpaceType( options.referenceSpaceType ); + + } + + function showEnterVR( device ) { + + button.style.display = ''; + + button.style.cursor = 'pointer'; + button.style.left = 'calc(50% - 50px)'; + button.style.width = '100px'; + + button.textContent = 'ENTER VR'; + + button.onmouseenter = function () { + + button.style.opacity = '1.0'; + + }; + + button.onmouseleave = function () { + + button.style.opacity = '0.5'; + + }; + + button.onclick = function () { + + device.isPresenting ? device.exitPresent() : device.requestPresent( [ { source: renderer.domElement } ] ); + + }; + + renderer.vr.setDevice( device ); + + } + + function showEnterXR( /*device*/ ) { + + var currentSession = null; + + function onSessionStarted( session ) { + + session.addEventListener( 'end', onSessionEnded ); + + renderer.vr.setSession( session ); + button.textContent = 'EXIT XR'; + + currentSession = session; + + } + + function onSessionEnded( /*event*/ ) { + + currentSession.removeEventListener( 'end', onSessionEnded ); + + renderer.vr.setSession( null ); + button.textContent = 'ENTER XR'; + + currentSession = null; + + } + + // + + button.style.display = ''; + + button.style.cursor = 'pointer'; + button.style.left = 'calc(50% - 50px)'; + button.style.width = '100px'; + + button.textContent = 'ENTER XR'; + + 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-vr' ).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 showVRNotFound() { + + disableButton(); + + button.textContent = 'VR NOT FOUND'; + + renderer.vr.setDevice( null ); + + } + + function showXRNotFound() { + + disableButton(); + + button.textContent = 'XR NOT FOUND'; + + } + + 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 && 'supportsSession' in navigator.xr ) { + + var button = document.createElement( 'button' ); + button.style.display = 'none'; + + stylizeElement( button ); + + navigator.xr.supportsSession( 'immersive-vr' ).then( showEnterXR ).catch( showXRNotFound ); + + return button; + + } else if ( 'getVRDisplays' in navigator ) { + + var button = document.createElement( 'button' ); + button.style.display = 'none'; + + stylizeElement( button ); + + window.addEventListener( 'vrdisplayconnect', function ( event ) { + + showEnterVR( event.display ); + + }, false ); + + window.addEventListener( 'vrdisplaydisconnect', function ( /*event*/ ) { + + showVRNotFound(); + + }, false ); + + window.addEventListener( 'vrdisplaypresentchange', function ( event ) { + + button.textContent = event.display.isPresenting ? 'EXIT VR' : 'ENTER VR'; + + }, false ); + + window.addEventListener( 'vrdisplayactivate', function ( event ) { + + event.display.requestPresent( [ { source: renderer.domElement } ] ); + + }, false ); + + navigator.getVRDisplays() + .then( function ( displays ) { + + if ( displays.length > 0 ) { + + showEnterVR( displays[ 0 ] ); + + } else { + + showVRNotFound(); + + } + + } ).catch( showVRNotFound ); + + return button; + + } else { + + var message = document.createElement( 'a' ); + message.href = 'https://webvr.info'; + message.innerHTML = 'WEBVR NOT SUPPORTED'; + + message.style.left = 'calc(50% - 90px)'; + message.style.width = '180px'; + message.style.textDecoration = 'none'; + + stylizeElement( message ); + + return message; + + } + + } + +}; + +export { WEBVR }; diff --git a/examples/webvr_ballshooter.html b/examples/webvr_ballshooter.html index 33f611d3e901e8..c063fd1f01a266 100644 --- a/examples/webvr_ballshooter.html +++ b/examples/webvr_ballshooter.html @@ -13,13 +13,13 @@ - - - - - - - - - -