Skip to content

Commit 5e3cd6c

Browse files
mrdoobmrdoob
committed
Examples: Added WebGL PMREM examples.
1 parent 9b0d093 commit 5e3cd6c

5 files changed

Lines changed: 233 additions & 1 deletion

File tree

‎examples/files.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,9 @@
160160
"webgl_materials_video",
161161
"webgl_materials_video_webcam",
162162
"webgl_materials_wireframe",
163+
"webgl_pmrem_cubemap",
164+
"webgl_pmrem_equirectangular",
165+
"webgl_pmrem_test",
163166
"webgl_math_obb",
164167
"webgl_math_orientation_transform",
165168
"webgl_mesh_batch",
@@ -573,7 +576,6 @@
573576
],
574577
"tests": [
575578
"webgl_furnace_test",
576-
"webgl_pmrem_test",
577579
"misc_uv_tests"
578580
]
579581
}

‎examples/screenshots/webgl_pmrem_cubemap.jpg‎

68.8 KB
Loading

‎examples/screenshots/webgl_pmrem_equirectangular.jpg‎

70.2 KB
Loading

‎examples/webgl_pmrem_cubemap.html‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>three.js webgl - pmrem cubemap</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7+
<link type="text/css" rel="stylesheet" href="example.css">
8+
</head>
9+
<body>
10+
11+
<script type="importmap">
12+
{
13+
"imports": {
14+
"three": "../build/three.module.js",
15+
"three/addons/": "./jsm/"
16+
}
17+
}
18+
</script>
19+
20+
<script type="module">
21+
22+
import * as THREE from 'three';
23+
24+
import { HDRCubeTextureLoader } from 'three/addons/loaders/HDRCubeTextureLoader.js';
25+
26+
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
27+
28+
let camera, scene, renderer;
29+
30+
init();
31+
32+
async function init() {
33+
34+
const container = document.createElement( 'div' );
35+
document.body.appendChild( container );
36+
37+
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
38+
camera.position.set( 0, 0, 8 );
39+
40+
scene = new THREE.Scene();
41+
42+
renderer = new THREE.WebGLRenderer( { antialias: true } );
43+
renderer.setPixelRatio( window.devicePixelRatio );
44+
renderer.setSize( window.innerWidth, window.innerHeight );
45+
renderer.setAnimationLoop( render );
46+
renderer.toneMapping = THREE.ACESFilmicToneMapping;
47+
48+
container.appendChild( renderer.domElement );
49+
50+
const controls = new OrbitControls( camera, renderer.domElement );
51+
controls.minDistance = 2;
52+
controls.maxDistance = 10;
53+
controls.update();
54+
55+
new HDRCubeTextureLoader()
56+
.setPath( './textures/cube/pisaHDR/' )
57+
.load( [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ], function ( map ) {
58+
59+
const pmremGenerator = new THREE.PMREMGenerator( renderer );
60+
const envMap = pmremGenerator.fromCubemap( map ).texture;
61+
62+
scene.background = envMap;
63+
scene.backgroundBlurriness = 0.5;
64+
65+
pmremGenerator.dispose();
66+
67+
const geometry = new THREE.SphereGeometry( 0.4, 64, 64 );
68+
69+
for ( let i = 0; i < 6; i ++ ) {
70+
71+
for ( let j = 0; j < 5; j ++ ) {
72+
73+
const material = new THREE.MeshPhysicalMaterial( {
74+
roughness: i / 5,
75+
metalness: j / 4,
76+
envMap: envMap
77+
} );
78+
79+
const mesh = new THREE.Mesh( geometry, material );
80+
mesh.position.x = i - 2.5;
81+
mesh.position.y = j - 2;
82+
scene.add( mesh );
83+
84+
}
85+
86+
}
87+
88+
} );
89+
90+
window.addEventListener( 'resize', onWindowResize );
91+
92+
}
93+
94+
function onWindowResize() {
95+
96+
camera.aspect = window.innerWidth / window.innerHeight;
97+
camera.updateProjectionMatrix();
98+
99+
renderer.setSize( window.innerWidth, window.innerHeight );
100+
101+
}
102+
103+
//
104+
105+
function render() {
106+
107+
renderer.render( scene, camera );
108+
109+
}
110+
111+
</script>
112+
113+
</body>
114+
</html>

‎examples/webgl_pmrem_equirectangular.html‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>three.js webgl - pmrem equirectangular</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7+
<link type="text/css" rel="stylesheet" href="example.css">
8+
</head>
9+
<body>
10+
11+
<script type="importmap">
12+
{
13+
"imports": {
14+
"three": "../build/three.module.js",
15+
"three/addons/": "./jsm/"
16+
}
17+
}
18+
</script>
19+
20+
<script type="module">
21+
22+
import * as THREE from 'three';
23+
24+
import { HDRLoader } from 'three/addons/loaders/HDRLoader.js';
25+
26+
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
27+
28+
let camera, scene, renderer;
29+
30+
init();
31+
32+
async function init() {
33+
34+
const container = document.createElement( 'div' );
35+
document.body.appendChild( container );
36+
37+
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
38+
camera.position.set( 0, 0, 8 );
39+
40+
scene = new THREE.Scene();
41+
42+
renderer = new THREE.WebGLRenderer( { antialias: true } );
43+
renderer.setPixelRatio( window.devicePixelRatio );
44+
renderer.setSize( window.innerWidth, window.innerHeight );
45+
renderer.setAnimationLoop( render );
46+
renderer.toneMapping = THREE.ACESFilmicToneMapping;
47+
48+
container.appendChild( renderer.domElement );
49+
50+
const controls = new OrbitControls( camera, renderer.domElement );
51+
controls.minDistance = 2;
52+
controls.maxDistance = 10;
53+
controls.update();
54+
55+
new HDRLoader()
56+
.setPath( 'textures/equirectangular/' )
57+
.load( 'royal_esplanade_1k.hdr', function ( map ) {
58+
59+
map.mapping = THREE.EquirectangularReflectionMapping;
60+
61+
const pmremGenerator = new THREE.PMREMGenerator( renderer );
62+
const envMap = pmremGenerator.fromEquirectangular( map ).texture;
63+
64+
scene.background = envMap;
65+
scene.backgroundBlurriness = 0.5;
66+
67+
pmremGenerator.dispose();
68+
69+
const geometry = new THREE.SphereGeometry( 0.4, 64, 64 );
70+
71+
for ( let i = 0; i < 6; i ++ ) {
72+
73+
for ( let j = 0; j < 5; j ++ ) {
74+
75+
const material = new THREE.MeshPhysicalMaterial( {
76+
roughness: i / 5,
77+
metalness: j / 4,
78+
envMap: envMap
79+
} );
80+
81+
const mesh = new THREE.Mesh( geometry, material );
82+
mesh.position.x = i - 2.5;
83+
mesh.position.y = j - 2;
84+
scene.add( mesh );
85+
86+
}
87+
88+
}
89+
90+
} );
91+
92+
window.addEventListener( 'resize', onWindowResize );
93+
94+
}
95+
96+
function onWindowResize() {
97+
98+
camera.aspect = window.innerWidth / window.innerHeight;
99+
camera.updateProjectionMatrix();
100+
101+
renderer.setSize( window.innerWidth, window.innerHeight );
102+
103+
}
104+
105+
//
106+
107+
function render() {
108+
109+
renderer.render( scene, camera );
110+
111+
}
112+
113+
</script>
114+
115+
</body>
116+
</html>

0 commit comments

Comments
 (0)