Skip to content

Commit 4500a36

Browse files
author
Don McCurdy
committedAug 30, 2018
Examples: Convert LeePerrySmith.json to glTF.
1 parent 79ad386 commit 4500a36

17 files changed

+67
-99
lines changed
 

‎examples/models/gltf/LeePerrySmith/LeePerrySmith.glb

395 KB
Binary file not shown.

‎examples/models/json/leeperrysmith/LeePerrySmith.json

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

‎examples/webgl_decals.html

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
<script src="../build/three.js"></script>
3838
<script src="js/geometries/DecalGeometry.js"></script>
3939
<script src="js/controls/OrbitControls.js"></script>
40+
<script src="js/loaders/GLTFLoader.js"></script>
4041
<script src="js/libs/stats.min.js"></script>
4142
<script src="js/libs/dat.gui.min.js"></script>
4243

@@ -239,19 +240,19 @@
239240

240241
function loadLeePerrySmith( callback ) {
241242

242-
var loader = new THREE.JSONLoader();
243+
var loader = new THREE.GLTFLoader();
243244

244-
loader.load( 'models/json/leeperrysmith/LeePerrySmith.json', function( geometry ) {
245+
loader.load( 'models/gltf/LeePerrySmith/LeePerrySmith.glb', function( gltf ) {
245246

246-
var material = new THREE.MeshPhongMaterial( {
247+
mesh = gltf.scene.children[ 0 ];
248+
mesh.material = new THREE.MeshPhongMaterial( {
247249
specular: 0x111111,
248-
map: textureLoader.load( 'models/json/leeperrysmith/Map-COL.jpg' ),
249-
specularMap: textureLoader.load( 'models/json/leeperrysmith/Map-SPEC.jpg' ),
250-
normalMap: textureLoader.load( 'models/json/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg' ),
250+
map: textureLoader.load( 'models/gltf/LeePerrySmith/Map-COL.jpg' ),
251+
specularMap: textureLoader.load( 'models/gltf/LeePerrySmith/Map-SPEC.jpg' ),
252+
normalMap: textureLoader.load( 'models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg' ),
251253
shininess: 25
252254
} );
253255

254-
mesh = new THREE.Mesh( geometry, material );
255256
scene.add( mesh );
256257
mesh.scale.set( 10, 10, 10 );
257258

‎examples/webgl_helpers.html

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616

1717
<script src="../build/three.js"></script>
1818

19+
<script src="js/loaders/GLTFLoader.js"></script>
20+
1921
<script>
2022

2123
var scene, renderer;
@@ -55,10 +57,10 @@
5557
polarGridHelper.position.x = 200;
5658
scene.add( polarGridHelper );
5759

58-
var loader = new THREE.JSONLoader();
59-
loader.load( 'models/json/leeperrysmith/LeePerrySmith.json', function ( geometry, materials ) {
60+
var loader = new THREE.GLTFLoader();
61+
loader.load( 'models/gltf/LeePerrySmith/LeePerrySmith.glb', function ( gltf ) {
6062

61-
var material = new THREE.MeshLambertMaterial();
63+
var mesh = gltf.scene.children[ 0 ];
6264

6365
var group = new THREE.Group();
6466
group.scale.multiplyScalar( 50 );
@@ -67,18 +69,18 @@
6769
// To make sure that the matrixWorld is up to date for the boxhelpers
6870
group.updateMatrixWorld(true);
6971

70-
var mesh = new THREE.Mesh( geometry, material );
7172
group.add( mesh );
7273

73-
fnh = new THREE.FaceNormalsHelper( mesh, 5 );
74-
scene.add( fnh );
74+
// TODO: Implement BufferGeometry support in FaceNormalsHelper.
75+
// fnh = new THREE.FaceNormalsHelper( mesh, 5 );
76+
// scene.add( fnh );
7577

7678
vnh = new THREE.VertexNormalsHelper( mesh, 5 );
7779
scene.add( vnh );
7880

7981
scene.add( new THREE.BoxHelper( mesh ) );
8082

81-
var wireframe = new THREE.WireframeGeometry( geometry );
83+
var wireframe = new THREE.WireframeGeometry( mesh.geometry );
8284
var line = new THREE.LineSegments( wireframe );
8385
line.material.depthTest = false;
8486
line.material.opacity = 0.25;
@@ -87,7 +89,7 @@
8789
group.add( line );
8890
scene.add( new THREE.BoxHelper( line ) );
8991

90-
var edges = new THREE.EdgesGeometry( geometry );
92+
var edges = new THREE.EdgesGeometry( mesh.geometry );
9193
var line = new THREE.LineSegments( edges );
9294
line.material.depthTest = false;
9395
line.material.opacity = 0.25;

‎examples/webgl_loader_ctm.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -181,9 +181,9 @@
181181

182182
specular: 0x303030,
183183
shininess: 50,
184-
map: textureLoader.load( "models/json/leeperrysmith/Map-COL.jpg" ),
185-
specularMap: textureLoader.load( "models/json/leeperrysmith/Map-SPEC.jpg" ),
186-
normalMap: textureLoader.load( "models/json/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg" ),
184+
map: textureLoader.load( "models/gltf/LeePerrySmith/Map-COL.jpg" ),
185+
specularMap: textureLoader.load( "models/gltf/LeePerrySmith/Map-SPEC.jpg" ),
186+
normalMap: textureLoader.load( "models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg" ),
187187
normalScale: new THREE.Vector2( 0.8, 0.8 )
188188

189189
} );

‎examples/webgl_materials_bumpmap.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
</div>
4545

4646
<script src="../build/three.js"></script>
47+
<script src="js/loaders/GLTFLoader.js"></script>
4748

4849
<script src="js/Detector.js"></script>
4950
<script src="js/libs/stats.min.js"></script>
@@ -110,7 +111,7 @@
110111

111112
//
112113

113-
var mapHeight = new THREE.TextureLoader().load( "models/json/leeperrysmith/Infinite-Level_02_Disp_NoSmoothUV-4096.jpg" );
114+
var mapHeight = new THREE.TextureLoader().load( "models/gltf/LeePerrySmith/Infinite-Level_02_Disp_NoSmoothUV-4096.jpg" );
114115

115116
var material = new THREE.MeshPhongMaterial( {
116117
color: 0x552811,
@@ -120,8 +121,8 @@
120121
bumpScale: 12
121122
} );
122123

123-
loader = new THREE.JSONLoader();
124-
loader.load( "models/json/leeperrysmith/LeePerrySmith.json", function( geometry ) { createScene( geometry, 100, material ) } );
124+
loader = new THREE.GLTFLoader();
125+
loader.load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function( gltf ) { createScene( gltf.scene.children[ 0 ].geometry, 100, material ) } );
125126

126127
renderer = new THREE.WebGLRenderer();
127128
renderer.setPixelRatio( window.devicePixelRatio );

‎examples/webgl_materials_bumpmap_skin.html

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,8 @@
5151
<script src="js/postprocessing/ShaderPass.js"></script>
5252
<script src="js/postprocessing/MaskPass.js"></script>
5353

54+
<script src="js/loaders/GLTFLoader.js"></script>
55+
5456
<script src="js/Detector.js"></script>
5557
<script src="js/libs/stats.min.js"></script>
5658

@@ -125,10 +127,10 @@
125127

126128
//
127129

128-
loader = new THREE.JSONLoader();
129-
loader.load( "models/json/leeperrysmith/LeePerrySmith.json", function ( geometry ) {
130+
loader = new THREE.GLTFLoader();
131+
loader.load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function ( gltf ) {
130132

131-
createScene( geometry, 100 )
133+
createScene( gltf.scene.children[ 0 ].geometry, 100 )
132134

133135
} );
134136

@@ -187,19 +189,19 @@
187189

188190
var textureLoader = new THREE.TextureLoader();
189191

190-
var mapHeight = textureLoader.load( "models/json/leeperrysmith/Infinite-Level_02_Disp_NoSmoothUV-4096.jpg" );
192+
var mapHeight = textureLoader.load( "models/gltf/LeePerrySmith/Infinite-Level_02_Disp_NoSmoothUV-4096.jpg" );
191193

192194
mapHeight.anisotropy = 4;
193195
mapHeight.wrapS = mapHeight.wrapT = THREE.RepeatWrapping;
194196
mapHeight.format = THREE.RGBFormat;
195197

196-
var mapSpecular = textureLoader.load( "models/json/leeperrysmith/Map-SPEC.jpg" );
198+
var mapSpecular = textureLoader.load( "models/gltf/LeePerrySmith/Map-SPEC.jpg" );
197199

198200
mapSpecular.anisotropy = 4;
199201
mapSpecular.wrapS = mapSpecular.wrapT = THREE.RepeatWrapping;
200202
mapSpecular.format = THREE.RGBFormat;
201203

202-
var mapColor = textureLoader.load( "models/json/leeperrysmith/Map-COL.jpg" );
204+
var mapColor = textureLoader.load( "models/gltf/LeePerrySmith/Map-COL.jpg" );
203205

204206
mapColor.anisotropy = 4;
205207
mapColor.wrapS = mapColor.wrapT = THREE.RepeatWrapping;

‎examples/webgl_materials_modified.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545

4646
<script src="../build/three.js"></script>
4747
<script src="js/controls/OrbitControls.js"></script>
48+
<script src="js/loaders/GLTFLoader.js"></script>
4849

4950
<script src="js/Detector.js"></script>
5051
<script src="js/libs/stats.min.js"></script>
@@ -92,10 +93,10 @@
9293

9394
};
9495

95-
var loader = new THREE.JSONLoader();
96-
loader.load( 'models/json/leeperrysmith/LeePerrySmith.json', function( geometry ) {
96+
var loader = new THREE.GLTFLoader();
97+
loader.load( 'models/gltf/LeePerrySmith/LeePerrySmith.glb', function( gltf ) {
9798

98-
var mesh = new THREE.Mesh( geometry, material );
99+
var mesh = new THREE.Mesh( gltf.scene.children[ 0 ].geometry, material );
99100
mesh.position.y = - 50;
100101
mesh.scale.setScalar( 100 );
101102
scene.add( mesh );

‎examples/webgl_materials_normalmap.html

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@
5353
</div>
5454

5555
<script src="../build/three.js"></script>
56+
<script src="js/loaders/GLTFLoader.js"></script>
5657

5758
<script src="js/Detector.js"></script>
5859
<script src="js/libs/stats.min.js"></script>
@@ -124,14 +125,14 @@
124125
color: 0xdddddd,
125126
specular: 0x222222,
126127
shininess: 35,
127-
map: textureLoader.load( "models/json/leeperrysmith/Map-COL.jpg" ),
128-
specularMap: textureLoader.load( "models/json/leeperrysmith/Map-SPEC.jpg" ),
129-
normalMap: textureLoader.load( "models/json/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg" ),
128+
map: textureLoader.load( "models/gltf/LeePerrySmith/Map-COL.jpg" ),
129+
specularMap: textureLoader.load( "models/gltf/LeePerrySmith/Map-SPEC.jpg" ),
130+
normalMap: textureLoader.load( "models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg" ),
130131
normalScale: new THREE.Vector2( 0.8, 0.8 )
131132
} );
132133

133-
loader = new THREE.JSONLoader();
134-
loader.load( "models/json/leeperrysmith/LeePerrySmith.json", function( geometry ) { createScene( geometry, 100, material ) } );
134+
loader = new THREE.GLTFLoader();
135+
loader.load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function( gltf ) { createScene( gltf.scene.children[ 0 ].geometry, 100, material ) } );
135136

136137
renderer = new THREE.WebGLRenderer();
137138
renderer.setSize( window.innerWidth, window.innerHeight );

‎examples/webgl_materials_skin.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
<script src="js/postprocessing/ShaderPass.js"></script>
5757
<script src="js/postprocessing/MaskPass.js"></script>
5858

59-
59+
<script src="js/loaders/GLTFLoader.js"></script>
6060
<script src="js/Detector.js"></script>
6161
<script src="js/libs/stats.min.js"></script>
6262

@@ -118,10 +118,10 @@
118118

119119
var textureLoader = new THREE.TextureLoader();
120120

121-
uniformsUV[ "tNormal" ].value = textureLoader.load( "models/json/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg" );
121+
uniformsUV[ "tNormal" ].value = textureLoader.load( "models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg" );
122122
uniformsUV[ "uNormalScale" ].value = -1.5;
123123

124-
uniformsUV[ "tDiffuse" ].value = textureLoader.load( "models/json/leeperrysmith/Map-COL.jpg" );
124+
uniformsUV[ "tDiffuse" ].value = textureLoader.load( "models/gltf/LeePerrySmith/Map-COL.jpg" );
125125

126126
uniformsUV[ "passID" ].value = 0;
127127

@@ -149,10 +149,10 @@
149149

150150
// LOADER
151151

152-
loader = new THREE.JSONLoader();
153-
loader.load( "models/json/leeperrysmith/LeePerrySmith.json", function( geometry ) {
152+
loader = new THREE.GLTFLoader();
153+
loader.load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function( gltf ) {
154154

155-
createScene( geometry, 100, material );
155+
createScene( gltf.scene.children[ 0 ].geometry, 100, material );
156156

157157
} );
158158

‎examples/webgl_modifier_simplifier.html

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020

2121
<script src="../build/three.js"></script>
2222
<script src="js/controls/OrbitControls.js"></script>
23+
<script src="js/loaders/GLTFLoader.js"></script>
2324
<script src="js/modifiers/SimplifyModifier.js"></script>
2425

2526
<script>
@@ -59,25 +60,24 @@
5960
camera.add( light );
6061
scene.add( camera );
6162

62-
new THREE.JSONLoader().load( "models/json/leeperrysmith/LeePerrySmith.json", function ( geometry ) {
63+
new THREE.GLTFLoader().load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function ( gltf ) {
6364

64-
var material = new THREE.MeshPhongMaterial( { color: 0xAEAED5, shininess: 1 } );
65-
66-
var mesh = new THREE.Mesh( geometry, material );
65+
var mesh = gltf.scene.children[ 0 ];
6766
mesh.position.x = - 3;
6867
mesh.rotation.y = Math.PI / 2;
6968
scene.add( mesh );
7069

7170
var modifer = new THREE.SimplifyModifier();
7271

73-
var simplified = modifer.modify( geometry, Math.floor( geometry.vertices.length * 0.9375 ) ); // number of vertices to remove
74-
75-
var material = new THREE.MeshPhongMaterial( { color: 0xAEAED5, shininess: 1, flatShading: true } );
72+
var simplified = mesh.clone();
73+
simplified.material = simplified.material.clone();
74+
simplified.material.flatShading = true;
75+
var count = Math.floor( simplified.geometry.attributes.position.count * 0.875 ); // number of vertices to remove
76+
simplified.geometry = modifer.modify( simplified.geometry, count );
7677

77-
var mesh = new THREE.Mesh( simplified, material );
78-
mesh.position.x = 3;
79-
mesh.rotation.y = - Math.PI / 2;
80-
scene.add( mesh );
78+
simplified.position.x = 3;
79+
simplified.rotation.y = - Math.PI / 2;
80+
scene.add( simplified );
8181

8282
render();
8383

‎examples/webgl_postprocessing_advanced.html

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,8 @@
6262
<script src="js/postprocessing/ShaderPass.js"></script>
6363
<script src="js/postprocessing/MaskPass.js"></script>
6464

65+
<script src="js/loaders/GLTFLoader.js"></script>
66+
6567
<script src="js/Detector.js"></script>
6668
<script src="js/libs/stats.min.js"></script>
6769

@@ -111,10 +113,10 @@
111113
directionalLight.position.set( 0, -0.1, 1 ).normalize();
112114
sceneModel.add( directionalLight );
113115

114-
var loader = new THREE.JSONLoader();
115-
loader.load( "models/json/leeperrysmith/LeePerrySmith.json", function( geometry ) {
116+
var loader = new THREE.GLTFLoader();
117+
loader.load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function( gltf ) {
116118

117-
createMesh( geometry, sceneModel, 100 );
119+
createMesh( gltf.scene.children[ 0 ].geometry, sceneModel, 100 );
118120

119121
} );
120122

@@ -340,8 +342,8 @@
340342
color: 0x999999,
341343
specular: 0x080808,
342344
shininess: 20,
343-
map: new THREE.TextureLoader().load( "models/json/leeperrysmith/Map-COL.jpg" ),
344-
normalMap: new THREE.TextureLoader().load("models/json/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg" ),
345+
map: new THREE.TextureLoader().load( "models/gltf/LeePerrySmith/Map-COL.jpg" ),
346+
normalMap: new THREE.TextureLoader().load("models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg" ),
345347
normalScale: new THREE.Vector2( 0.75, 0.75 )
346348

347349
} );

0 commit comments

Comments
 (0)