分享关于Vue项目中使用Three.js的一些坑

作者:蓉华教育

2022-09-05

1922次阅读

最近发现好几个招聘岗位要求需要THREE的经验,就想着把它捡起来重新在Vue项目中写写。在学习的过程中遇到了一些坑,今天拿出来跟大家分享一些!

image.png

1.OrbitControls轨道控制器

正常在three的包里面就有了:

three/examples/js/controls/目录下,但是直接导入的时候是会报错的

1662370836371309.png

这是因为这个文件是没有模块化包装的,在node环境下是直接加载不到THREE构造函数的,所有需要在这个文件的最上面加上。

import * as THREE from 'three'

Vue项目中使用Three.js

2.关于图片加载问题

这里面坑不算多,正常情况下我们一般会把图片放到src目录assets里面,在使用

var loader = new THREE.TextureLoader(); loader加载的时候第一个参数的url不能直接存放相对路径/绝对路径。如下:

1662370873582778.png

你需要把../../assets/0011.jpg使用require("../../assets/0011.jpg")来加载。原因是webpack在编译打包过程中,将会把src下的所有引用的资源当做模块进行处理。脚手架默认会将图片直接打包到输出项目目录下的/img文件夹中,为了防止命名冲突,还为每张图片重命名。最后将源代码中的src路径进行了篡改。所有直接使用字符串路径加载图片是不行的,还有一个办法就是放到public目录下,使用/开头的绝对路径访问。

3.关于OBJ和MTL文件的加载问题

这个问题更坑,吸取了之前加载图片的问题,我直接把OBJ和MTL为文件放到public目录下,如下:

image.png

在代码中使用

Vue项目中使用Three.js

发现资源能加载,但是mtl文件的对应的贴图怎么都加载不进来,就是上面的目录的几个JPG文件,不应该啊!后面发现它在load直接使用了一个setPath函数去加载路径,后面才找到知道通过这个函数可以告诉mtl文件去哪里寻找对应的叠图资源换成下面代码就好了!如下:

1662370924702607.png

后续的关于这块内容分享,蓉妹儿会持续更新,一起加油学习!THREE没那么难入门,小伙伴们坚持学下去,肯定是会收获慢慢的!

上一篇:一个IT技术岗位几十个人竞争,怎样才能让自己脱颖而出

下一篇:Web前端技术分享:为什么Laravel和Vue.JS是Web开发的完美结合

IT培训机构蓉华教育值得关注

关注我们

IT培训学校联系方式

微信客服

联系我们

电话:

17358526576

微信:

rhjy-it

QQ:

1811900057

成都校区:

成都市武侯区孵化园9号楼A座2楼

西安校区:

西安市经开区凤城九路海博广场B座

深圳校区:

深圳市福田区彩田南路深圳青年大厦

蓉华教育 - 靠谱的IT培训机构 | 友情链接:学历提升

版权所有 © 成都蓉华软创科技有限公司 2024  (蜀ICP备20007585号-2)

联系蓉华

成都校区:成都市武侯区孵化园9号楼A座2楼

西安校区:西安市经开区凤城九路海博广场B座

深圳校区:深圳市福田区彩田南路深圳青年大厦

IT培训学校联系方式

rhjy-it

IT培训班联系方式

1811900057

版权所有 © 成都蓉华软创科技有限公司 2024

(蜀ICP备20007585号-2)