Can't see my imported .glb model on my webpage, but I can see it on glTF Viewer! What do I do?

Questions
1

Any ideas?

Here is my HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My first three.js app</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <script src="./three.js-master/build/three.min.js"></script>
    <script src="./three.js-master/examples/js/loaders/GLTFLoader.js"></script>
    <script src="./main.js"></script>
  </body>
</html>

Here is my Javascript

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

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Importing violin
const loader = new THREE.GLTFLoader();

loader.load(
  "includes/violin2.0.glb",
  function (gltf) {
    scene.add(gltf.scene);
  },
  undefined,
  function (error) {
    console.error(error);
  }
);

// Rendering the Scene
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();
2

You will need to add lights to your scene. AmbientLight for instance.
Also move the camera out of the origin and make it look the origin.