Skip to content

Commit 1653c9a

Browse files
mrdoobmrdoob
committed
Examples: Renamed webvr_6dof_panorama to webvr_panorama_depth and clean up.
1 parent af426ea commit 1653c9a

File tree

3 files changed

+141
-140
lines changed

3 files changed

+141
-140
lines changed

‎examples/files.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -329,14 +329,14 @@ var files = {
329329
"webvr_lorenzattractor",
330330
"webvr_multiview",
331331
"webvr_panorama",
332+
"webvr_panorama_depth",
332333
"webvr_paint",
333334
"webvr_rollercoaster",
334335
"webvr_sandbox",
335336
"webvr_sculpt",
336337
"webvr_video",
337338
"webvr_vive_paint",
338-
"webvr_vive_sculpt",
339-
"webvr_6dof_panorama"
339+
"webvr_vive_sculpt"
340340
],
341341
"physics": [
342342
"webgl_physics_cloth",

‎examples/webvr_6dof_panorama.html‎

Lines changed: 0 additions & 138 deletions
This file was deleted.

‎examples/webvr_panorama_depth.html‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>three.js webvr - panorama with depth</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
7+
<link type="text/css" rel="stylesheet" href="main.css">
8+
<!-- WebXR Device API (For Chrome M76+), expires 12/04/2019 -->
9+
<meta http-equiv="origin-trial" content="Aq9LklhCLNUveuCr7QTpGpqwCPG817cYHdVyQuJPOZYk47iRB390lUKa5edVmgS1pZSl8HPspElEC/91Fz55dwIAAABTeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkRldmljZU03NiIsImV4cGlyeSI6MTU3NTQxNzU5OX0=">
10+
</head>
11+
<body>
12+
<div id="container"></div>
13+
14+
<div id="info">
15+
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webvr - panorama with depth<br />
16+
Created by <a href="https://orfleisher.com" target="_blank" rel="noopener">@juniorxsound</a>. Panorama from <a href="https://krpano.com/examples/?depthmap" target="_blank" rel="noopener">krpano</a>.
17+
</div>
18+
19+
<script src="js/vr/HelioWebXRPolyfill.js"></script>
20+
21+
<script type="module">
22+
23+
import * as THREE from '../build/three.module.js';
24+
import { WEBVR } from './jsm/vr/WebVR.js';
25+
26+
var camera, scene, renderer, sphere, clock;
27+
28+
init();
29+
animate();
30+
31+
function init() {
32+
33+
var container = document.getElementById( 'container' );
34+
35+
clock = new THREE.Clock();
36+
37+
scene = new THREE.Scene();
38+
scene.background = new THREE.Color( 0x101010 );
39+
40+
var light = new THREE.AmbientLight( 0x404040, 10 );
41+
scene.add( light );
42+
43+
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 2000 );
44+
var cameraRig = new THREE.Object3D();
45+
cameraRig.position.y = - 1.6;
46+
cameraRig.add( camera );
47+
scene.add( cameraRig );
48+
49+
// Create the panoramic sphere geometery
50+
var panoSphereGeo = new THREE.SphereBufferGeometry( 6, 256, 256 );
51+
52+
// Create the panoramic sphere material
53+
var panoSphereMat = new THREE.MeshStandardMaterial( {
54+
side: THREE.BackSide,
55+
displacementScale: - 4.0
56+
} );
57+
58+
// Create the panoramic sphere mesh
59+
sphere = new THREE.Mesh( panoSphereGeo, panoSphereMat );
60+
61+
// Load and assign the texture and depth map
62+
var manager = new THREE.LoadingManager();
63+
var loader = new THREE.TextureLoader( manager );
64+
65+
loader.load( './textures/kandao3.jpg', function ( texture ) {
66+
67+
texture.minFilter = THREE.NearestFilter;
68+
texture.format = THREE.RGBFormat;
69+
texture.generateMipmaps = false;
70+
sphere.material.map = texture;
71+
72+
} );
73+
74+
loader.load( './textures/kandao3_depthmap.jpg', function ( depth ) {
75+
76+
depth.minFilter = THREE.NearestFilter;
77+
depth.format = THREE.RGBFormat;
78+
depth.generateMipmaps = false;
79+
sphere.material.displacementMap = depth;
80+
81+
} );
82+
83+
// On load complete add the panoramic sphere to the scene
84+
manager.onLoad = function () {
85+
86+
scene.add( sphere );
87+
88+
};
89+
90+
renderer = new THREE.WebGLRenderer();
91+
renderer.setPixelRatio( window.devicePixelRatio );
92+
renderer.setSize( window.innerWidth, window.innerHeight );
93+
renderer.vr.enabled = true;
94+
container.appendChild( renderer.domElement );
95+
96+
document.body.appendChild( WEBVR.createButton( renderer ) );
97+
98+
//
99+
100+
window.addEventListener( 'resize', onWindowResize, false );
101+
102+
}
103+
104+
function onWindowResize() {
105+
106+
camera.aspect = window.innerWidth / window.innerHeight;
107+
camera.updateProjectionMatrix();
108+
109+
renderer.setSize( window.innerWidth, window.innerHeight );
110+
111+
}
112+
113+
function animate() {
114+
115+
renderer.setAnimationLoop( render );
116+
117+
}
118+
119+
function render() {
120+
121+
// If we are not presenting move the camera a little so the effect is visible
122+
123+
if ( ! renderer.vr.isPresenting() ) {
124+
125+
var time = clock.getElapsedTime();
126+
127+
sphere.rotation.y += 0.001;
128+
sphere.position.x = Math.sin( time ) * 0.2;
129+
sphere.position.z = Math.cos( time ) * 0.2;
130+
131+
}
132+
133+
renderer.render( scene, camera );
134+
135+
}
136+
137+
</script>
138+
</body>
139+
</html>

0 commit comments

Comments
 (0)