javascript - Three.js 不加载 gltf 文件

Question

我在一个项目中使用了带 svelte 的 three.js，当我尝试加载 3d 模型时，服务器返回 404 未找到。这是我加载文件的代码（Scene.js）

import * as THREE from 'three';
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js';

const loader = new GLTFLoader();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

loader.load('../model/room.gltf', function (gltf){
   scene.add(gltf.scene);
}, undefined, function(error){
   console.log("error: ",error);
});
let renderer;
camera.position.z = 5;


const resize = () => {
    renderer.setSize(window.innerWidth, window.innerHeight)
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
};

export const createScene = (el) => {
    renderer = new THREE.WebGLRenderer({ antialias: true, canvas: el });
    resize();
}

window.addEventListener('resize', resize);

这是我将场景包含在（Main.svelte）中的苗条文件

<script>
import {onMount} from 'svelte';
import {createScene} from "../Scene/Scene"
let el;

onMount(() => {
    createScene(el);
})
</script>

<canvas bind:this={el}></canvas>
<style>

</style>

这是项目结构 项目结构

这是错误（忽略捆绑CSS错误），当我使用three.js内置几何时，代码也有效。 控制台错误

谢谢你。

标签： javascriptthree.jssveltegltf