JSFiddle - React, Tailwind, and code Playground

by xiaodongliang

HTML

<script src="https://developer.api.autodesk.com/viewingservice/v1/viewers/viewer3D.min.js"></script>
<link rel="stylesheet" href="https://developer.api.autodesk.com/viewingservice/v1/viewers/style.min.css">
<div id="myViewer"/>

CSS

#myViewer{
  width: 100%;
  height: 100%;
}

JavaScript

this.urn_model1 = 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6eGlhb2RvbmctdGVzdC1jb21tb24vUmV2aXRuYXRpdmUtbGV2ZWwtMS5ud2Q=';
this.urn_model2 = 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6eGlhb2RvbmctdGVzdC1jb21tb24vUmV2aXRuYXRpdmUtbGV2ZWwtMi5ud2Q';
this.urn_model3 = 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6eGlhb2RvbmctdGVzdC1jb21tb24vUmV2aXRuYXRpdmUtbGV2ZWwtMy5ud2Q';
this.urn_model4 = 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6eGlhb2RvbmctdGVzdC1jb21tb24vUmV2aXRuYXRpdmUtbGV2ZWwtNC5ud2Q';
 
 this._viewer = null;
 this._firstGlobalOffset = {x:0,y:0,z:0}; 
  


function start(){
 		 var token  = 'eyJhbGciOiJIUzI1NiIsImtpZCI6Imp3dF9zeW1tZXRyaWNfa2V5In0.eyJjbGllbnRfaWQiOiJpWjJzdVlXUEp4dTdWaE05Y0hWME5aYTF2TTZsSWtvVSIsImV4cCI6MTUwNTI5ODc1OSwic2NvcGUiOlsiZGF0YTpyZWFkIiwiZGF0YTp3cml0ZSIsImJ1Y2tldDpjcmVhdGUiLCJidWNrZXQ6cmVhZCJdLCJhdWQiOiJodHRwczovL2F1dG9kZXNrLmNvbS9hdWQvand0ZXhwNjAiLCJqdGkiOiJlT1VKdThBdjdqQnhkcno5bHFzcGpqcGlKVFU0d3NsbEpiZDVSN0huV2NERE5pdWNFMzZlcHZ3N3ZXWWtXUUxvIn0.TMYdzSDuTt5BRcMeZDvOdsdR5V81kz72C8uVsgnWirM';
     var options = {
                        env: 'AutodeskProduction',
                        accessToken: token 
                    };
      
      //It looks the static function of Viewer does not support ES6
      //still use ES5
      Autodesk.Viewing.Initializer(options, function onInitialized(){
      			  var viewerDiv = document.getElementById('myViewer');
              _viewer = new Autodesk.Viewing.Private.GuiViewer3D(viewerDiv,{
        			 }); 
               var modelArray = [	{modelName:'urn_model1',urn:urn_model1,modelObj:null},
               	{modelName:'urn_model2',urn:urn_model2,modelObj:null},
                	{modelName:'urn_model3',urn:urn_model3,modelObj:null},
               						{modelName:'urn_model4',urn:urn_model4,modelObj:null}]; 

								//load model one by one in sequence
                globalPromise(modelArray);  
       });
 }
 

globalPromise = (modelArray)=> {
		  var _this = this;
      var promises = [];
            
...