Skip to content

Commit d868ce7

Browse files
mrdoobmrdoob
committed
Editor: Added VR mode (WIP).
1 parent 5e6aefc commit d868ce7

File tree

6 files changed

+424
-18
lines changed

6 files changed

+424
-18
lines changed

‎editor/index.html

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,8 @@
9797
<script src="js/Menubar.Edit.js"></script>
9898
<script src="js/Menubar.Add.js"></script>
9999
<script src="js/Menubar.Play.js"></script>
100-
<script src="js/Menubar.Examples.js"></script>
100+
<script src="js/Menubar.View.js"></script>
101+
<!-- <script src="js/Menubar.Examples.js"></script> -->
101102
<script src="js/Menubar.Help.js"></script>
102103
<script src="js/Menubar.Status.js"></script>
103104
<script src="js/Sidebar.js"></script>
@@ -152,6 +153,8 @@
152153

153154
<!-- <script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="qyqgfqd9j8z890t"></script> -->
154155

156+
<script src="js/libs/html2canvas.js"></script>
157+
155158
<script>
156159

157160
window.URL = window.URL || window.webkitURL;
@@ -382,6 +385,51 @@
382385
}, false );
383386
*/
384387

388+
// VR
389+
390+
var groupVR;
391+
392+
// TODO: Use editor.signals.enteredVR (WebVR 1.0)
393+
394+
editor.signals.enterVR.add( function () {
395+
396+
if ( groupVR === undefined ) {
397+
398+
groupVR = new THREE.HTMLGroup( viewport.dom );
399+
editor.sceneHelpers.add( groupVR );
400+
401+
var mesh = new THREE.HTMLMesh( sidebar.dom );
402+
mesh.position.set( 15, 0, 15 );
403+
mesh.rotation.y = - 0.5;
404+
groupVR.add( mesh );
405+
406+
var signals = editor.signals;
407+
408+
function updateTexture() {
409+
410+
mesh.material.map.update();
411+
412+
}
413+
414+
signals.objectSelected.add( updateTexture );
415+
signals.objectAdded.add( updateTexture );
416+
signals.objectChanged.add( updateTexture );
417+
signals.objectRemoved.add( updateTexture );
418+
signals.sceneGraphChanged.add( updateTexture );
419+
signals.historyChanged.add( updateTexture );
420+
421+
}
422+
423+
groupVR.visible = true;
424+
425+
} );
426+
427+
editor.signals.exitedVR.add( function () {
428+
429+
if ( groupVR !== undefined ) groupVR.visible = false;
430+
431+
} );
432+
385433
</script>
386434
</body>
387435
</html>

