BH
The main.js file is currently structured like this:
$(document).ready(function(){
$nav = $('.nav');
$toggleCollapse = $('.toggle-collapse');
/** click event on toggle menu */
$toggleCollapse.click(function(){
$nav.toggleClass('collapse');
})
});
It's difficult to pinpoint the exact issue at the moment, but it seems to have changed from before.
One way to load models without a server is by creating an HTML file that generates a JavaScript loadable file with the data URL of the loaded file. This file can then be included in the main HTML file using a standard script tag. With the THREE.JS model loader, you can simply use the dataURL instead of the model URL.
I have personally used this method numerous times without any server, even without a local server, and successfully loaded various models and files.
An example HTML file / code structure would appear as follows:
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"
a.innerHTML = "Download 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([
`
Duel HTML and JavaScript File,
\ncan be opened in browser and
\nincluded as a script, since JavaScript
\ndoesn't recognize HTML tags in comments,
\nand JS comments don't affect HTML
<script>
if(!window.dataURLified) {
window.dataURLified = function(d) {
window._fileData_${id} = d;
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>
*/
dataURLified({name:"` +
filePicker.files[0].name + `", url: "`+
fr.result
+`"})
`
], {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 any other name you choose) to handle the data. Below is an example file code to be used after the above file is generated and placed in the same directory:
<h2>BH</h2><br>
<h3>HTML Fileized Loader</h3>
<input id="loader"> -- enter the name of the file you want to load as a script (that was generated before)
<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) {
files.push(d)
}
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>