vue+threejs加载展示3d模型文件注意事项

前几天了解到了threejs这个库,一时间惊为天人,因为想做一个展示3d零件模型的demo,就尝试了一下,在此记录一下踩的坑

首先,一定要看文档!可以看郭大佬的中文教程http://www.yanhuangxueyuan.com/Three.js/

千万不要把希望寄托在随便找到的野博客(我开始就是想图省事拿来人家的用,明明看着一摸一样,可就是各种奇葩报错,都快疯了),一句话 博客可以拿来参考,主要还是看文档。官方也有提供各类文件,测试的时候可以直接拿来用,最起码得保证模型文件没有问题。

接下来几个我能想到得几个问题:

1.要注意模型文件要放在静态路径下

有遇到文件无论是相对路径还是绝对路径引用都会报错的情况
在这里插入图片描述解决:
如果是vue2,把文件放到static下,路径写:/static/……
如果是vue3,把文件放到public下,路径写:public/……

2.加载器加载出来的图形是黑色,设置了颜色也是

可能是你没有添加光源

lightInit(){
   
    //点光源
    var point = new THREE
  • 3
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
VueThree.js是两个热门的Web开发框架和库,分别用于构建用户界面和创建3D场景。结合使用VueThree.js可以非常方便地搭建一个3D仓房。 首先,在Vue项目中安装并引入Three.js库。可以使用npm或者直接在HTML中引入CDN链接。然后,使用Vue的组件化开发思想,创建一个3D仓房组件。 在Vue3D仓房组件中,可以使用Three.js的场景(Scene)、相机(Camera)、渲染器(Renderer)等基本元素来创建一个空白的3D场景。可以设定相机的位置和方向,调整渲染器的大小和样式。 接下来,可以使用Three.js提供的几何体(Geometry)和材质(Material)来创建具体的仓房模型。例如,可以使用BoxGeometry创建一个长方体模型,然后使用MeshBasicMaterial设置其颜色或者使用纹理材质来进行贴。 在几何体和材质创建好之后,可以将其合并成一个网格(Mesh),并添加到场景中。 为了使3D场景更加生动,可以使用Three.js的灯光(Light)来设置光照效果。例如,太阳光照射到仓房模型上,可以使用光源和颜色来模拟阳光的效果。 最后,在Vue3D仓房组件中添加交互功能,例如旋转、缩放或者平移等,可以使用Three.js提供的控制器(Controller)或者自定义事件监听器来实现。 在Vue项目中的相应页面引入3D仓房组件,并传入相应的参数,即可在浏览器中看到搭建好的3D仓房场景。 总之,使用VueThree.js搭建3D仓房的过程大致如上所述,需要使用Vue的组件化开发和Three.js的渲染和建模功能来实现。这样可以充分利用两个框架和库的优势,简化开发流程,创建出生动逼真的3D仓房场景。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值