Noob problems with Troika-three-text

Hi Guys,
I’m very new here so apologies in advance for any dumb questions.
I’ve been tasked with getting a threejs page working in our web application. I’ve managed to get the basics working, light, camera, objects, pan, zoom - all good. My scene is likely to have a significant amount of text in it so I thought it might be a plan to use troika-three-text. I’ve got troika from npm but here’s where my issues start.
When I’m doing the imports from troika (or from three for that matter) visual studio 2019 gives me some intellisense/autocomplete suggestions for referencing troika. When I click on the suggestion it removes my “…/” and just replaces it with the troika file name. Problem then is, that when I run my app, it fails and says that the reference should start with “…/” or “./”.
So, I went through the troika files - troika-three-utils, troika-worker-utils etc, updating the paths so that the js files are found but now I’m getting a problem in bidi.js saying that “bidi.js does not provide an export named ‘default’”
I feel like I’ve done more messing around with it than I should have and have likely caused the problem myself but I’m a bit stuck as to what I should have done instead. The imports in troika just say “import … from ‘three’” which implies that I should have my project set up in such a way that it would find that.
I confess I’m very new to npm and the fact that it downloads many more files than I probably need is slightly confusing me as I’m not sure which ones I should actually be referencing.

Any guidance would be greatly appreciated.

Tbh I can’t imagine a scenation in which that’d be a good idea - modifying core packages by hand usually just leads to more and more errors. :see_no_evil:

The solution does depend on how you’ve set up your project. Do you use npm to manage packages? Do you use any bundler? Or you’re just concatenating all the files together?

It did feel wrong while I was doing it :roll_eyes: , but as I said, I didn’t know what I was supposed to do correctly.
I’ve used npm to install both three and troika and I have my own scene js file that I’m importing three and troika into. No I don’t use any bundler.


you can’t use npm without a bundler. there are many and they all do the same. try vite for instance. just type npm init vite and hit enter. that is all you need.

btw i’d not let visual studio 2019 anywhere near javascript. there’s visual studio code. editors do not “run” projects any longer. they merely edit. running, building, etc, that comes all from the build tool.

1 Like

OK, thanks, I’ll look into vite then.
Are you suggesting that what I’m trying to do - have a three js page inside a web app - is a bad idea? I don’t think I’ll be able to use VS Code at my place.

threejs runs on the web. this asp stuff is very old and i’m not sure how well it handles modern javascript and its eco system. but either way, even if you use VS2019, i’d just handle the building/bundling part out of it and it’ll be fine. check with your peers about VSC, it’s also made by microsoft so maybe they’re fine with it.

I think I’ll need to look into npm a bit more. I think that’s part of my problem. I haven’t got the right stuff set up at the start and I’m trying to fix it by treating the symptoms rather than resolving the problem.

Thanks for the pointers. I’ll be back no doubt! :stuck_out_tongue: