module - How to import entire three.js core library?

Question

I don't know why my import statement import * as THREE from 'three' does not work: the html file opens to a blank screen.

Steps I have taken so far are:

I've npm install --save three

Somehow my code works if I link the js explicitly using <script src='file path'></style?? but the import gives a blank page for some reason. What am I doing wrong?

Screenshot:

Also, what are the files under three/examples are they demo examples?

Thank you!!

question from:https://stackoverflow.com/questions/66052548/how-to-import-entire-three-js-core-library

Answer 1

You can't use bare imports in websites. I suggest you replace the import statement with this:

import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';

For learning or tinkering using CDN URLs is totally fine. If you want to develop a real application, I recommend to work with a node workflow instead. Meaning you define your dependencies and project setup with npm and use a bundler for a build. Check out the following minimal project setup example using the ES6 modules of three.js.

https://github.com/Mugen87/three-jsm