webVR_tutorial/finish.html at master · hermionewy/webVR_tutorial · GitHub

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
<!DOCTYPE html>

<html lang="en">
<head>
  <title>360 Video WebVR 1.0</title>
  <meta charset="utf-8">
  <!--This project is greatly influenced by @risonsimon who created 30 VR projects in 30 days. Please check it out!
  (https://tutorialsforvr.com/360-virtual-reality-videos-tutorial/)
  -->
  <!--Check out why viewport meta is important. https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag-->
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <style>
    #vr-container{
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background-color: #000;
      color: #fff;
      margin: 0px;
      padding: 0px;
      overflow: hidden;
    }
    canvas { width: 100%; height: 100% }
    /* Position the button on the bottom of the page. */
    #ui {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      font-family: 'Karla', sans-serif;
      z-index: 1;
    }

    a#magic-window {
      display: block;
      color: white;
      margin-top: 1em;
    }
  </style>
</head>

<body>
<div id="vr-container">
</div>
<div id="ui">
  <div id="vr-button"></div>
  <a id="magic-window" href="#">Try it without a headset</a>
</div>
</body>

<!--three.js 3d library-->
<script src="https://ajax.googleapis.com/ajax/libs/threejs/r83/three.min.js"></script>
<script src="scripts/OrbitControls.js"></script>
<!--VRControls.js acquires positional information from connected VR devices and applies the transformations to a three.js camera object.-->
<script src="scripts/VRControls.js"></script>
<!--VREffect.js handles stereo camera setup and rendering.-->
<script src="scripts/VREffect.js"></script>
<!--A set of UI controls for entering VR mode.-->
<script src="scripts/webvr-ui.min.js"></script>
<!--About webvr (https://github.com/immersive-web/webvr-polyfill)
  This project ensures your WebVR content works on any platform,
  whether or not the browser/device has native WebVR support,or when there are inconsistencies in implementation.-->
<script src="scripts/webvr-polyfill.min.js"></script>


<script>
    var scene;
    var camera;
    var renderer = new THREE.WebGLRenderer();
    var meshSky;
    var video = document.createElement( 'video' );
    var videoTexture;
    var orbitController, vrController;
    var vrDisplay, vrButton, vrEffect;
    var boxSize = 5;


    function onLoad() {
        // Create a three.js scene.
        scene = new THREE.Scene();

        // Append the canvas element created by the renderer to #vr-container div element.
        document.getElementById('vr-container').appendChild(renderer.domElement);

        // Setup three.js WebGL renderer.
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);

        // Create a three.js camera. Field of View: 75, Aspect Ratio: width/height, Camera Frustum Near Plane: 1, Far Plane: 1100
        var aspect = window.innerWidth / window.innerHeight;
        camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 1000);
        camera.position.set( 0, 0, 300 );
        orbitController = new THREE.OrbitControls( camera, renderer.domElement);
        orbitController.enableZoom=false; //Disable zoom in/out so that the user will have to stay in the sphere we created.
        orbitController.update();

        //create VR controls
        vrController = new THREE.VRControls(camera);
        vrController.standing = true; //set to user standing mode
        camera.position.y = vrController.userHeight; // adjust camera position

        //create video element
        video.width = window.innerWidth;
        video.height = window.innerHeight;
        video.loop = true;
        video.muted = true;
        video.src = './assets/maverick1.mp4';
        video.crossOrigin = '';
        video.setAttribute('webkit-playsinline', 'true');
        video.setAttribute('playsinline', 'true');
        video.load();
        video.play();
//create video texture and add the video element to it.
        videoTexture = new THREE.VideoTexture( video );
        //How the texture is sampled when a texel covers less than one pixel.
        videoTexture.minFilter = THREE.LinearFilter;
        //How the texture is sampled when a texel covers more than one pixel.
        videoTexture.magFilter = THREE.LinearFilter;
        videoTexture.format = THREE.RGBFormat;
        // Create the sky as a ball with video textures inside of the ball, and the user is in the center of it.
        // The radius of the ball: 500,
        // Width Segments:60, Height Segments: 40. This decides how smooth the ball is.
        // The geometry is like bones of the ball
        var geometrySky = new THREE.SphereBufferGeometry( 500, 60, 40 );
        geometrySky.scale( -1, 1, 1 );

        //create material of the sky and add the video to the material
        var materialSky = new THREE.MeshBasicMaterial( { map: videoTexture, side: THREE.DoubleSide } );
        meshSky = new THREE.Mesh( geometrySky, materialSky );
        meshSky.rotation.y = Math.PI / 2;
        scene.add( meshSky );
        setupStage();

        // Initialize the WebVR UI.
        var uiOptions = {
            color: 'black',
            background: 'white',
            corners: 'square'
        };

        vrButton = new webvrui.EnterVRButton(renderer.domElement, uiOptions);
        vrButton.on('exit', function() {
            camera.quaternion.set(0, 0, 0, 1);
            camera.position.z = 300;
        });
        vrButton.on('hide', function() {
            document.getElementById('ui').style.display = 'none';
        });
        vrButton.on('show', function() {
            document.getElementById('ui').style.display = 'inherit';
        });
        document.getElementById('vr-button').appendChild(vrButton.domElement);
        document.getElementById('magic-window').addEventListener('click', function() {
            vrButton.requestEnterFullscreen();
        });

        document.getElementById('vr-button').addEventListener('click', function() {
            video.play();
        });

        // Apply VR stereo rendering to renderer.
        vrEffect = new THREE.VREffect(renderer);
        vrEffect.setSize(window.innerWidth, window.innerHeight);

        //After we included vrDisplay, vrDisplay will call the animate function. We don't need to call it when the file is loaded.
        //animate();
    }

    window.addEventListener('load', onLoad);
    window.addEventListener('resize', onResize, true);
    window.addEventListener('vrdisplaypresentchange', onResize, true);

    // Request animation frame loop function
    function animate() {
        meshSky.rotation.y += 0.0004;
        // Only update controls if we're presenting.
        if (vrButton.isPresenting()) {
            vrController.update();
        }
        if( video.readyState === video.HAVE_ENOUGH_DATA ){
            video.needsUpdate = true;
        }
        // Render the scene.
        vrEffect.render(scene, camera);
        vrDisplay.requestAnimationFrame(animate);
    }

    function onResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
        vrEffect.setSize(window.innerWidth, window.innerHeight);
    }

    // Get the HMD, and if we're dealing with something that specifies stageParameters, rearrange the scene.
    function setupStage() {
        navigator.getVRDisplays() //learn more about navigator variable(https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getVRDisplays)
            .then(function(displays) {
            if (displays.length > 0) {
                vrDisplay = displays[0];
                if (vrDisplay.stageParameters) {
                    setStageDimensions(vrDisplay.stageParameters);
                }
                vrDisplay.requestAnimationFrame(animate);
            }
        });
    }

    function setStageDimensions(stage) {
        // Make the skybox fit the stage.
        var material = meshSky.material;
        scene.remove(meshSky);
        console.log(stage);
        // Size the skybox according to the size of the actual stage.
        var geometry = new THREE.BoxGeometry(stage.sizeX, boxSize, stage.sizeZ);
        meshSky = new THREE.Mesh(geometry, material);

        // Place it on the floor.
        meshSky.position.y = boxSize/2;
        scene.add(meshSky);
    }


</script>

</html>