-
Notifications
You must be signed in to change notification settings - Fork 40
/
gearvr.html
392 lines (377 loc) · 10.7 KB
/
gearvr.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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
<title>gearvr-touchpad</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
font-size: 14px;
font-family: "Arial", "Microsoft YaHei", "黑体", sans-serif;
overflow: hidden;
}
html,
body,
.main-page {
position: relative;
height: 100%;
overflow: hidden;
}
.vr-btn {
position: fixed;
right: 18px;
bottom: 18px;
padding: 8px 12px;
background-color: #00aadd;
text-align: center;
color: #fff;
font-size: 14px;
cursor: pointer;
z-index: 100;
}
</style>
</head>
<body>
<section class="main-page">
<div class="vr-btn">进入VR</div>
</section>
</body>
<script src="./vendor/webvr-polyfill.js"></script>
<script src="./vendor/three.min.js"></script>
<!-- <script src="./vendor/tween.min.js"></script> -->
<script>
/**
** author:YoneChen
** date:2017-08-18
**/
class WebVRApp {
constructor() {
// 初始化场景
this.scene = new THREE.Scene();
// 初始化相机
this.camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
this.scene.add(this.camera);
// 初始化渲染器
this.renderer = new THREE.WebGLRenderer({
antialias: true
});
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.setClearColor(0x519EcB);
this.renderer.shadowMapEnabled = true;
this.renderer.setPixelRatio(window.devicePixelRatio);
document.querySelector('.main-page').appendChild(this.renderer.domElement);
this.clock = new THREE.Clock();
// VR初始化
this.initVR();
// 往场景添加3d物体
this.start();
this.bindEvent();
// 渲染动画
this.renderer.animate(this.update.bind(this));
}
bindEvent() {
// 窗口大小调整监听
window.addEventListener('resize', this.resize.bind(this), false);
}
start() {
const {
scene,
camera
} = this;
// 创建准心
camera.add(this.createCrosshair());
// 创建光线
scene.add(new THREE.AmbientLight(0xFFFFFF));
scene.add(this.createLight());
// 创建地面
scene.add(this.createGround(1000, 1000));
this.gazer = new Gazer();
this.touchpad = new TouchPad();
// 创建立方体
for (let i = 0; i < 100; i++) {
const cube = this.createCube(2, 2, 2);
cube.position.set(
100 * Math.random() - 50,
50 * Math.random() - 10,
100 * Math.random() - 50
);
scene.add(cube);
this.gazer.on(cube, 'gazeEnter', () => {
cube.material.opacity = 0.5;
});
this.gazer.on(cube, 'gazeLeave', () => {
cube.material.opacity = 1;
});
this.touchpad.on(cube, 'tap', () => {
cube.material.color.setHex(0x00ddaa);
});
this.touchpad.on(cube, 'swipeRight', () => {
cube.rotation.y += 1;
});
this.touchpad.on(cube, 'swipeLeft', () => {
cube.rotation.y -= 1;
});
}
}
initVR() {
const {
renderer
} = this;
renderer.vr.enabled = true;
// 获取VRDisplay实例
navigator.getVRDisplays().then(display => {
// 将display实例传给renderer渲染器
renderer.vr.setDevice(display[0]);
const button = document.querySelector('.vr-btn');
VRButton.init(display[0], renderer, button, () => button.textContent = '退出VR', () => button.textContent = '进入VR');
}).catch(err => console.warn(err));
}
resize() {
const {
camera,
renderer
} = this;
// 窗口调整重新调整渲染器
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
createCrosshair() {
// 创建准心
const geometry = new THREE.CircleGeometry(0.002, 16);
const material = new THREE.MeshBasicMaterial({
color: 0xffffff,
opacity: 0.5,
transparent: true
});
const crosshair = new THREE.Mesh(geometry, material);
crosshair.position.z = -0.5;
return crosshair;
}
createCube(width = 2, height = 2, depth = 2, color = 0xef6500) {
// 创建立方体
const geometry = new THREE.CubeGeometry(width, height, depth);
const material = new THREE.MeshLambertMaterial({
color: color,
needsUpdate: true,
opacity: 1,
transparent: true
});
const cube = new THREE.Mesh(geometry, material);
cube.castShadow = true;
return cube;
}
createLight() {
// 创建光线
const light = new THREE.DirectionalLight(0xffffff, 0.3);
light.position.set(50, 50, -50);
light.castShadow = true;
light.shadow.mapSize.width = 2048;
light.shadow.mapSize.height = 512;
return light;
}
createGround(width, height) {
// 创建地平面
const geometry = new THREE.PlaneBufferGeometry(width, height);
const material = new THREE.MeshPhongMaterial({
color: 0xaaaaaa
});
const ground = new THREE.Mesh(geometry, material);
ground.rotation.x = -Math.PI / 2;
ground.position.y = -10;
ground.receiveShadow = true;
return ground;
}
update() {
const {
scene,
camera,
renderer,
clock
} = this;
const delta = clock.getDelta() * 60;
// 启动渲染
this.gazer.update(camera);
this.touchpad.update(camera);
renderer.render(scene, camera);
}
}
// VR按钮控制
const VRButton = {
/**
* @param {VRDisplay} display VRDisplay实例
* @param {THREE.WebGLRenderer} renderer 渲染器
* @param {HTMLElement} button VR控制按钮
* @param {Function} enterVR 点击进入VR模式时回调
* @param {Function} exitVR 点击退出VR模式时回调
**/
init(display, renderer, button, enterVR, exitVR) {
if (display) {
button.addEventListener('click', e => {
display.isPresenting ? display.exitPresent() : display.requestPresent([{
source: renderer.domElement
}]);
});
window.addEventListener('vrdisplaypresentchange', e => {
display.isPresenting ? enterVR() : exitVR();
}, false);
} else {
button.remove();
}
}
}
// 凝视监听器
class Gazer {
constructor() {
// 初始化射线发射源
this.raycaster = new THREE.Raycaster();
this._center = new THREE.Vector2();
this.rayList = {}, this.targetList = [];
this._lastTarget = null;
}
get Target() {
return this._lastTarget;
}
/**
* @param {THREE.Mesh} target 监听的3d网格
* @param {String} eventType 事件类型
* 'gazeEnter': '射线击中物体触发一次',
* 'gazeTrigger': '射线击中物体触发',
* 'gazeLeave': '射线离开物体触发'
* @param {Function} callback 事件回调
**/
on(target, eventType, callback) {
const noop = () => {};
if (!this.rayList[target.id]) this.rayList[target.id] = {
target,
gazeEnter: noop,
gazeTrigger: noop,
gazeLeave: noop
};
this.rayList[target.id][eventType] = callback;
this.targetList = Object.keys(this.rayList).map(key => this.rayList[key].target);
}
off(target) {
delete this.rayList[target.id];
this.targetList = Object.keys(this.rayList).map(key => this.rayList[key].target);
}
clear() {
this.rayList = {}, this.targetList = [];
}
update(camera) {
if (this.targetList.length <= 0) return;
//更新射线位置
this.raycaster.setFromCamera(this._center, camera);
const intersects = this.raycaster.intersectObjects(this.targetList);
if (intersects.length > 0) { // 当前帧射线击中物体
const currentTarget = intersects[0].object;
if (this._lastTarget) { // 上一帧射线击中物体
if (this._lastTarget.id !== currentTarget.id) {
// 上一帧射线击中物体与当前帧不同，触发上一帧物体的gazeLeave事件，触发当前帧物体的gazeEnter事件
this.rayList[this._lastTarget.id].gazeLeave();
this.rayList[currentTarget.id].gazeEnter();
}
} else { // 上一帧射线未击中物体
this.rayList[currentTarget.id].gazeEnter(); // 上一帧射线没有击中物体，触发当前帧物体的gazeEnter事件
}
this.rayList[currentTarget.id].gazeTrigger(); // 当前帧射线击中物体，触发物体的gazeTrigger事件
this._lastTarget = currentTarget;
} else { // 当前帧我击中物体
if (this._lastTarget) this.rayList[this._lastTarget.id].gazeLeave(); // 上一帧射线击中物体，触发上一帧物体gazeLeave
this._lastTarget = null;
}
}
}
class TouchPad {
constructor() {
this.gazer = new Gazer();
this.eventList = {};
this.state = {
lastAxes: [0, 0],
lastPressed: false
}
}
get GamePad() {
// If there's no gamepad API, there's no gamepad.
if (!navigator.getGamepads) {
return null;
}
if (this._gamepad && this._gamepad.connected) return this._gamepad;
const gamepads = navigator.getGamepads();
for (let i = 0; i < gamepads.length; ++i) {
let gamepad = gamepads[i];
// The array may contain undefined gamepads, so check for that as well as
// a non-null pose. Clicker devices such as Cardboard button emulation
// have a displayId but no pose.
if (gamepad && (gamepad.id === 'Gear VR Touchpad') && gamepad.connected) {
this._gamepad = gamepad;
return gamepad;
}
}
return null;
}
get Button() {
return this.GamePad.buttons[0] || null;
}
get Axes() {
return this.GamePad.axes || null;
}
on(target, eventType, callback = () => {}) {
if (!eventType) return;
const noop = () => {};
if (!this.eventList[target.id]) this.eventList[target.id] = {
tap: noop,
swipeLeft: noop,
swipeRight: noop,
swipeUp: noop,
swipeDown: noop
};
this.eventList[target.id][eventType] = callback;
this.gazer.on(target); // 将物体添加到射线监听列表
}
off(target) {
delete this.eventList[target.id];
this.gazer.off()
}
update(camera) {
if (!this.GamePad) return;
const pressed = this.Button.pressed,
axes = this.Axes;
const {
lastAxes,
lastPressed
} = this.state;
this.gazer.update(camera);
const target = this.gazer.Target;
if (!target) return;
if (pressed) { // 按下状态
if (this.state.lastPressed != pressed) this.eventList[target.id].tap(); // 当前帧pressed状态为true，上一帧为false，则触发tap
}
if (axes[0] < 0 && lastAxes[0] >= 0) {
// Handle swipe right
this.eventList[target.id].swipeRight();
} else if (axes[0] > 0 && lastAxes[0] <= 0) {
// Handle swipe left
this.eventList[target.id].swipeLeft();
} else if (axes[1] < 0 && lastAxes[1] >= 0) {
// Handle swipe up
this.eventList[target.id].swipeUp();
} else if (axes[1] > 0 && lastAxes[1] <= 0) {
// Handle swipe down
this.eventList[target.id].swipeDown();
}
this.state.lastPressed = pressed;
this.state.lastAxes = axes;
}
}
new WebVRApp();
</script>
</html>