Skip to content

Commit 1ae6d2d

Browse files
Mugen87Mugen87
authored
Examples: Add webgl_loader_gltf_lights. (#25506)
* Examples: Add webgl_loader_gltf_lights. * Added screenshot. * Examples: Update glTF lights model. * Examples: Update glTF lights example. * Examples: Update screenshot.
1 parent 4663201 commit 1ae6d2d

File tree

4 files changed

+134
-0
lines changed

4 files changed

+134
-0
lines changed

‎examples/files.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@
9090
"webgl_loader_gltf_compressed",
9191
"webgl_loader_gltf_instancing",
9292
"webgl_loader_gltf_iridescence",
93+
"webgl_loader_gltf_lights",
9394
"webgl_loader_gltf_sheen",
9495
"webgl_loader_gltf_transmission",
9596
"webgl_loader_gltf_variants",

‎examples/models/gltf/LightsPunctualLamp.glb‎

2.06 MB
Binary file not shown.

‎examples/screenshots/webgl_loader_gltf_lights.jpg‎

25.2 KB
Loading

‎examples/webgl_loader_gltf_lights.html‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>three.js webgl - GLTFloader + Punctual Lights</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="main.css">
8+
</head>
9+
10+
<body>
11+
<div id="info">
12+
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - GLTFLoader + <a href="https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_lights_punctual" target="_blank" rel="noopener">KHR_lights_punctual</a><br />
13+
Lamp by
14+
<a href="https://www.artstation.com/teresagviegas" target="_blank" rel="noopener">Teresa González Viegas</a>
15+
</div>
16+
17+
<!-- Import maps polyfill -->
18+
<!-- Remove this when import maps will be widely supported -->
19+
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
20+
21+
<script type="importmap">
22+
{
23+
"imports": {
24+
"three": "../build/three.module.js",
25+
"three/addons/": "./jsm/"
26+
}
27+
}
28+
</script>
29+
30+
<script type="module">
31+
32+
import * as THREE from 'three';
33+
34+
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
35+
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
36+
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
37+
38+
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
39+
40+
let camera, scene, renderer;
41+
42+
const params = {
43+
punctualLightsEnabled: true
44+
};
45+
46+
init().then( render );
47+
48+
async function init() {
49+
50+
const container = document.createElement( 'div' );
51+
document.body.appendChild( container );
52+
53+
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
54+
camera.position.set( - 2, 1.5, 3 );
55+
56+
scene = new THREE.Scene();
57+
58+
const rgbeLoader = new RGBELoader();
59+
const envMap = await rgbeLoader.loadAsync( 'textures/equirectangular/moonless_golf_1k.hdr ' );
60+
envMap.mapping = THREE.EquirectangularReflectionMapping;
61+
62+
scene.background = envMap;
63+
scene.environment = envMap;
64+
65+
const loader = new GLTFLoader();
66+
const gltf = await loader.loadAsync( 'models/gltf/LightsPunctualLamp.glb' );
67+
68+
scene.add( gltf.scene );
69+
70+
const gui = new GUI();
71+
72+
gui.add( params, 'punctualLightsEnabled' ).onChange( toggleLights );
73+
gui.open();
74+
75+
renderer = new THREE.WebGLRenderer( { antialias: true } );
76+
renderer.setPixelRatio( window.devicePixelRatio );
77+
renderer.setSize( window.innerWidth, window.innerHeight );
78+
renderer.toneMapping = THREE.ACESFilmicToneMapping;
79+
renderer.toneMappingExposure = 1;
80+
renderer.outputEncoding = THREE.sRGBEncoding;
81+
renderer.useLegacyLights = false;
82+
container.appendChild( renderer.domElement );
83+
84+
const controls = new OrbitControls( camera, renderer.domElement );
85+
controls.addEventListener( 'change', render ); // use if there is no animation loop
86+
controls.minDistance = 2;
87+
controls.maxDistance = 10;
88+
controls.target.set( 0, 1, 0 );
89+
controls.update();
90+
91+
window.addEventListener( 'resize', onWindowResize );
92+
93+
}
94+
95+
function onWindowResize() {
96+
97+
camera.aspect = window.innerWidth / window.innerHeight;
98+
camera.updateProjectionMatrix();
99+
100+
renderer.setSize( window.innerWidth, window.innerHeight );
101+
102+
render();
103+
104+
}
105+
106+
function toggleLights( visible ) {
107+
108+
scene.traverse( function ( object ) {
109+
110+
if ( object.isLight ) {
111+
112+
object.visible = visible;
113+
114+
}
115+
116+
} );
117+
118+
render();
119+
120+
}
121+
122+
//
123+
124+
function render() {
125+
126+
renderer.render( scene, camera );
127+
128+
}
129+
130+
</script>
131+
132+
</body>
133+
</html>

0 commit comments

Comments
 (0)