I encountered an issue while working on a project that involved using three.js with svelte. The problem arose when attempting to load a 3D model, resulting in a server response of 404 not found. Below is the code snippet I used to load the file(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);
Below is the section of the svelte file where I included the scene (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>
Here is the project structure for reference: project structure
Additionally, I encountered an error (excluding the bundle CSS error), although the code works fine when using three.js built-in geometry. console error
Thank you.