GLTF object is not loading

So I am newbie to three.js and wanted to try this tutorial https://redstapler.co/add-3d-model-to-website-threejs/

After placing everything, and writing the code again , the scene never loads up, not on chrome or internet explorer, and this happens even if I keep orbit control on minus the GLTF loader, it show simple geometry options.

Here is my code:

My first three.js app body { margin: 0; } canvas { width: 100%; height: 100% }
	<script>
  let scene, camera, renderer;
  function init() {
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xdddddd);
    camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000);
    camera.rotation.y = 45/180*Math.PI;
    camera.position.x = 800;
    camera.position.y = 100;
    camera.position.z = 1000;
    controls = new THREE.OrbitControls(camera);
    controls.addEventListener('change', renderer);
    hlight = new THREE.AmbientLight (0x404040,100);
    scene.add(hlight);
    directionalLight = new THREE.DirectionalLight(0xffffff,100);
    directionalLight.position.set(0,1,0);
    directionalLight.castShadow = true;
    scene.add(directionalLight);
    light = new THREE.PointLight(0xc4c4c4,10);
    light.position.set(0,300,500);
    scene.add(light);
    light2 = new THREE.PointLight(0xc4c4c4,10);
    light2.position.set(500,100,0);
    scene.add(light2);
    light3 = new THREE.PointLight(0xc4c4c4,10);
    light3.position.set(0,100,-500);
    scene.add(light3);
    light4 = new THREE.PointLight(0xc4c4c4,10);
    light4.position.set(-500,300,500);
    scene.add(light4);
    renderer = new THREE.WebGLRenderer({antialias:true});
    renderer.setSize(window.innerWidth,window.innerHeight);
    document.body.appendChild(renderer.domElement);
    let loader = new THREE.GLTFLoader();
    loader.load('scene.gltf', function(gltf){
      car = gltf.scene.children[0];
      car.scale.set(0.5,0.5,0.5);
      scene.add(gltf.scene);
      animate();
    });
  }
  function animate() {
    renderer.render(scene,camera);
    requestAnimationFrame(animate);
  }
  init();
</script>
</body>

Please help with respect to does my code should be optimized or my browsers!

Screenshot%20(16)|690x388

The following line does not make sense if your app has an active render loop:

controls.addEventListener('change', renderer);

It’s also recommended to create OrbitControls always with the second parameter:

const controls = new OrbitControls( camera, renderer.domElement );

And it’s also recommended to apply the pixel ratio to the renderer:

renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );

To sum up, the following code works fine for me:

import * as THREE from '../build/three.module.js';

import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';

let scene, camera, renderer;

function init() {

	scene = new THREE.Scene();
	scene.background = new THREE.Color( 0xdddddd );

	camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 5000 );
	camera.rotation.y = 45 / 180 * Math.PI;
	camera.position.x = 800;
	camera.position.y = 100;
	camera.position.z = 1000;

	const hlight = new THREE.AmbientLight( 0x404040, 100 );
	scene.add( hlight );

	const directionalLight = new THREE.DirectionalLight( 0xffffff, 100 );
	directionalLight.position.set( 0, 1, 0 );
	directionalLight.castShadow = true;
	scene.add( directionalLight );

	const light = new THREE.PointLight( 0xc4c4c4, 10 );
	light.position.set( 0, 300, 500 );
	scene.add( light );

	const light2 = new THREE.PointLight( 0xc4c4c4, 10 );
	light2.position.set( 500, 100, 0 );
	scene.add( light2 );

	const light3 = new THREE.PointLight( 0xc4c4c4, 10 );
	light3.position.set( 0, 100, - 500 );
	scene.add( light3 );

	const light4 = new THREE.PointLight( 0xc4c4c4, 10 );
	light4.position.set( - 500, 300, 500 );
	scene.add( light4 );

	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	const controls = new OrbitControls( camera, renderer.domElement );

	let loader = new GLTFLoader();
	loader.load( 'models/gltf/test/scene.gltf', function ( gltf ) {

		const car = gltf.scene.children[ 0 ];
		car.scale.set( 0.5, 0.5, 0.5 );
		scene.add( gltf.scene );
		animate();

	} );

}

function animate() {

	renderer.render( scene, camera );
	requestAnimationFrame( animate );

}

init();