2021-11-02 关于前端项目import模块报错 Relative references must start with either “/“, “./“, or “../“

接了同事一个关于three加载模型渲染展示的活,因为模型包含很多模型,故需要在模型上添加鼠标选中效果,并可以显示弹窗.去年秋天接触过一段时间.但也仅限于加载模型, 贴纹理,飞镜头的简单功能.今年再拾起来相对于从头研究来说,稍微快那么一点.不废话了...

正文:

我这边在hbuilder新建了一个普通web空项目,新建了一个index,就开始搞渲染模型了. 因为功能需要由鼠标选中物体添加光效的动态效果和标签显示模型信息,所以模型选中光效我参考了下面卡片里的代码.https://wow.techbrood.com/fiddle/56603https://wow.techbrood.com/fiddle/56603

 关于选中出标签显示信息呢, 我参考了一下博文.https://blog.youkuaiyun.com/ithanmang/article/details/80897888https://blog.youkuaiyun.com/ithanmang/article/details/80897888

 完事了之后,交付给同事,被告知项目部署环境没有网络.好吧,那就把引入的js全部拉到本地.修改成相对路径

想法很简单,直接cnpm install three 把threejs拉到本地后,将build文件夹和example文件夹复制到项目中.于是就出现了标题中的报错信息.如下图.

 奇了怪了,这路径明明可以找到对应的文件啊. 本来就半路搞的前端.随后就开始咨询前端朋友.告知大概率是路径的问题.于是呢,我就   ../     ./    本地绝对路径,访问绝对路径试了个遍.. 太惨了....报错信息也就在上图和下图之间切换..心态崩了. 

 就各种百度. 说的也都不在重点上...最后的最后,一个和错误不相干的博客给了提醒.https://blog.youkuaiyun.com/silence907/article/details/119563028https://blog.youkuaiyun.com/silence907/article/details/119563028

 于是就cnpm uninstall three ,然后重新制定版本下了一个最新版本号减10的版本.替换buid和example文件夹后,玛德..真的就加载出来模型了. 但又报另一个不太重要的错误. 无关紧要的就不贴图了. 但鼠标点击物体边框加光效和标签不能用了. 后来查看上面给的例子的import 路径的源码.发现实用的是110版本.将版本下载下来替换后....大吉大利,今晚吃鸡....