forked from mrdoob/three.js
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathwebxr_vr_video.html
149 lines (99 loc) · 3.77 KB
/
webxr_vr_video.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js vr - 360 stereo video</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> vr - 360 stereo video<br />
stereoscopic panoramic render by <a href="http://pedrofe.com/rendering-for-oculus-rift-with-arnold/" target="_blank" rel="noopener">pedrofe</a>. scene from <a href="http://www.meryproject.com/" target="_blank" rel="noopener">mery project</a>.
</div>
<video id="video" loop muted crossOrigin="anonymous" playsinline style="display:none">
<source src="textures/MaryOculus.webm">
<source src="textures/MaryOculus.mp4">
</video>
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "../build/three.module.js",
"three/addons/": "./jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { VRButton } from 'three/addons/webxr/VRButton.js';
let camera, scene, renderer;
init();
animate();
function init() {
const container = document.getElementById( 'container' );
container.addEventListener( 'click', function () {
video.play();
} );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 2000 );
camera.layers.enable( 1 ); // render left view when no stereo available
// video
const video = document.getElementById( 'video' );
video.play();
const texture = new THREE.VideoTexture( video );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x101010 );
// left
const geometry1 = new THREE.SphereGeometry( 500, 60, 40 );
// invert the geometry on the x-axis so that all of the faces point inward
geometry1.scale( - 1, 1, 1 );
const uvs1 = geometry1.attributes.uv.array;
for ( let i = 0; i < uvs1.length; i += 2 ) {
uvs1[ i ] *= 0.5;
}
const material1 = new THREE.MeshBasicMaterial( { map: texture } );
const mesh1 = new THREE.Mesh( geometry1, material1 );
mesh1.rotation.y = - Math.PI / 2;
mesh1.layers.set( 1 ); // display in left eye only
scene.add( mesh1 );
// right
const geometry2 = new THREE.SphereGeometry( 500, 60, 40 );
geometry2.scale( - 1, 1, 1 );
const uvs2 = geometry2.attributes.uv.array;
for ( let i = 0; i < uvs2.length; i += 2 ) {
uvs2[ i ] *= 0.5;
uvs2[ i ] += 0.5;
}
const material2 = new THREE.MeshBasicMaterial( { map: texture } );
const mesh2 = new THREE.Mesh( geometry2, material2 );
mesh2.rotation.y = - Math.PI / 2;
mesh2.layers.set( 2 ); // display in right eye only
scene.add( mesh2 );
//
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.xr.enabled = true;
renderer.xr.setReferenceSpaceType( 'local' );
container.appendChild( renderer.domElement );
document.body.appendChild( VRButton.createButton( renderer ) );
//
window.addEventListener( 'resize', onWindowResize );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
renderer.setAnimationLoop( render );
}
function render() {
renderer.render( scene, camera );
}
</script>
</body>
</html>