Three.js: TGA Loader missing from npm module

[mpaccione]

I am needing to put a skybox together with TGA files. I am using the module from npm for Three.js but there is no TGA Loader included. I checked the nodule_modules/three/src/loaders and it isn't there.

I went to rewrite it by comparing to other files. I was able to understand enough to convert the .js TGALoader from the non npm THREE files... however there is a .d.ts file needed I believe. At that point I am slightly beyond my certainty of being able to implement.

Please can you update the npm package with it. I am sure it would be very fast for the almighty creator xD

[Mugen87]

The module version of TGALoader is already available on dev. With the next release R105 this week you can also import from the npm package.

[mpaccione]

Great!

I've upgraded to 105.1 and have tried:
new THREE.TGALoader()

but receive the not a constructor error.

I am using browserfy as a bundler with commonJS require modules. I had found a GLTFLoader as an npm package which was super helpful.

const GLTFLoader = require('three-gltf-loader');

Couldn't find one for the TGALoader().
Not sure if I'm missing something or if I should just find a tga to jpg converter.

[Mugen87]

Please try to import TGALoader like described in the following guide (section Importable Examples).

https://threejs.org/docs/index.html#manual/en/introduction/Import-via-modules

[mpaccione]

These are the ways I've tried to import the loader:

const TGALoader = require('./src/node_modules/three/examples/loaders/TGALoader');
const TGALoader = require('three/examples/loaders/TGALoader');

import { TGALoader } from './src/nodule_modules/three/examples/loaders/TGALoader';
import { TGALoader } from 'three/examples/loaders/TGALoader';

For reference, I am importing Three like so:
const THREE = require('three');

[mrdoob]

Does this work?

import { TGALoader } from 'three/examples/jsm/loaders/TGALoader';

[mpaccione]

Woops, looks like I missed the js subdirectory above.

import { TGALoader } from 'three/examples/js/loaders/TGALoader';
import { TGALoader } from 'three/examples/jsm/loaders/TGALoader';

Results in...
Error: Parsing file C:\wamp64\www\flight_sim\app.js: 'import' and 'export' may appear only with 'sourceType: module' (9:0)

I'm not sure browserfy supports import syntax so I've been using requires instead. However if I use a require like...

const TGALoader = require('three/examples/js/loaders/TGALoader');

Then I get...
bundle.js:65323 Uncaught ReferenceError: THREE is not defined

I had tried intitially to make my own class by ripping the loader and then importing all the needed classes in the loader. I had run into an issue with the FileLoader giving me an error when I had tried to do that.

I'm on Chrome and am using Browserfy.

[mrdoob]

Sorry. Better to move this to the forum.

[Mugen87]

three/examples/js/loaders/TGALoader

This path can't work since you have to target the JSM directory (as stated in the docs...).

'import' and 'export' may appear only with 'sourceType: module

This is a pure JS issue and not related to three.js. Google it and you find many existing answer on stackoverflow. As mentioned by @mrdoob , please use the forum ot stackoverflow if you need more help.

[mpaccione]

Ah yes I see the jsm directory. I have tried both.

import { TGALoader } from 'three/examples/jsm/TGALoader.js'; const tgaLoader = new TGALoader();

Produces this error

Error: Parsing file C:\wamp64\www\flight_sim\app.js: 'import' and 'export' may appear only with 'sourceType: module' (8:0)

I believe it's an issue with my bundler browserfy only supporting require commonjs and not import syntax. That is my assumption so far.

In any case I converted my TGA textures to JPG and used the standard loader instead. Thanks for your patience and support.

Three.js is my favorite Javascript library. Thank you very much for developing and maintaining it :)

[bpetar]

Man said try this:
import { TGALoader } from 'three/examples/jsm/loaders/TGALoader';

You have extra '.js' at the end, so maybe that is problem..

[Mugen87]

No, the .js extension is actually correct.