jfs

Three.js Loading manager Function

jfs
Aug 27th, 2021 (edited)
1,320
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function addObject(objModel, mtlMaterial) {
  2.  
  3.     const manager = new THREE.LoadingManager();
  4.  
  5.     var viewerAlert = document.getElementById('viewerAlert');
  6.     var viewerFiles = document.getElementById('viewerFiles');
  7.     var countFiles  = document.getElementById('countFiles');
  8.  
  9.     manager.onStart = function(url, itemsLoaded, itemsTotal){
  10.         function showViewerText(){
  11.             viewerFiles.textContent = 'Started loading file: ' + url + '.\nLoaded.';
  12.             countFiles.textContent = itemsLoaded + ' of ' + itemsTotal + ' files.';
  13.         }
  14.  
  15.         if(viewerAlert.style.display == 'flex'){
  16.             showViewerText();
  17.         }
  18.         else {
  19.             viewerAlert.classList.remove('hidden', 'fade-out')
  20.             viewerAlert.classList.add('fade-in');
  21.             showViewerText();
  22.         }
  23.     };
  24.  
  25.     manager.onLoad = function(){
  26.         viewerFiles.textContent = 'Loading complete!';
  27.         countFiles.textContent = '';
  28.  
  29.         setTimeout(() => {
  30.             viewerAlert.classList.add('fade-out');
  31.             viewerAlert.addEventListener('transitionend', function(){
  32.                 viewerAlert.classList.replace('fade-out', 'hidden');
  33.             });
  34.         }, 800);
  35.     };
  36.  
  37.     manager.onProgress = function(url, itemsLoaded, itemsTotal){
  38.         viewerFiles.textContent = 'Loading file: ' + url + '.\nLoaded.';
  39.         countFiles.textContent = itemsLoaded + ' of ' + itemsTotal + ' files.';
  40.     };
  41.  
  42.     manager.onError = function(url){
  43.         viewerFiles.textContent = 'There was an error loading ' + url;
  44.         countFiles.textContent = '';
  45.     };
  46.  
  47.     var mtlLoader = new THREE.MTLLoader(manager);
  48.     mtlLoader.setPath('./assets/models/');
  49.     mtlLoader.load(mtlMaterial, function(materials) {
  50.         materials.preload();
  51.  
  52.         var objLoader = new THREE.OBJLoader(manager);
  53.         objLoader.setMaterials(materials);
  54.         objLoader.setPath('./assets/models/');
  55.         objLoader.load(objModel,
  56.             function(obj){
  57.                 obj.name = 'mainmodel';
  58.  
  59.                 obj.position.set(0, 0, 0);
  60.                 obj.castShadow = true;
  61.                 obj.receiveShadow = true;
  62.  
  63.                 // const box = new THREE.BoxHelper( obj, 0xffff00 );
  64.  
  65.                 scene.add(obj);
  66.                 console.log(obj);
  67.                 // camera.position = obj.position;
  68.  
  69.                 //scale all models to a relative scene size
  70.                 const model = new THREE.Box3().setFromObject(obj);
  71.  
  72.                 let size = new THREE.Vector3();
  73.                 model.getSize(size);
  74.                 let scaleVec = new THREE.Vector3(1, 1, 1).divide(size);
  75.                 let scale = Math.min(scaleVec.x, Math.min(scaleVec.y, scaleVec.z));
  76.                 obj.scale.setScalar(scale * 2);
  77.             },
  78.             function(xhr){
  79.  
  80.             },
  81.             function(error){
  82.                 console.error('An error occured!' + error);
  83.             }
  84.         );
  85.     });
  86. }
Advertisement
Add Comment
Please, Sign In to add comment