Skip to content

Commit 4203d2b

Browse files
Mugen87Mugen87
authored
Examples: Clean up. (#31643)
* Examples: Clean up. * Update webgl_loader_gltf_progressive_lod.html * Examples: More clean up.
1 parent 2a99ef3 commit 4203d2b

File tree

2 files changed

+33
-31
lines changed

2 files changed

+33
-31
lines changed

‎examples/screenshots/webgl_loader_gltf_progressive_lod.jpg

-122 Bytes
Loading

‎examples/webgl_loader_gltf_progressive_lod.html

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,7 @@
2222

2323
<body>
2424
<div id="info">
25-
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - GLTF progressive loading: 82x faster - <a href="https://www.npmjs.com/package/@needle-tools/gltf-progressive" target="_blank" rel="noopener">@needle-tools/gltf-progressive</a>
26-
27-
<br />
28-
<br />
25+
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - GLTF progressive loading: 82x faster - <a href="https://www.npmjs.com/package/@needle-tools/gltf-progressive" target="_blank" rel="noopener">@needle-tools/gltf-progressive</a><br />
2926
Mobile Home & Peachy Balloon by
3027
<a href="https://sketchfab.com/3d-models/mobile-home-5240b1dbc29c4ea28be7f91b3638951a" target="_blank" rel="noopener">ConradJustin</a><br/>
3128
The Forgotten Knight by
@@ -72,15 +69,15 @@
7269
renderer.toneMappingExposure = 1;
7370

7471
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 40 );
75-
camera.position.set( -9, 2, -13 );
72+
camera.position.set( - 9, 2, - 13 );
7673

77-
const fog = new THREE.Fog( "#131055", 15, 50 );
74+
const fog = new THREE.Fog( '#131055', 15, 50 );
7875
scene.fog = fog;
7976

8077
const controls = new OrbitControls( camera, renderer.domElement );
8178
controls.minDistance = .1;
8279
controls.maxDistance = 20;
83-
controls.target.set( -1, 2.1, 0 );
80+
controls.target.set( - 1, 2.1, 0 );
8481
controls.update();
8582

8683
new HDRLoader()
@@ -89,86 +86,90 @@
8986

9087
texture.mapping = THREE.EquirectangularReflectionMapping;
9188

92-
scene.background = new THREE.Color( "#192022" );
89+
scene.background = new THREE.Color( '#192022' );
9390
scene.backgroundBlurriness = .5;
9491
scene.environment = texture;
95-
scene.environmentRotation = new THREE.Euler( 0, Math.PI / -2, 0, 'XYZ' );
92+
scene.environmentRotation = new THREE.Euler( 0, Math.PI / - 2, 0, 'XYZ' );
9693

9794
} );
98-
95+
9996

100-
mixer = new THREE.AnimationMixer(scene);
97+
mixer = new THREE.AnimationMixer( scene );
10198

10299
const loader = new GLTFLoader();
103100

104-
useNeedleProgressive(loader, renderer);
101+
useNeedleProgressive( loader, renderer );
105102

106-
loader.load('https://cloud.needle.tools/-/assets/Z23hmXBZ2sPRdk-world/file', function ( gltf ) {
103+
loader.load( 'https://cloud.needle.tools/-/assets/Z23hmXBZ2sPRdk-world/file', function ( gltf ) {
107104

108105
const model = gltf.scene;
109106

110107
model.scale.multiplyScalar( 0.1 );
111108

112109
scene.add( model );
113-
110+
114111
const animations = gltf.animations;
115112
if ( animations && animations.length ) {
116113

117-
for (const animation of animations) {
114+
for ( const animation of animations ) {
118115

119-
mixer.clipAction(animation).play();
116+
mixer.clipAction( animation ).play();
120117

121118
}
119+
122120
}
123121

124122
} );
125123

126-
loader.load('https://cloud.needle.tools/-/assets/Z23hmXBZnlceI-ZnlceI-world/file', function ( gltf ) {
124+
loader.load( 'https://cloud.needle.tools/-/assets/Z23hmXBZnlceI-ZnlceI-world/file', function ( gltf ) {
127125

128126
const model = gltf.scene;
129-
127+
130128
model.scale.multiplyScalar( 0.0005 );
131129

132130
model.position.set( 1.6, 6, 7 );
133131

134132
model.rotation.set( 0, Math.PI * 1.4, 0 );
135-
133+
136134
scene.add( model );
137135

138136
airshipModel = model;
139-
137+
140138
const animations = gltf.animations;
139+
141140
if ( animations && animations.length ) {
142141

143-
for (const animation of animations) {
142+
for ( const animation of animations ) {
144143

145-
mixer.clipAction(animation).play();
144+
mixer.clipAction( animation ).play();
146145

147146
}
147+
148148
}
149149

150150
} );
151151

152-
loader.load('https://cloud.needle.tools/-/assets/Z23hmXBZ21QnG-Z21QnG-product/file', function ( gltf ) {
152+
loader.load( 'https://cloud.needle.tools/-/assets/Z23hmXBZ21QnG-Z21QnG-product/file', function ( gltf ) {
153153

154154
const model = gltf.scene;
155-
155+
156156
model.scale.multiplyScalar( 0.5 );
157157

158158
model.position.set( 2, 5.15, 2.3 );
159159

160160
model.rotation.set( 0, Math.PI * 1, 0 );
161-
161+
162162
scene.add( model );
163-
163+
164164
const animations = gltf.animations;
165165
if ( animations && animations.length ) {
166166

167-
for (const animation of animations) {
167+
for ( const animation of animations ) {
168168

169-
mixer.clipAction(animation).play();
169+
mixer.clipAction( animation ).play();
170170

171171
}
172+
172173
}
173174

174175
} );
@@ -199,17 +200,18 @@
199200
const dt = clock.getDelta();
200201
time += dt;
201202

202-
mixer.update(dt);
203+
mixer.update( dt );
203204

204-
if( airshipModel ) {
205+
if ( airshipModel ) {
205206

206-
airshipModel.position.y += Math.sin(time) * 0.002;
207+
airshipModel.position.y += Math.sin( time ) * 0.002;
207208

208209
}
209210

210211
renderer.render( scene, camera );
211212

212213
window.requestAnimationFrame( animate );
214+
213215
}
214216

215217
animate();

0 commit comments

Comments
 (0)