我想通過 html 的輸入標簽導入 3d gltf model 用於 three.js （javascript）中的文件，但它給了我一個錯誤

Question

我想從 html 的輸入標簽加載我的 3d model。 但它給出了一個錯誤

t.lastIndexOf is not a function

這是我的 html 代碼

 <input type="file" id="MODEL" />
 <button onclick="GLTFLoader()" id="LOAD" type="submit">Load_model</button>
 

這是我的 javascript 代碼，用於加載 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;
       }); 
 }

Answer 1

監聽文件輸入的更改事件，然后將文件 blob 轉換為 blob URL，如下所示：

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);
  });
});

這是一個演示：

 * { 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>