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.
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.
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
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.