Vue展示3d模型

背景需求：公司系统后台，需要在页面上显示设计师传入的3d模型，并修改3d模型的参数（主要是对应的mtl中的材质图片）因目前项目是用vue-cli搭建的框架，对比了下网上的资料参考，最后选择了vue-3d-model。最后调研选用obj,mtl搭配的形式，但这个有个弊端，在模型特别大的时候会显示不出来或加载特别慢，最近也是正在考虑如何嵌入3dmax 暂时还没有好的方案执行？？？？难点问题：1.在引

baby_cheerup

9720人浏览 · 2021-10-27 17:00:48

baby_cheerup · 2021-10-27 17:00:48 发布

背景需求：公司系统后台，需要在页面上显示设计师传入的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的其他组件引用参考

vue-3d-model模型预览

github代码地址: https://github.com/hujiulong/vue-3d-model#props