我想通过 html 中文件的输入标签为 three.js (javascript) 导入 3d gltf 模型，但它给了我一个错误

Question

我想从 html 的输入标签加载我的 3d 模型。但它给出了一个错误

t.lastIndexOf is not a function

这是我的 html 代码

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

这是我的 javascript 加载模型的代码

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>

Answer 2

来自 GLTFloader 的文档：

.load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : undefined

url — A string containing the path/URL of the .gltf or .glb file.

确保传递给 .load() 的 url 参数是一个字符串。

所以，也许试试：

let url = "" + MODEL;
LOADER.load( url, (gltf) =>  ...

-jg-

我想通过 html 中文件的输入标签为 three.js (javascript) 导入 3d gltf 模型，但它给了我一个错误

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

javascript

3d

file

three.js