import - 如何导入整个three.js核心库？

Question

我不知道为什么我的导入语句import * as THREE from 'three'不起作用：html 文件打开到一个空白屏幕。

到目前为止我采取的步骤是：

我有npm install --save three

如果我使用显式链接 js，<script src='file path'></style??但由于某种原因，导入会给出一个空白页，我的代码会以某种方式工作。我究竟做错了什么？

截屏：

另外，three/examples它们是演示示例下的文件是什么？

谢谢！！

标签： importmodulethree.js

Answer 1

您不能在网站中使用裸导入。我建议你用这个替换 import 语句：

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.125.2/build/three.module.js';

使用 CDN URL 进行学习或修改是完全可以的。如果您想开发一个真正的应用程序，我建议您改用节点工作流。这意味着您使用捆绑器定义依赖项和项目设置，npm并使用捆绑器进行构建。查看以下使用 ES6 模块的最小项目设置示例three.js。

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