I want to load my 3d model from an input tag of html . but its giving an error 👇🏻
t.lastIndexOf is not a function
This is my html code 👇🏻
<input type="file" id="MODEL" />
<button onclick="GLTFLoader()" id="LOAD" type="submit">Load_model</button>
And this is my javascript code for loading model👇🏻
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;
});
}
Listen for the change event on the file input, then convert the file blob into a blob URL, like this:
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);
});
});
Here's an demo:
* {
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>From docs for GLTFloader:
.load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : undefined
url — A string containing the path/URL of the .gltf or .glb file.
Make sure that the url parameter you pass to .load() is a String.
So, maybe try:
let url = "" + MODEL;
LOADER.load( url, (gltf) => ...
-jg-