I want to import 3d gltf model via html's input tag for file in three.js (javascript) but it's giving me an error

Admin 1
Viewed 569

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;
      }); 
 }
three.js 3d file javascript
2 Answers

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>

user_24137220

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-

user_30180960
Related