# .glb model is not displaying on browser

**URL:** <https://discourse.threejs.org/t/glb-model-is-not-displaying-on-browser/42924>\
**Category:** Questions\
**Tags:** gltf-loader, loaders\
**Created:** [September 26, 2022, 8:43am UTC](https://discourse.threejs.org/t/glb-model-is-not-displaying-on-browser/42924 "2022-09-26T08:43:13Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Deepak\_Singh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/deepak_singh/32/29804_2.png) [@Deepak\_Singh](https://discourse.threejs.org/u/Deepak_Singh)\
**Post date:** [September 26, 2022, 8:43am UTC](https://discourse.threejs.org/t/glb-model-is-not-displaying-on-browser/42924/1 "2022-09-26T08:43:13Z")

</div>

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.

```javascript
<!DOCTYPE html>
<html>
	<head>
		
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
        <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>
        
        <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 );
        } );
            
  </script>
       
        
	</body>
</html>

```

glb file is opining in glb viewer.

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [September 26, 2022, 9:30am UTC](https://discourse.threejs.org/t/glb-model-is-not-displaying-on-browser/42924/2 "2022-09-26T09:30:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [September 26, 2022, 10:35am UTC](https://discourse.threejs.org/t/glb-model-is-not-displaying-on-browser/42924/3 "2022-09-26T10:35:58Z")

</div>

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](https://vitejs.dev/). i honestly don’t know why threejs makes it so hard for beginners, sending people through script tags is just mean.

---

<div class="post-metadata">

**Author:** ![Deepak\_Singh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/deepak_singh/32/29804_2.png) [@Deepak\_Singh](https://discourse.threejs.org/u/Deepak_Singh)\
**Post date:** [September 26, 2022, 10:57am UTC](https://discourse.threejs.org/t/glb-model-is-not-displaying-on-browser/42924/4 "2022-09-26T10:57:42Z")

</div>

thanks, now its working 🙂
