I am recently started working with THREE.js and WebGL to load car models. I want to call the custom function using on click event listener so that function gets an address from the data- attribute and sends it to another custom function of external JavaScript file type=module which will use that address to load my model files. in all the above-mentioned steps, I am getting an error in the console that the function(load model) is not defined. I am using ES6 Javascript to complete my work after my research on this problem. But I am not familiar with this ES6 javascript.
here is my HTML code.
<body>
<canvas class="webgl"></canvas>
<input class="but" type="button" value="click" onclick="myfun()">
<script type="module">
var first = "ASSET/model/unt.glb";
var valuee;
function myfun(valuee){
var second = valuee;
localStorage.setItem("model_value_local", second);
loadmodel();
};
myfun(first);
</script>
<script type="module" src="./script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</body>
here is my script.js (type=module) code
export function loadmodel()
{
var model_value = localStorage.getItem("model_value_local");
alert(model_value);
let model;
const loader = new GLTFLoader()
loader.load(model_value,
(gltf) => {
model = gltf.scene;
model.scale.set(3, 3, 3);
scene.add(model);
}
)
};
window.loadmodel = loadmodel;
You have not import the module and you have not set type="module" to the script tag. Also you don't need to import with <script src="..."> the script.js file.
Like :
<canvas class="webgl"></canvas>
<script type="module">
import { loadmodel } from './script.js';
var first = "ASSET/model/unt.glb";
// ...
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Also, in your script.js you don't need to finish with window.loadmodel = loadmodel; since you already exported the function with the export keyword.
If you need more information on the subject here is a link to the MDN documentation which is very complete on the subject.
And here is a link to the related (to mdn) github repository with some example.
This is not the issue, but as you say you are not familiar with ES6, and I see that you import JQuery... JQuery is a framework that I consider obsolete since 95-99% of its features has its own equivalent in Native JavaScript. And the remaining 1-5% are only needed in very special cases where it's more easier to use another newer library (or just export the necessary code fragment from the JQuery sources).
All this to say that, if you use it and it is not a dependency (e.g. for a framework) you may do not need it.