如何正确导入THREE js库?

Question

我通过npm安装了three库。在node_modules目录下有一个three文件夹。但是当我想用:

导入它时

import * as THREE from 'three';

给出如下错误:

ReferenceError: regeneratorRuntime is not defined

但是当我使用;

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

可以正常工作。同样，在导入外部插件时也会出现同样的问题:

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

我该如何解决这个问题?

Answer 1

Three.js使用ES6 async/await，你需要升级或配置你的babel预设来支持async/await。这可能会有帮助Babel 6 regeneratorRuntime没有定义

Answer 2

确保您引用了三个元素的正确路径。模块。我会尝试以下脚本在rootForlder/src/theScriptWhereYourImportIs.js:

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

如果脚本与node_modules文件夹处于相同的层次结构级别，则以下操作应该可以工作:

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

就我所记得的，我不得不做一些试验并弄清楚这一点，因为它在文档中不是很清楚。欢迎大家提出宝贵意见。