-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathbrowser.html
109 lines (101 loc) · 5.18 KB
/
browser.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Immersive browser</title>
<script src="node_modules/aframe/dist/aframe.min.js"></script>
<script src="browser.js"></script>
</head>
<body>
<a-scene shadow="type:pcfsoft" cursor="rayOrigin: mouse" raycaster="objects: [data-raycastable]">
<a-assets timeout="10000">
<img id="sky" src="media/blue.jpg" />
<img id="grass" src="media/grass.jpg" />
<a-asset-item id="room" src="media/conference_room1.glb"></a-asset-item>
<a-asset-item id="desk" src="media/antique_wooden_desk.glb"></a-asset-item>
<canvas id="region1" />
<canvas id="region2" />
<canvas id="region3" />
<canvas id="region4" />
<a-mixin id="button"
geometry="primitive: cylinder; height: 0.001; radius: 0.006"
rotation="90 0 0"
position="0 0 0.003"
material="color: #FA9200"
animation__click_push="property: position; to: 0 0 0.0026; easing: easeInOutSine; dur: 100; startEvents: click-push"
animation__click_pop="property: position; to: 0 0 0.003; easing: easeInOutSine; dur: 50; startEvents: click-pop"
cursor-listener></a-mixin>
<a-mixin id="button-container"
position="0 0 0.002"
geometry="primitive: box; width: 0.015; height: 0.015; depth: 0.002"
material="color: #333"></a-mixin>
</a-assets>
<!-- Camera -->
<a-entity id="rig" position="-0.15 1.25 0.2" rotation="-15 -8 0">
<a-entity camera look-controls wasd-controls="acceleration:3" position="0 0 0"></a-entity>
</a-entity>
<!-- Sky and floor -->
<a-sky src="#sky"></a-sky>
<a-plane position="0 -0.001 0" src="#grass" repeat="10 10"
height="10" width="10"
rotation="-90 0 0"></a-plane>
<!-- Room and desk -->
<a-entity gltf-model="#room" position="0 0 3" rotation="0 180 0" scale="0.8 0.8 0.8"></a-entity>
<a-entity gltf-model="#desk" position="0 0 -0.7" rotation="0 -90 0"></a-entity>
<!-- Browsing context window plane and containing box -->
<a-entity id="content-container" position="0 1.2 -0.25">
<a-plane id="content" cursor-listener
width="0.297" height="0.223"
material="side: double; transparent: true; alphaTest: 0.5"
shadow="cast: false; receive: true"
paint-image="id:content0" data-raycastable></a-plane>
<a-entity id="wireframe"
geometry="primitive: box; width: 0.297; height: 0.223; depth: 0.10"
material="wireframe: true;"
visible="false"></a-entity>
</a-entity>
<!-- supplemental screens -->
<a-plane material="src: #region1" id="screen1" position="0.3 1.2 -0.25" rotation="0 -10 0" paint-image="id:content1" width="0.297" height="0.223" visible="false"></a-plane>
<a-plane material="src: #region2" id="screen2" position="0.6 1.2 -0.5" rotation="-5 -10 0" paint-image="id:content2" width="0.297" height="0.223" visible="false"></a-plane>
<a-plane material="src: #region3" id="screen3" position="-0.3 1.2 -0.75" rotation="-5 20 0" paint-image="id:content3" width="0.297" height="0.223" visible="false"></a-plane>
<a-plane material="src: #region4" id="screen4" position="-0.6 1.2 -0.75" rotation="-5 -20 0" paint-image="id:content4" width="0.297" height="0.223" visible="false"></a-plane>
<!-- Basic UI buttons -->
<a-entity position="-0.10 1.06 -0.23">
<a-entity
geometry="primitive: plane; width: 0.18; height: 0.1"
material="color: #ffb347"
position="0.06 -0.03 0"></a-entity>
<a-entity>
<a-entity mixin="button-container"></a-entity>
<a-entity mixin="button" data-raycastable cursor-listener="action:toggle-wireframe"></a-entity>
<a-entity position="0.16 0 0"
text="value: Toggle wireframe; width:0.30; color: black"></a-entity>
</a-entity>
<a-entity position="0 -0.02 0">
<a-entity mixin="button-container"></a-entity>
<a-entity mixin="button" data-raycastable cursor-listener="action:toggle-3d"></a-entity>
<a-entity position="0.16 0 0"
text="value: Toggle 3D rendering; width:0.30; color: black"></a-entity>
</a-entity>
<a-entity position="0 -0.04 0">
<a-entity mixin="button-container"></a-entity>
<a-entity mixin="button" data-raycastable cursor-listener="action:toggle-illustrate"></a-entity>
<a-entity position="0.16 0 0"
text="value: Toggle side image; width:0.30; color: black"></a-entity>
</a-entity>
<a-entity position="0 -0.06 0">
<a-entity mixin="button-container"></a-entity>
<a-entity mixin="button" data-raycastable cursor-listener="action:toggle-navigate"></a-entity>
<a-entity position="0.16 0 0"
text="value: Toggle companion nav; width:0.30; color: black"></a-entity>
</a-entity>
</a-entity>
<!-- Scene lights -->
<a-entity light="type: ambient; color: #BBB"></a-entity>
<a-entity
light="type: point; color: #FFFFFF; intensity: 0.5;
castShadow: true;"
position="-0.10 1.8 1"></a-entity>
</a-scene>
</body>
</html>