Using examples from the three js homepage

Dear Community,

I am quite new to Three JS and Java Script in general - this is why my question could seem a little stupid to you and I want to apologize for that. I really like this example on the three.js homepage (three.js examples) and want to try it out myself in Visual Studio Code. So I went to GitHub and looked in to the code. I know that I have to change the path in my code to import the three js libary files (for exp: Orbitcontrols, stats.module etc) but some parts of the code still not work for me. For exp.: the importmaps function doesnt work. I screenshoted my code here:

After 2 hours of trying to find a solution - I have the feeling that its not possible to use these example of the homepage. I would really appreciate if someone could explain it to me.

Best regards


The definition of the import map looks good. However, the actual import of THREE has to look different. It should be:

import * as THREE from 'three';

You can use the bare module specifier three because it has been defined via the import map.

Also keep in mind that copying module files around is not necessarily recommended. This workflow comes from a time when JavaScript had no module support. So developers just downloaded third-party files and had to manage dependencies by themselves.

For beginners who just want to hack around with three.js I recommend to use URLs from a CDN like in this fiddle. It’s important to target a single CDN and not import three modules from different sources.

The more scalable and production-ready approach is to work with the npm package of three.js and a bundler. It requires some basic knowledge of node.js, npm and the bundler itself but this is something that you need as a web dev in any event. A basic three project setup with rollup looks like so.