解决npm安装three.js无法使用的问题

前端 潘老师 3个月前 (11-24) 336 ℃ (0) 扫码查看

本文主要讲解关于解决npm安装three.js无法使用的问题相关内容,让我们来一起学习下吧!

引言

在使用npm安装three.js之后,f12调试出现Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".的报错,在网上查阅了很多资料都没法解决,有很多就直接推荐使用CDN的方式,但是很讨厌。

解决方法

本机(node版本为20,有管理员权限)

开始在公司的电脑(没有管理员权限),然后使用失败,后面回家用自己的电脑,有管理员权限还是会报这个问题,之后对于three进行了降版本安装,然后就解决了。
在公司电脑没管理员权限,试了一下降版本还是失败的,但是直接引用three可以在插件里(import cost)看见大小(说明能引入成功,在家里电脑之前也是引入成功但没法用)

公司(node版本为14,申请了管理员权限)

import { WebGLRenderer } from "../../../node_modules/three/build/three.module.js";

之前在网上看见过这种方式,然后在本机上是无效的,之前在这里也是无效,但是把node卸了重新装且在管理员模式下,成功了,可能和步骤有关系,下面列出操作步骤。

  1. 执行npm初始化npm init -y
  2. 安装three包,我选择的0.149.0版本npm install --save three@0.149.0
  3. 选择上述方式,直接引用node_modules里的路径

这种情况下,使用插件的时候,仍然会出现three的报错,这时候需要去插件中去把three替换成../../../build/three.module.js就可以正常使用了

小结

目前判断可能需要管理员权限?之前公司的没有管理员还是出问题,说实话还是不足以判定问题的产生条件,只能给出这两种解决方案。
虽然解决了,但感觉还是没有从根本上解决为什么three的这个引用是无效的,问朋友说什么打包工具啥的关系,叫我用框架说不定就解决了,还没有去尝试,如果前面这两种都碰到问题的朋友可以尝试去试下这种方法。

以上就是关于解决npm安装three.js无法使用的问题相关的全部内容,希望对你有帮助。欢迎持续关注潘子夜个人博客(www.panziye.com),学习愉快哦!


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/front/11816.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】