# problem to loader 3D model

**URL:** <https://discourse.threejs.org/t/problem-to-loader-3d-model/50776>\
**Category:** Questions\
**Tags:** gltf-loader, loaders, geometry\
**Created:** [April 24, 2023, 8:47am UTC](https://discourse.threejs.org/t/problem-to-loader-3d-model/50776 "2023-04-24T08:47:56Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jdhe0609](https://avatars.discourse-cdn.com/v4/letter/j/9dc877/32.png) [@jdhe0609](https://discourse.threejs.org/u/jdhe0609)\
**Post date:** [April 24, 2023, 8:47am UTC](https://discourse.threejs.org/t/problem-to-loader-3d-model/50776/1 "2023-04-24T08:47:57Z")

</div>

Hello I try to resolve the follow exercise about 3D car model (GLTF). I created the html index but this didin´t run.  
I considered introduce the OrbitControls.js and GLTFLoader.js. I apreciated any help.

```javascript
DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8 />
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    <script src="three.min.js"></script>
    <script src="GLTFLoader.js"></script>
    <script src="OrbitControls.js"></script>
    <script>
      let scene, camera, renderer;

      function init() {

        scene = new THREE.Scene();
        scene.background = new THREE.Color(0xdddddd);

        camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000);
        camera.rotation.y = 45/180*Math.PI;
        camera.position.x = 800;
        camera.position.y = 100;
        camera.position.z = 1000;

        controls = new THREE.OrbitControls(camera);
        controls.addEventListener('change', renderer);

        hlight = new THREE.AmbientLight (0x404040,100);
        scene.add(hlight);

        directionalLight = new THREE.DirectionalLight(0xffffff,100);
        directionalLight.position.set(0,1,0);
        directionalLight.castShadow = true;
        scene.add(directionalLight);
        light = new THREE.PointLight(0xc4c4c4,10);
        light.position.set(0,300,500);
        scene.add(light);
        light2 = new THREE.PointLight(0xc4c4c4,10);
        light2.position.set(500,100,0);
        scene.add(light2);
        light3 = new THREE.PointLight(0xc4c4c4,10);
        light3.position.set(0,100,-500);
        scene.add(light3);
        light4 = new THREE.PointLight(0xc4c4c4,10);
        light4.position.set(-500,300,500);
        scene.add(light4);

        renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild(renderer.domElement);

        let loader = new THREE.GLTFLoader();
        loader.load('scene.gltf', function(gltf){
          car = gltf.scene.children[0];
          car.scale.set(0.5,0.5,0.5);
          scene.add(gltf.scene);
          animate();
        });
      }
      function animate() {
        renderer.render(scene,camera);
        requestAnimationFrame(animate);
      }
      init();
    </script>
  </body>
</html>

```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [April 24, 2023, 9:12am UTC](https://discourse.threejs.org/t/problem-to-loader-3d-model/50776/2 "2023-04-24T09:12:43Z")

</div>

> [@jdhe0609](#):
>
> but this didin´t run.

Do you mind explaining in more detail what this means? Do you see any warnings or error messages in the browser console? Also please share `scene.gltf` in this topic.

---

<div class="post-metadata">

**Author:** ![jdhe0609](https://avatars.discourse-cdn.com/v4/letter/j/9dc877/32.png) [@jdhe0609](https://discourse.threejs.org/u/jdhe0609)\
**Post date:** [April 24, 2023, 11:04pm UTC](https://discourse.threejs.org/t/problem-to-loader-3d-model/50776/3 "2023-04-24T23:04:07Z")

</div>

I am new to programming, I am a 3D modeler and I was trying to import a 3D model in GLTF or GLB format to open it in the browser, but I am having problems using NODE and PARCEL (I saw it in a Youtube tutorial)  
[untitled.glb](https://discourse.threejs.org/uploads/short-url/oBeOv9ZeqCYQPOxI1m81KTeaiS8.glb) (4.9 MB)

---

<div class="post-metadata">

**Author:** ![jdhe0609](https://avatars.discourse-cdn.com/v4/letter/j/9dc877/32.png) [@jdhe0609](https://discourse.threejs.org/u/jdhe0609)\
**Post date:** [April 24, 2023, 11:05pm UTC](https://discourse.threejs.org/t/problem-to-loader-3d-model/50776/4 "2023-04-24T23:05:56Z")

</div>

The error that appears when installing the Node and the Parcel is the following:

PS C:\Users\USUARIO\Desktop\Three ejercicios\4 Import Model\> npm install  
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: [Array.prototype.sort() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility)  
npm WARN cleanup Failed to remove some directories [  
npm WARN cleanup [  
npm WARN cleanup ‘C:\Users\USUARIO\Desktop\Three ejercicios\4 Import Model\node\_modules\@parcel\core\node\_modules’,  
npm WARN cleanup [Error: EBUSY: resource busy or locked, rmdir ‘C:\Users\USUARIO\Desktop\Three ejercicios\4 Import Model\node\_modules@parcel\core\node\_modules\lmdb’] {  
npm WARN cleanup errno: -4082,  
npm WARN cleanup code: ‘EBUSY’,  
npm WARN cleanup syscall: ‘rmdir’,  
npm WARN cleanup path: ‘C:\Users\USUARIO\Desktop\Three ejercicios\4 Import Model\node\_modules\@parcel\core\node\_modules\lmdb’  
npm WARN cleanup }  
npm WARN cleanup ]  
npm WARN cleanup ]  
npm ERR! code 1  
npm ERR! path C:\Users\USUARIO\Desktop\Three ejercicios\4 Import Model\node\_modules\lmdb  
npm ERR! command failed  
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node-gyp-build  
npm ERR! gyp info it worked if it ends with ok  
npm ERR! gyp info using node-gyp@9.3.1  
npm ERR! gyp info using node@18.16.0 | win32 | x64  
npm ERR! gyp info find Python using Python version 3.11.3 found at “C:\Python311\python.exe”  
npm ERR! gyp ERR! find VS  
npm ERR! gyp ERR! find VS msvs\_version not set from command line or npm config  
npm ERR! gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt  
npm ERR! gyp ERR! find VS checking VS2019 (16.11.33529.622) found at:  
npm ERR! gyp ERR! find VS “C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools”  
npm ERR! gyp ERR! find VS - found “Visual Studio C++ core features”  
npm ERR! gyp ERR! find VS - found VC++ toolset: v142  
npm ERR! gyp ERR! find VS - missing any Windows SDK  
npm ERR! gyp ERR! find VS could not find a version of Visual Studio 2017 or newer to use  
npm ERR! gyp ERR! find VS looking for Visual Studio 2015  
npm ERR! gyp ERR! find VS - not found  
npm ERR! gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8  
npm ERR! gyp ERR! find VS  
npm ERR! gyp ERR! find VS \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*  
npm ERR! gyp ERR! find VS You need to install the latest version of Visual Studio  
npm ERR! gyp ERR! find VS including the “Desktop development with C++” workload.  
npm ERR! gyp ERR! find VS For more information consult the documentation at:  
npm ERR! gyp ERR! find VS [GitHub - nodejs/node-gyp: Node.js native addon build tool](https://github.com/nodejs/node-gyp#on-windows)  
npm ERR! gyp ERR! find VS \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*  
npm ERR! gyp ERR! find VS  
npm ERR! gyp ERR! configure error  
npm ERR! gyp ERR! stack Error: Could not find any Visual Studio installation to use  
npm ERR! gyp ERR! stack at VisualStudioFinder.fail (C:\Program Files\nodejs\node\_modules\npm\node\_modules\node-gyp\lib\find-visualstudio.js:122:47)  
npm ERR! gyp ERR! stack at C:\Program Files\nodejs\node\_modules\npm\node\_modules\node-gyp\lib\find-visualstudio.js:75:16  
npm ERR! gyp ERR! stack at VisualStudioFinder.findVisualStudio2013 (C:\Program Files\nodejs\node\_modules\npm\node\_modules\node-gyp\lib\find-visualstudio.js:369:14)  
npm ERR! gyp ERR! stack at C:\Program Files\nodejs\node\_modules\npm\node\_modules\node-gyp\lib\find-visualstudio.js:71:14  
npm ERR! gyp ERR! stack at C:\Program Files\nodejs\node\_modules\npm\node\_modules\node-gyp\lib\find-visualstudio.js:390:16  
npm ERR! gyp ERR! stack at C:\Program Files\nodejs\node\_modules\npm\node\_modules\node-gyp\lib\util.js:54:7  
npm ERR! gyp ERR! stack at C:\Program Files\nodejs\node\_modules\npm\node\_modules\node-gyp\lib\util.js:33:16  
npm ERR! gyp ERR! stack at ChildProcess.exithandler (node:child\_process:427:5)  
npm ERR! gyp ERR! stack at maybeClose (node:internal/child\_process:1091:16)  
npm ERR! gyp ERR! System Windows\_NT 10.0.19044  
npm ERR! gyp ERR! command “C:\Program Files\nodejs\node.exe” “C:\Program Files\nodejs\node\_modules\npm\node\_modules\node-gyp\bin\node-gyp.js” “rebuild”  
npm ERR! gyp ERR! cwd C:\Users\USUARIO\Desktop\Three ejercicios\4 Import Model\node\_modules\lmdb  
npm ERR! gyp ERR! node -v v18.16.0  
npm ERR! gyp ERR! node-gyp -v v9.3.1  
npm ERR! gyp ERR! not ok

npm ERR! A complete log of this run can be found in:  
npm ERR! C:\Users\USUARIO\AppData\Local\npm-cache\_logs\2023-04-24T21\_28\_29\_369Z-debug-0.log  
PS C:\Users\USUARIO\Desktop\Three ejercicios\4 Import Model\> npx parcel src/index.html  
Need to install the following packages:  
parcel@2.8.3  
Ok to proceed? (y)

- History restored

npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: [Array.prototype.sort() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility)

added 192 packages, and audited 193 packages in 3m

80 packages are looking for funding  
run `npm fund` for details

1 high severity vulnerability

To address all issues, run:  
npm audit fix

Run `npm audit` for details.  
PS C:\Users\USUARIO\Desktop\Three ejercicios\4 Import Model\>

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [April 25, 2023, 10:46am UTC](https://discourse.threejs.org/t/problem-to-loader-3d-model/50776/5 "2023-04-25T10:46:17Z")

</div>

Sorry, I’m not familiar with Parcel and can’t help here.

---

<div class="post-metadata">

**Author:** ![RaphaelGusmao96](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/raphaelgusmao96/32/35729_2.png) [@RaphaelGusmao96](https://discourse.threejs.org/u/RaphaelGusmao96)\
**Post date:** [April 26, 2023, 1:17pm UTC](https://discourse.threejs.org/t/problem-to-loader-3d-model/50776/6 "2023-04-26T13:17:25Z")

</div>

not used more this format:

```
<script src="GLTFLoader.js"></script>
<script src="OrbitControls.js"></script>

```

implement only this file script main.js, ex:

next import libary, ex: import \* as THREE from ‘three’;