‎editor/js/Editor.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,13 @@ var Editor = function () {
2222
startPlayer: new Signal(),
2323
stopPlayer: new Signal(),
2424

25+
// vr
26+
27+
enterVR: new Signal(),
28+
29+
enteredVR: new Signal(),
30+
exitedVR: new Signal(),
31+
2532
// actions
2633

2734
showModal: new Signal(),

‎editor/js/Menubar.View.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/**
2+
* @author mrdoob / http://mrdoob.com/
3+
*/
4+
5+
Menubar.View = function ( editor ) {
6+
7+
var container = new UI.Panel();
8+
container.setClass( 'menu' );
9+
10+
var title = new UI.Panel();
11+
title.setClass( 'title' );
12+
title.setTextContent( 'View' );
13+
container.add( title );
14+
15+
var options = new UI.Panel();
16+
options.setClass( 'options' );
17+
container.add( options );
18+
19+
// VR mode
20+
21+
var option = new UI.Row();
22+
option.setClass( 'option' );
23+
option.setTextContent( 'VR mode' );
24+
option.onClick( function () {
25+
26+
if ( WEBVR.isAvailable() === true ) {
27+
28+
editor.signals.enterVR.dispatch();
29+
30+
} else {
31+
32+
alert( 'WebVR nor available' );
33+
34+
}
35+
36+
} );
37+
options.add( option );
38+
39+
return container;
40+
41+
};

‎editor/js/Menubar.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ var Menubar = function ( editor ) {
1111
container.add( new Menubar.Edit( editor ) );
1212
container.add( new Menubar.Add( editor ) );
1313
container.add( new Menubar.Play( editor ) );
14-
container.add( new Menubar.Examples( editor ) );
14+
container.add( new Menubar.View( editor ) );
15+
// container.add( new Menubar.Examples( editor ) );
1516
container.add( new Menubar.Help( editor ) );
1617

1718
container.add( new Menubar.Status( editor ) );

‎editor/js/Viewport.js

Lines changed: 62 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,22 +12,35 @@ var Viewport = function ( editor ) {
1212

1313
container.add( new Viewport.Info( editor ) );
1414

15+
//
16+
17+
var renderer = null;
18+
19+
var camera = editor.camera;
1520
var scene = editor.scene;
1621
var sceneHelpers = editor.sceneHelpers;
1722

1823
var objects = [];
1924

25+
//
26+
27+
var vrEffect, vrControls;
28+
29+
if ( WEBVR.isAvailable() === true ) {
30+
31+
var vrCamera = new THREE.PerspectiveCamera();
32+
vrCamera.projectionMatrix = camera.projectionMatrix;
33+
camera.add( vrCamera );
34+
35+
}
36+
2037
// helpers
2138

2239
var grid = new THREE.GridHelper( 30, 60 );
2340
sceneHelpers.add( grid );
2441

2542
//
2643

27-
var camera = editor.camera;
28-
29-
//
30-
3144
var box = new THREE.Box3();
3245

3346
var selectionBox = new THREE.BoxHelper();
@@ -278,6 +291,12 @@ var Viewport = function ( editor ) {
278291

279292
} );
280293

294+
signals.enterVR.add( function () {
295+
296+
vrEffect.isPresenting ? vrEffect.exitPresent() : vrEffect.requestPresent();
297+
298+
} );
299+
281300
var clearColor;
282301

283302
signals.themeChanged.add( function ( value ) {
@@ -341,6 +360,19 @@ var Viewport = function ( editor ) {
341360

342361
container.dom.appendChild( renderer.domElement );
343362

363+
if ( WEBVR.isAvailable() === true ) {
364+
365+
vrControls = new THREE.VRControls( vrCamera );
366+
vrEffect = new THREE.VREffect( renderer );
367+
368+
window.addEventListener( 'vrdisplaypresentchange', function ( event ) {
369+
370+
effect.isPresenting ? signals.enteredVR.dispatch() : signals.exitedVR.dispatch();
371+
372+
}, false );
373+
374+
}
375+
344376
render();
345377

346378
} );
@@ -537,12 +569,6 @@ var Viewport = function ( editor ) {
537569

538570
//
539571

540-
var renderer = null;
541-
542-
animate();
543-
544-
//
545-
546572
function updateFog( root ) {
547573

548574
if ( root.fog ) {
@@ -581,30 +607,50 @@ var Viewport = function ( editor ) {
581607
582608
}
583609
610+
}
611+
*/
612+
613+
if ( vrEffect && vrEffect.isPresenting ) {
614+
584615
render();
585616

586617
}
587618

588-
*/
589-
590619
}
591620

592621
function render() {
593622

594623
sceneHelpers.updateMatrixWorld();
595624
scene.updateMatrixWorld();
596625

597-
renderer.clear();
598-
renderer.render( scene, camera );
626+
if ( vrEffect && vrEffect.isPresenting ) {
627+
628+
vrControls.update();
629+
630+
camera.updateMatrixWorld();
631+
renderer.clear();
632+
633+
vrEffect.render( scene, vrCamera );
634+
vrEffect.render( sceneHelpers, vrCamera );
635+
636+
} else {
599637

600-
if ( renderer instanceof THREE.RaytracingRenderer === false ) {
638+
renderer.clear();
639+
renderer.render( scene, camera );
601640

602-
renderer.render( sceneHelpers, camera );
641+
if ( renderer instanceof THREE.RaytracingRenderer === false ) {
642+
643+
renderer.render( sceneHelpers, camera );
644+
645+
}
603646

604647
}
605648

649+
606650
}
607651

652+
requestAnimationFrame( animate );
653+
608654
return container;
609655

610656
};

0 commit comments

Comments
 (0)