.glb model is not displaying on browser

Questions
,
1

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>
<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.

2

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

3

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.

4

thanks, now its working :slightly_smiling_face:

2 Likes