Import command not working

import { GLTFLoader } from 'https://three/examples/jsm/loaders/GLTFLoader.js';

added this like in the docs , before the init() call , while declaring the variables and it gives me an error
Uncaught SyntaxError: Cannot use import statement outside a module


Your script tag has to look like so when you use import statements in a HTML page:

<script type="module">

Thanks Michael


<script type="module" src="code.js">

import {GLTFLoader} from 'https://three/examples/jsm/loaders/GLTFLoader.js'; 
function init(){

const loader = new GLTFLoader();

loader.load( 'drive:/gtlf_Objects/gltfObj.glb', function ( gltf ) {

  scene.add( gltf.scene );

}, undefined, function ( error ) {

  console.error( error );

} );

the glb file exists as well ,
does not seem to work , not giving any error messages either

Maybe the beginner’s example of the Collection of examples from will help you?

BeginnerExample :slightly_smiling_face:

I don’t think this URL is valid. Try it with HTTP(S). Also see:

Thanks Klaus ,

will have a browse through

Hi Michael,

i am running this on the live server in vs code , would it not pick up the folder location where the the .glb file is ?

looks like there is nothing wrong in here , and i am running it on live server with vs code, as described in the docs , i am clearly missing something,

js code…,

import { GLTFLoader } from ‘https://three/examples/jsm/loaders/GLTFLoader.js’;

let scene, camera, renderer;

function init() {

scene = new THREE.Scene();

const fov = 75;

const near = 1;

const far = 1000;

camera = new THREE.PerspectiveCamera(fov,window.innerWidth/window.innerHeight,near,far);

camera.position.set(0, 0, 1);  

renderer = new THREE.WebGLRenderer({antialias:true});

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


const loader = new GLTFLoader();

loader.load( 'path/to/glbfile', function ( gltf ) {

scene.add( gltf.scene );

}, undefined, function ( error ) {

console.error( error );

} );



const animate = function () {


renderer.render( scene, camera );



html code…


    <meta charset="utf-8">

    <title>My first three.js app</title>


        body { margin: 0;   width: 100vw;

                height: 100vh;

                margin: 0;

                overflow: hidden;

                display: flex;

                justify-content: center;

                align-items: center;}





    <script src=""></script>

    <script type="module" src="testgltf.js"></script>


Hi Klaus, i am unable to look at the code for any of these examples provided,
is there a page with code enabled for these examples ?

You just have to use the command for viewing the code in the browser, in Windows e.g. Ctrl + U

Thanks Klaus,

ok have finally figured the loader part working (blood, sweat and tears) ,

couple of things found out that the version of the three installed are not backward compatible,
and if you had used release 121 earlier ,its not backward compatible,
so from stackoverflow found this answer , using required ,

and secondly this is how i got it working and i pretty sure , the import method works fine,
i removed the import method and just added

and const gltfLoader = new THREE.GLTFLoader();

and worked fine go the glb file in Three

for anyone stuck like i was , here is the link