Hi Team!
I am just starting out and use vsCode as my editor. I am a seasoned C# programmer however first time using three.js.
I would like to know how I can get intellisense working correctly for my project. I am not using node.js or anything fancy - just a simple site with an index.html loading in the js scripts via the tags.
I’d love to poke around in the objects more via intellisense so I can experiement!
Thankyou!
Nathan.
Do you mean intellisense for three.js specifically? This was previously asked here:
Hi!
That’s great! It got me most of the way there 
I still have problems with using global variables not using intellisense, even though it can see it is of a type.
Global Type
No Intellisense
Local Variable
Even the help with using typings is enough to poke around, but would love the full experience I’m probably spoiled with 
Thanks for the link!
Excuse me, my native language is Spanish, I would really appreciate it if you make a video showing the procedure so that intellicence works in VScode with Three.Js
So, is everyone coding blindly in VSCode without any THREE.js autocompletion / code hinting / intellisence when using THREE ES6 modules? (I do, the last 2 weeks, and it’s not pretty).
I have posted a question on stackoverflow but I’m not getting any answers.
Should I ditch VSCode for another free IDE, or should I revert to a much older version?
Or should I take it for granted that THREE.js autocompletion support doesn’t exist?
Should I use Rollup or eq. during development in order to have this kind of autocompletion support (just guessing)? Currently I’m using modules without any such utility.
Should I abandon ES6 modules altogether …and go back in time?
So many questions…
So many questions…
…zero answers.
Threejs has recently thrown out all its types, without that the IDE has a hard time figuring out intellisense. They’re community managed now and you have to install them additionally: npm install @types/three --save-dev. After that it should work.
Thanks, but I have tried this many times in all kinds of different ways and conditions, and it doesn’t work at all in my case.
How do you handle modules, do you use rollup or other module bundler?
I am not using any yet, and (for the time being) I’ve just added paths on a couple of loaders inside node_modules/three/jsm/ to make them work.
eg I changed:
} from ‘three’;
to:
} from ‘…/…/…/build/three.module.js’;
If that makes any difference at all.
This has never worked for me, even after considerable fiddling with configs. @drcmda does it work for you in .js files for just .tsx?
We should make an optional type definitions file that declares a THREE global in case people don’t use the esm and load three using a script tag instead. That should solve this issue.
The type definitions work fine, but AFAIK only if you import three modules yourself and use things like rollup to make your own compiled bundle. It’s just missing a global declaration that causes IDE’s to get confused I think.
This has never worked for me, even after considerable fiddling with configs. @drcmda does it work for you in .js files for just .tsx?
It works in plain js files. There is nothing that you should have to do. I mean, intellisense is like the most basic feature ever, it would be weird if VSC couldn’t do that.
How do you handle modules, do you use rollup or other module bundler? I am not using any yet, and (for the time being)
I would suggest to always use bundlers in web dev, anything that knows what a package.json is. Vite, Parcel, Webpack, it does not matter.
Script tags do not work, it’s an incomplete draft spec. Allows you to import a local file, but you can’t use npm, anything that has dependencies w/o hacking paths or import-maps, which is yet another incomplete draft. The IDE is clueless in regards to the hacks and workarounds that people go through in order to somehow pressure this broken spec into functioning, it just switches off into a dead text editor.
Try Vite, it uses the current ESM spec underneath but avoids the pitfalls
npm init @vitejs/app test
cd test
npm install three @types/three
npm run dev
Thanks, that convinced me that it 's because I’m not using a bundler…
…and so my adventure begins:
I tried to install Vite that you suggested, and npm reported 5 vulnerabilities, of which 3 of high importance and it was unable to ‘fix’ them, so I was told that I should …remove them manually (remove what?)
Also, intellisense started to work, but only partially, as it was providing only a fraction of the available information.
I downloaded a rollup example where it fully worked.
So, Vite ended abandoned and uninstalled.
Next, I tried to install rollup.
Surprisingly, I got the following messages:
So, a module bundler cannot resolve …module dependencies by itself! Is this a joke or what?
I looked at the rollup example and saw that it is ‘mandatory’ to install a ‘name resolver’ plugin via npm.
So I did, and midwise, I was asked to …login to git as a mandatory step!
Since I don’t want to ask for permissions or be tracked, rollup ended abandoned and uninstalled too.
Next, I decided to try the first (possibly) bundler of the gang: webpack.
So I was happy to see that their webpage was well designed and user friendly, with step-by-step instructions.
At some point though, I was told that I had to install an external library, lodash.
So neither webpack can do the job it claims to do by itself, and even worse, it was embedding that library on the final code including a MIT license line, even though I used --save-dev when I installed lodash.
Do I want more external dependencies in my proprietary code? Nope. So, webpack ended where it deserved along with the rest: on the recycle bin.
…to be continued, more episodes in the land of sloppiness, quasi-freedom and industrial tracking/spying. 
you don’t need anything else. rollup is usually only used if you want to publish a library. i don’t know about vulnerabilities, i guess my npm and node are up to date, bc i don’t seem to get any:
i guess update node (?). use whatever bundler you want. enjoy. 
Two more episodes this week of In The Land of Sloppiness, as promised:
#1. After your last post, I gave Vite another try. First, I tried to update node.js and I got this nice message:
I have Win7 x64 and I’m not willing to spend a week upgrading to Windows 10 150GBs of program installations and adjustments -not now, so I tried to find the latest node.js version that my OS supports by trial-and-error, downloading and attempting to run each version (I couldn’t find that info in release text).
Then, I tried to install and run Vite once more. After a tsunami of different errors and different attempts, the issue sums up to the following error:
)
#2. Long story short, I found redemption in esbuild, a rather new bundler.
For anyone interested, here is the (tested) procedure:
Make and name a new folder, then open it.
Ctrl + right-click, select “Open command window here” and type + enter:
npm init
npm install three
npm install --save @types/three
(optionally, install other libraries/packages you might need)
npm install esbuild
Open package.json and make sure “main” points to your source javascript file eg:
"main": "script.js",
(comma including)
Bellow “scripts” in package.json add the following line:
"build": "esbuild ./script.js --bundle --minify --sourcemap --outfile=out.js",
Also bellow “license” add:
"private":true,
to avoid accidental publishment (as has been suggested by others).
Copy/create in this folder your html file and point the script tag to the output build name you entered in project.json without referring to module type, like so:
<script src="out.js" defer></script>
You can put it either inside the <head> or <body> element
“defer” is optional and is used to call the script after HTML has fully loaded.
make a bat file named “BUILD.bat” with the following:
npm run build
Copy/create in this folder your source javascript file. Open it and make sure you point to THREE.js module like so:
import * as THREE from "three";
Note: do NOT include the full path, if you do, it will affect intellisense! (insane, but true).
The difference will be this:
vs this:
For extra modules, include them like so:
import { GLTFLoader } from './node_modules/three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from './node_modules/three/examples/jsm/loaders/DRACOLoader.js';
Pros:
a) I don’t have to hack the paths anymore in order for an ES6-modules based web-page to work on the browser (as esbuild bundles it and converts it to a non-module output script).
b) Intellisense works properly.
Cons:
a) I have to remember double-clicking the BUILD.bat file every time before testing on the browser.
b) I’ve seen some error reports pointing to the packed output file instead of the source (which doesn’t help), but I was using PaleMoon, so I’m not sure yet if Chrome will behave the same.
More info: esbuild - Getting Started
nice, im glad that it worked out for you! windows 7 though, no node, bat files, that sounds like a proper nightmare. i would recommend going windows 10 at some point, clicking bat files to see updates is still sticks and stones. windows got a lot better at this stuff later.
Thank you, I’ll definitely upgrade to Win 10 in a few months, although there is nothing in that version that I specifically appreciate (or in any other), I have to do this when I’ll be ready to upgrade to a completely new custom PC to avoid doing it twice.
BTW, the requirement for a completely new OS in order for node.js to work is laughable at best. It’s like having to upgrade to a new car in order for the radio to work!
I need Windows 10 mostly for app testing, otherwise I would migrate to Mac OS without thinking more than 1 microsecond. I have an ancient 17" G4 Mac laptop (2004 model still alive… partially) that completes a file search instantly. Windows on the other hand, have invented the non-linear progress bar to camouflage their extremely slow, dinosaur-slow search, and they’re using it for decades.
I bet it’s still the same in Windows 10 -they literally don’t know what “indexing” means and despite they use the term, they physically search the disk file-by-file (there is no other explanation)!
Of course today they can partially hide such extreme-sloppiness under the SSD carpet and an order of magnitude more powerful hardware in general. That’s the most representing example of Windows ridiculousness that can’t be justified by any excuses.
Now, I’m not a Mac guy, I only have this laptop, and due to some events, I’m stuck in Windows for decades, but I’ve seen both, so I know what I’m talking about. I don’t want to start a Mac-Win flame war or anything, I think we aren’t wondering kids here, to fall in that trap.
Back ontopic:
I’ll try to completely automate the required task(s) and report back.
Meanwhile, here’s a speed-comparison -albeit speed in not everything, of course:
BTW, the requirement for a completely new OS in order for node.js to work is laughable at best
well, you’re probably the one developer on this earthball in that situation. microsoft added a linux subsystem to windows in later versions, that helps a lot, especially with node. esbuild is great otherwise. vite is also just esbuild internally, all it does is solve the surroundings (hot reload etc). anyway, quite the journey for some auto complete. 
well, you’re probably the one developer on this earthball in that situation
Yeah, all the other developers don’t have any problems, because they have upgraded to Windows 10! 
@dllb, as for manually running your build batch file, try adding the “–watch” argument to esbuild. It will automatically rebuild the output file when it detects changes in source files. See release notes about it here: esbuild/CHANGELOG.md at 922a9fcb8a4590d015af824281d6c7218cd60eb2 · evanw/esbuild · GitHub
@Harold thanks, that’s a significant usability upgrade! After I saw your post I was wondering how it would poll for changes, as it has to run on the background somehow, but obviously it didn’t.
I updated esbuild and when I run build once more, the console stayed on, and it entered a watch-mode (that’s how), so it did work.
I was planning to use the Ctrl+S shortcut that we use to save the code after we make changes, to trigger the build.bat. I had tried to assign it via the Windows Task Manager but there is a bug in Windows and after a while it stopped working. So I had to find a macro utility for that, but this native support is even better, thanks again.
