.glb model is not displaying on browser

I’m using three.js for the first time. From the documentation I wrote the following code, code is not showing any error but model is not displaying on browser, please suggest me what I’m doing wrong.

<!DOCTYPE html>
		<title>My first three.js app</title>
			body { margin: 0; }
        <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

        <script type="importmap">
            "imports": {
              "three": "https://unpkg.com/three@0.140.0/build/three.module.js"
        <script type="module">
          import * as THREE from 'three';
          const scene = new THREE.Scene();
          import { GLTFLoader } from 'https://unpkg.com/three@0.140.0/examples/jsm/loaders/GLTFLoader.js';
            const loader = new GLTFLoader();

            loader.load('images/tesla.glb', function ( gltf ) {

	        scene.add( gltf.scene );

            }, undefined, function ( error ) {

	        console.error( error );
        } );

glb file is opining in glb viewer.

Is this your entire code? You’ll need to use a camera, add a renderer and render the scene to see the model

it looks odd. so that’s using import maps to resolve “three” but then you still use an online cdn for the loader … why?

i would suggest you do not mess with script imports and import maps. these are fragile, unfinished specs. web dev and npm (javascripts eco system) function entirely through bundling. i would quickly read up on how to use a bundler, for instance vite. i honestly don’t know why threejs makes it so hard for beginners, sending people through script tags is just mean.

thanks, now its working :slightly_smiling_face: