Three.js obj model loading freezes the Canvas until load is complete

Ughhhh this sucks, I have 600+ models I JUST spent a month building as obj.

So I will need to convert them now… Why is there no warning that “OBJ is very slow, use X or Y instead”.

Frig.

Update: My mistake, ThreeJS recommends it fully: https://threejs.org/docs/#manual/en/introduction/FAQ

Update2: Ughhh need to use GLTF version two? https://discourse.threejs.org/t/uncaught-typeerror-cannot-read-property-extracturlbase-of-undefined-at-gltfloader-load/2922

Update 3: Okay, I have GLTF version 2 loading in models, there is the same problem – it lags.

image

After about a full minute, loading in 100 models, it renders…

image

                var gltfLoader = new THREE.GLTF2Loader();

				gltfLoader.load(websiteUrl() + object.assetPath + object.assetObj, (gltf) => {
					
					var object_sprite = gltf.scene;
					
					if(object.type=="ships"){
                    	object_sprite.position.z = 1005;
					}

					if(object.type=="planets"){
                    	object_sprite.position.z = object.z;
						object_sprite.scale.z = 100;
					}

					if(object.type=="cities" ){
						object_sprite.rotation.y = 90;
					}

					if(object.type=="asteroids"){
						object_sprite.rotation.x = Math.floor(Math.random() * 360) + 1;
						object_sprite.rotation.y = Math.floor(Math.random() * 360) + 1;
						object_sprite.rotation.z = Math.floor(Math.random() * 360) + 1;
					}

                    object_sprite.position.y = Number(object.x);
                    object_sprite.position.x = Number(object.y);

                    object_sprite.name = theIdOrArray;

					scene.add(object_sprite);
					scene_objects.push( object_sprite );

				});

Update 4: There is a problem loading multiple models in the library, remove console.time to fix: https://discourse.threejs.org/t/gltfloader-timer-warning-on-multiple-models/2327/2

Update 5: WOW I THINK ITS WORKING? The load time is super fast, but my models aren’t showing up – I need to rebuild some code…

1 Like