Quiero cargar mi modelo 3d desde una etiqueta de entrada de html. pero da error 👇🏻
t.lastIndexOf no es una función
Este es mi código html 👇🏻
<input type="file" id="MODEL" /> <button onclick="GLTFLoader()" id="LOAD" type="submit">Load_model</button>Y este es mi código javascript para cargar modelo👇🏻
function GLTFLoader() { const MODEL = document.getElementById("MODEL").files[0] var Mesh ; let LOADER = new THREE.GLTFLoader(); LOADER.load(MODEL, (gltf) => {Mesh = gltf.scene; Mesh.scale.set(0.2,0.2,0.2); scene.add(Mesh); Mesh.position.x=0; Mesh.position.y=10; Mesh.position.z=15; }); }Escuche el evento de cambio en la entrada del archivo, luego convierta el archivo blob en una URL de blob, como esta:
const loader = new GLTFLoader(); const input = document.querySelector("input"); input.addEventListener("change", (event) => { const file = event.target.files[0]; const url = URL.createObjectURL(file); loader.load(url, (gltf) => { scene.add(gltf.scene); }); });Aquí hay una demostración:
* { box-sizing: border-box; margin: 0; padding: 0; } canvas { display: block; } input { position: absolute; z-index: 1; top: 1em; left: 1em; } <input type="file" /> <script type="module"> import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.121.1/build/three.module.js"; import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three@0.121.1/examples/jsm/controls/OrbitControls.js"; import { GLTFLoader } from "https://cdn.jsdelivr.net/npm/three@0.121.1/examples/jsm/loaders/GLTFLoader.js"; const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const cameraMin = 0.0001; const aspect = window.innerWidth / window.innerHeight; const camera = new THREE.PerspectiveCamera(75, aspect, cameraMin, 1000); const controls = new OrbitControls(camera, renderer.domElement); const scene = new THREE.Scene(); camera.position.z = 5; const cube = new THREE.Mesh( new THREE.BoxBufferGeometry(), new THREE.MeshNormalMaterial() ); const spotLight1 = new THREE.SpotLight(0xffffff); const spotLight2 = new THREE.SpotLight(0xffffff); const spotLight3 = new THREE.SpotLight(0xffffff); const spotLight4 = new THREE.SpotLight(0xffffff); spotLight1.position.set(0, 0, -5); spotLight2.position.set(0, 0, 5); spotLight3.position.set(5, 5, 5); spotLight4.position.set(-5, -5, -5); scene.add(spotLight1); scene.add(spotLight2); scene.add(spotLight3); scene.add(spotLight4); const loader = new GLTFLoader(); const input = document.querySelector("input"); input.addEventListener("change", (event) => { const file = event.target.files[0]; const url = URL.createObjectURL(file); loader.load(url, (gltf) => { scene.add(gltf.scene); }); }); (function animate() { requestAnimationFrame(animate); renderer.setSize(window.innerWidth, window.innerHeight); camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); controls.update(); renderer.render(scene, camera); })(); </script>De documentos para GLTFloader :
.load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : undefined url — A string containing the path/URL of the .gltf or .glb file.Asegúrese de que el parámetro de URL que pasa a .load() sea una cadena.
Entonces, tal vez intente:
let url = "" + MODEL; LOADER.load( url, (gltf) => ...-jg-