Yryskul Turduev
Yryskul Turduev

Reputation: 307

How to properly import THREE js library?

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?

Upvotes: 3

Views: 3467

Answers (2)

rustyBucketBay
rustyBucketBay

Reputation: 4561

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.

Upvotes: 0

Taurz
Taurz

Reputation: 390

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

Upvotes: 2

Related Questions