Using three.js: .glb 3d model shows up locally but not on github server, receive SyntaxError: Json.parse

Question

I tried to use three.js to display a 3d model in my personal webpage. The model can be successfully displayed on my local server, however it failed to show up on my web server and I got an error like this:

(links to my .glb file, the main.js, and the index.html file)

I opened my browser web tools and the HTTP response data of my .glb model looks like this:

Any ideas would be highly appreciated.

Answer 1

BH

currently the main.js file looks like this:

$(document).ready(function(){

  $nav = $('.nav');
  $toggleCollapse = $('.toggle-collapse');

      /** click event on toggle menu */
  $toggleCollapse.click(function(){
      $nav.toggleClass('collapse');
  })


});

so it's hard to say exactly what the problem is now, but I'm guessing it was different before.

Without knowing the details of the server code [since you said it was fine in your local server but not on your main server] it's difficult to know the exact details of the issue, but one alternative for loading models without any server at all [but also works through servers] is by making another program [HTML file] that creates a JavaScript loadable file containing the data URL of the file loaded, which can then be included into the main HTML file with a standard script tag [or programmatically], then with the THREE.JS model loader, simply use the dataURL instead of the model URL.

I've persoanlly used this method many times without any server, not even a local server, and I've been able to load all kinds of models [and other files in general].

An example HTML file / code would look something like this:

BH
<br>
data URL-ifier
<br>
<input id="filePicker" type="file">
<br>
<div id="kinTayner"></div>
<script>
filePicker.onchange = () => {
  var fr = new FileReader()
  fr.onload = () => {
    a = document.createElement("a")
    kinTayner.innerHTML=""
    a.download = filePicker.files[0].name+".html"//or .js,
      //but .html files can actually be included in a 
      //project the same as JS scripts, which can be
      //useful if you want to view it quickly in the 
      //browser
    a.innerHTML = "Downlaod the DATA-Urlifier file?!"+
  "<br>On GitHub might have to right click->save link as"
    var id=Date.now()
    a.href = URL.createObjectURL(new Blob([
      `
        /*BH
        \n
        <br>
        Duel HTML and JavaScript File,
        \n<br> can be opened in browser and
        \n<br> included as a script, since JavaScript
        \n<br>doesn't recognize HTML tags in comments,
        \n<br> and JS comments don't affect HTML
        <script>
        
        if(!window.dataURLified) {
          window.dataURLified = function(d) {
            window._fileData_${id} = d;
                //to access from console for later use
            var m = document.getElementById("${id}")
            if(!m) return;
            m.innerHTML = "<h1>Your file data!</h1>"+
            "<br><h2>"+d.name+"</h2><br>"+
            "<a href='" + d.url + 
            "' target='_blank'>View your file [or right click to download]</a>"
          }
        }
        </`+`script>
        <div id="${id}"></div>
        <style>
        
        </style>
          
        */
        //<script>
        dataURLified({name:"` +
          filePicker.files[0].name + `", url: "`+
          fr.result
        +`"})
       // </`+`script>
        `
    ], {type:"text/html"}))
    
    kinTayner.appendChild(a)
  }
  
  fr.readAsDataURL(filePicker.files[0])
}
</script>

Then in your main code you can read it by including a script with that name [even if the extension is .html] and define a global function dataURLified [or whatever] to handle the data, here's an example file code [to be used after the above file is generated, and placed in the same directory as the following code, or hosted online, and in the input box enter the URL of that file and open the console]:

<h2>BH</h2><br>
<h3>HTML Fileized Loader</h3>
<input id="loader"> -- enter the name of the file you want to load as script [that was generated b4]
<script>
    var files = []
    function loadSc(name) {
        return new Promise((r,j) => {
         var sc = document.createElement("script")
         sc.onload=()=>{
            r({msg:"Loaded",fl:files[files.length-1]}) 
         }
         sc.onerror=(e)=>{
            j({msg:"Nope",details:e}) 
         }
         sc.src=name;
         document.body.appendChild(sc)
        })
    }
    
    function dataURLified(d) {
        //use it here
        files.push(d)
    }
    
    ///somewhere in code, can just call loadSc, just an example
    loader.onchange = () => {
        loadSc(loader.value)
        .then(r=> {
            
            console.log(myFile=r.fl,r.msg,"Use myFile.url for the path!")
        }).catch(e=>{
            console.log("PRoblem!",e)
        })
    }
</script>