背景需求:公司系统后台,需要在页面上显示设计师传入的3d模型,并修改3d模型的参数(主要是对应的mtl中的材质图片) 因目前项目是用vue-cli搭建的框架,对比了下网上的资料参考,最后选择了vue-3d-model。
最后调研选用obj,mtl搭配的形式,但这个有个弊端,在模型特别大的时候会显示不出来或加载特别慢,最近也是正在考虑如何嵌入3dmax 暂时还没有好的方案执行????
难点问题:
1.在引用3d模型,默认情况下,3d模型整体视觉效果暗淡无光,而且光度照不到的地方(底部和背面)是完全黑的,最终效果是一半黑,一半亮,
2.因为设计师给提供的mtl中map_Ka、map_Kd中引用的材质图片,是属于本地的绝对路径,这里要把这两个值更改为获取网络上的图片地址。 那么问题就出来了,部署到正式环境,mtl中的网络图片地址会报跨域问题
使用:
首先安装vue-3d-model依赖:
npm install vue-3d-model --save-dev
在项目中使用:
/** 模型在服务器端,直接引 */
<model-obj
:lights="lights" src="https://welcove.co/of/1.obj" mtl="https://welcove.co/of/1.mtl"
> </model-obj>
/** 模型在项目内vue3中存放在public下 */
<model-obj ref="model"
:lights="lights"
src="model/1.obj" mtl="model/1.mtl"> </model-obj>
注意:
如果是vue2,把文件放到static下,路径写:/static/……
如果是vue3,把文件放到public下,路径写:public/....
解决第一个问题:
这里需要两个相对的光源,否则只能照亮一面
lights: [{
type: 'HemisphereLight',
position: { x: 0, y: 1, z: 0 },
skyColor: 0xffffff,
// groundColor: 0xFF0000, // 此代码为灯光后颜色
intensity: 1,
},
{
type: 'DirectionalLight',
position: {x: 1, y: 1, z: 1},
color: 0xffffff,
intensity: .8,
}]
<model-obj ref="model"
:lights="lights"
src="model/new1.obj" mtl="model/new1.mtl"> </model-obj>
解决第二个问题:
添加 crossOrigin="anonymous" 并在mtl文件中引入的材质图片加上时间戳
<model-obj
:lights="lights"
src="model/new1.obj" mtl="model/new1.mtl"
crossOrigin="anonymous"
>
</model-obj>
// 材质图片是读取出来的,代码如图
mtlContentTxt = mtlContentTxt + 'newmtl ' + key + '\r\n\t'
for (let item in materialsJson[key]) {
if (item === 'map_Ka' || item === 'map_Kd') {
let val = materialsJson[key][item] + '?t=' + moment(new Date()).unix()
mtlContentTxt = mtlContentTxt + item + ' ' + val + '\r\n\t'
} else {
mtlContentTxt = mtlContentTxt + materialsJson[key][item] + '\r\n\t'
}
}
最终mtl贴图效果
完美解决~~
真的有必要参考的文档:
1.threejs 解决问题1时,就是参考这个js给我的灵感,瞬间找到了方向了,找到对应参考资料完美解决,vue-3d-model的底层是three.js这个下面是webgl所以有机会一定要学学底层真心有用。贴上three的中文参考地址:Three.js电子书《Three.js零基础入门教程》_郭隆邦
2.vue-3d-model的其他组件引用参考
github代码地址: https://github.com/hujiulong/vue-3d-model#props