Recientemente comencé a trabajar con THREE.js y WebGL para cargar modelos de automóviles. Quiero llamar a la función personalizada usando el detector de eventos de clic para que la función obtenga una dirección del atributo de datos y la envíe a otra función personalizada de tipo de archivo JavaScript externo = módulo que usará esa dirección para cargar mis archivos modelo. en todos los pasos mencionados anteriormente, recibo un error en la consola que indica que la función (modelo de carga) no está definida. Estoy usando ES6 Javascript para completar mi trabajo después de mi investigación sobre este problema. Pero no estoy familiarizado con este javascript ES6.
aquí está mi código HTML.
<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>aquí está mi código script.js (tipo = módulo)
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;No ha importado el módulo y no ha establecido type="module" en la etiqueta del script. Además, no necesita importar con <script src="..."> el archivo script.js .
Me gusta :
<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> Además, en su script.js no necesita terminar con window.loadmodel = loadmodel; ya que ya exportó la función con la palabra clave export .
Si necesita más información sobre el tema , aquí hay un enlace a la documentación de MDN que es muy completa sobre el tema.
Y aquí hay un enlace al repositorio de github relacionado (a mdn) con algún ejemplo.
Ese no es el problema, pero como dices que no estás familiarizado con ES6, y veo que importas JQuery... JQuery es un marco que considero obsoleto ya que el 95-99% de sus características tiene su propio equivalente en JavaScript nativo. . Y el 1-5% restante solo se necesita en casos muy especiales en los que es más fácil usar otra biblioteca más nueva (o simplemente exportar el fragmento de código necesario de las fuentes de JQuery).
Todo esto para decir que, si lo usa y no es una dependencia (por ejemplo, para un marco), es posible que no lo necesite.