npm 安装的three.js怎么引入

Question

我希望在vue的一个组件中使用three.js，npm install后，import three from 'three' 报错啊，提示default export is not declared in imported module，这种情况是three.js的问题吗？有没有什么解决方法？谢谢！

Answer 1

default export is not declared in imported module 说明 three.js 没有默认的导出对象。可以这样引入需要的对象：

import {
  Scene,
  WebGLRenderer,
  PerspectiveCamera,
  BoxGeometry,
  MeshBasicMaterial,
  Mesh
} from 'three';

Answer 2

如果要用 ES6 的模块系统，应该写成 import * as three from 'three';

Answer 3

看样子好像是不支持ES6的导入方式，可以使用CommonJS的形式引入var three = require('three');

Answer 4

po主最后是怎么引入的 自答一下谢谢

感谢楼主回答我的问题。
我原来之前也导入成功了，但是提示错误我还以为是我引入的问题，于是我按照您的引入方式导入之后发现也是提示同样的错误。

请问po主有遇到过这样的错误吗？

Answer 5

官网上的例子没有export，
在canvasRenderer.JS中export container，然后组件引入进来使用即可

Answer 6

我想说一下我碰到的解决办法；

import THREE from 'three-js'

这么写就没问题了

Answer 7

和版本有关系，有的版本支持：

import * as three from 'three';

而有的版本，就只能：

var three = require('three');

在console里面，输入 THREE.REVISION ，可以查看 Three.js的版本。（<script>方式导入的情况下）

另外，可以通过在 import之前debugger，来查看这个模块的变量，是否有引入。