My goal is to run a website locally with the back-written in flask and the front end with three.js, everything works fine because i do not see any errors in the console (devtools) but for some reason it is not showing the model, I have the camera, scene and render, I also loaded the model and added to the scene
<body>
<script src="https://threejs.org/build/three.js" >
import * as THREE from 'three';
let scene, camera, renderer, stats, model;
const loader;
camera = new THREE.PerspectiveCamera(75, window.Width / window.Height, 0.1, 1000);
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.Width, window.Height);
document.body.appendChild(renderer.domElement);
loader = new GLTFLoader();
loader.load( "{{ url_for('static', filename='free_1975_porsche_911_930_turbo.glb') }}",
function ( gltf ) {
scene.add( gltf.scene );
gltf.animations; // Array<THREE.AnimationClip>
gltf.scene; // THREE.Group
gltf.scenes; // Array<THREE.Group>
gltf.cameras; // Array<THREE.Camera>
gltf.asset;
},
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
function ( error ) {
console.error( error );
}
);
function animate()
{
requestAnimationFrame( animate );
renderer.render( scene, camera );
};
animate();
</script>
</body>
why isn't this code showing the model in the browser
the model from sketchfab