Import command not working

Questions
,
1 
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

Thanks

2

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

<script type="module">
3

Thanks Michael

4

have

<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

5

Maybe the beginner’s example of the Collection of examples from discourse.threejs.org will help you?

BeginnerExample :slightly_smiling_face:

6

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

https://threejs.org/docs/index.html#manual/en/introduction/How-to-run-things-locally

7

Thanks Klaus ,

will have a browse through

8

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 ?

9

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);

document.body.appendChild(renderer.domElement);

const loader = new GLTFLoader();

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

scene.add( gltf.scene );

}, undefined, function ( error ) {

console.error( error );

} );

animate();

}

const animate = function () {

requestAnimationFrame(animate);

renderer.render( scene, camera );

};

init();

html code…

<head>

    <meta charset="utf-8">

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

    <style>

        body { margin: 0;   width: 100vw;

                height: 100vh;

                margin: 0;

                overflow: hidden;

                display: flex;

                justify-content: center;

                align-items: center;}

    </style>

</head>

<body>

    

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>

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

</body>
10

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 ?

11

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

12

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,
ex: https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.min.js
and if you had used release 121 earlier ,its not backward compatible, https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js
so from stackoverflow found this answer ,
https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js 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

Thanks