Skip to content

Commit e761d60

Browse files
mrdoobmrdoob
authored
Merge pull request #17936 from juniorxsound/add-panorama-6dof-example
Use MeshStandardMaterial for displacement in panoramic 6DoF example
2 parents bf8f1e7 + 92809e3 commit e761d60

File tree

1 file changed

+71
-95
lines changed

1 file changed

+71
-95
lines changed

‎examples/webvr_6dof_panorama.html‎

Lines changed: 71 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -13,149 +13,125 @@
1313

1414
<div id="info">
1515
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webvr - 360 6DOF panorama<br />
16-
Written 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>.
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>.
1717
</div>
18-
19-
<script type="x-shader/x-vertex" id="vertexshader">
20-
varying vec2 vUv;
21-
22-
uniform sampler2D depth_map;
23-
uniform float displacement;
24-
25-
void main() {
26-
27-
vUv = uv;
28-
29-
float depth = texture2D(depth_map, uv).r;
30-
float disp = displacement * depth;
31-
vec3 offset = position + (-normal) * disp;
32-
33-
gl_Position = projectionMatrix *
34-
modelViewMatrix *
35-
vec4(offset, 1.0);
36-
}
37-
38-
</script>
39-
40-
<script type="x-shader/x-fragment" id="fragmentshader">
41-
42-
varying vec2 vUv;
43-
44-
uniform sampler2D texture;
45-
46-
void main() {
47-
48-
gl_FragColor = texture2D(texture, vUv);
49-
50-
}
51-
52-
</script>
5318

5419
<script src="js/vr/HelioWebXRPolyfill.js"></script>
5520

5621
<script type="module">
5722

58-
import * as THREE from '../build/three.module.js';
59-
import { WEBVR } from './jsm/vr/WebVR.js';
23+
import * as THREE from '../build/three.module.js';
24+
import { WEBVR } from './jsm/vr/WebVR.js';
6025

61-
var camera, scene, renderer, sphere, clock;
26+
var camera, scene, renderer, sphere, clock;
6227

63-
init();
64-
animate();
28+
init();
29+
animate();
6530

66-
function init() {
31+
function init() {
6732

6833
var container = document.getElementById( 'container' );
69-
34+
7035
clock = new THREE.Clock();
7136

7237
scene = new THREE.Scene();
73-
scene.background = new THREE.Color( 0x101010 );
38+
scene.background = new THREE.Color( 0x101010 );
39+
40+
var light = new THREE.AmbientLight( 0x404040, 10 );
41+
scene.add( light );
7442

7543
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 2000 );
7644
var cameraRig = new THREE.Object3D();
77-
cameraRig.position.y = -1.6;
45+
cameraRig.position.y = - 1.6;
7846
cameraRig.add( camera );
7947
scene.add( cameraRig );
8048

81-
// Create the panoramic sphere with the custom shader material
49+
// Create the panoramic sphere geometery
8250
var panoSphereGeo = new THREE.SphereBufferGeometry( 6, 256, 256 );
83-
var panoSphereMat = new THREE.ShaderMaterial({
84-
uniforms: {
85-
texture: { value : null },
86-
depth_map: { value: null },
87-
displacement: { value: 4 }
88-
},
89-
vertexShader: document.getElementById( 'vertexshader' ).textContent,
90-
fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
91-
side: THREE.BackSide
92-
});
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
9359
sphere = new THREE.Mesh( panoSphereGeo, panoSphereMat );
94-
scene.add( sphere );
9560

9661
// Load and assign the texture and depth map
97-
var loader = new THREE.TextureLoader();
98-
loader.load('./textures/kandao3.jpg', function ( texture ) {
99-
texture.minFilter = THREE.NearestFilter
100-
texture.magFilter = THREE.LinearFilter
101-
texture.format = THREE.RGBFormat
102-
texture.generateMipmaps = false
103-
sphere.material.uniforms.texture.value = texture;
104-
});
62+
var manager = new THREE.LoadingManager();
63+
var loader = new THREE.TextureLoader( manager );
64+
65+
loader.load( './textures/kandao3.jpg', function ( texture ) {
10566

106-
loader.load('./textures/kandao3_depthmap.jpg', function ( depth ) {
107-
depth.minFilter = THREE.NearestFilter
108-
depth.magFilter = THREE.LinearFilter
109-
depth.format = THREE.RGBFormat
110-
depth.generateMipmaps = false
111-
sphere.material.uniforms.depth_map.value = depth;
112-
});
67+
texture.minFilter = THREE.NearestFilter;
68+
texture.format = THREE.RGBFormat;
69+
texture.generateMipmaps = false;
70+
sphere.material.map = texture;
11371

114-
renderer = new THREE.WebGLRenderer();
115-
renderer.setPixelRatio( window.devicePixelRatio );
116-
renderer.setSize( window.innerWidth, window.innerHeight );
117-
renderer.vr.enabled = true;
118-
container.appendChild( renderer.domElement );
72+
} );
11973

120-
document.body.appendChild( WEBVR.createButton( renderer ) );
74+
loader.load( './textures/kandao3_depthmap.jpg', function ( depth ) {
12175

122-
//
76+
depth.minFilter = THREE.NearestFilter;
77+
depth.format = THREE.RGBFormat;
78+
depth.generateMipmaps = false;
79+
sphere.material.displacementMap = depth;
12380

124-
window.addEventListener( 'resize', onWindowResize, false );
81+
} );
12582

126-
}
83+
// On load complete add the panoramic sphere to the scene
84+
manager.onLoad = function () {
12785

128-
function onWindowResize() {
86+
scene.add( sphere );
12987

130-
camera.aspect = window.innerWidth / window.innerHeight;
131-
camera.updateProjectionMatrix();
88+
};
13289

133-
renderer.setSize( window.innerWidth, window.innerHeight );
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 );
13495

135-
}
96+
document.body.appendChild( WEBVR.createButton( renderer ) );
13697

137-
function animate() {
98+
//
13899

139-
renderer.setAnimationLoop( render );
100+
window.addEventListener( 'resize', onWindowResize, false );
101+
102+
}
140103

141-
}
104+
function onWindowResize() {
142105

143-
function render() {
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() {
144120

145121
// If we are not presenting move the camera a little so the effect is visible
146-
if (!renderer.vr.isPresenting()) {
122+
if ( ! renderer.vr.isPresenting() ) {
147123

148124
var time = clock.getElapsedTime();
149125

150126
sphere.rotation.y += 0.001;
151-
sphere.position.x = Math.sin(time) * 0.2;
152-
sphere.position.z = Math.cos(time) * 0.2;
127+
sphere.position.x = Math.sin( time ) * 0.2;
128+
sphere.position.z = Math.cos( time ) * 0.2;
153129

154130
}
155131

156-
renderer.render( scene, camera );
132+
renderer.render( scene, camera );
157133

158-
}
134+
}
159135

160136
</script>
161137
</body>

0 commit comments

Comments
 (0)