How to properly import THREE js library?

Question

I installed the three library via npm. In the node_modules directory there is the three folder. But when I wanted to import it using:

import * as THREE from 'three';

it gives the following error:

ReferenceError: regeneratorRuntime is not defined

But when I use;

import * as THREE from 'three/build/three.cjs';

it properly works. Also, the same problem occurs while importing external plugins:

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

How can I fix this?

score 2 · Accepted Answer · answered May 18 '22 at 08:38

2

Three.js uses ES6 async/await, you need to upgrade or configure your babel presets to support async/await. This may help Babel 6 regeneratorRuntime is not defined

answered May 18 '22 at 08:38

Taurz

325
1
5

Thanks, I used this answer, it fixed: https://stackoverflow.com/a/65759820/8110756 – Yryskul Turduev May 18 '22 at 13:13

score 0 · Answer 2 · edited May 23 '22 at 19:10

0

Make sure that you reference the correct path where your three.module is. I'd try the following for a script being in the rootForlder/src/theScriptWhereYourImportIs.js:

import * as THREE from '../node_modules/three/build/three.module.js';

If the script is at the same hierarchy level as your node_modules folder then the following should work:

import * as THREE from './node_modules/three/build/three.module.js';

As far as I remember I had to make some trials and figure this out as it was not very clear in the documentation. Any insight will be welcomed.

edited May 23 '22 at 19:10

RobC

20,007
20
62
73

answered May 18 '22 at 12:22

rustyBucketBay

3,807
1
11
32

Thanks, this fixed: https://stackoverflow.com/a/65759820/8110756 – Yryskul Turduev May 18 '22 at 13:13

How to properly import THREE js library?

2 Answers2