筑坐极_uni-app 3D模型 360°全景展示流程

一．准备工作

1.在目录下pages中新建一个vue文件

2.在浏览器搜索（https://ext.dcloud.net.cn/plugin?id=11589）网址

3.下载插件并导入

uni-app 3D模型 360°全景展示流程

4．选择要导入的项目，然后确认。

uni-app 3D模型 360°全景展示流程

5.uni_modules中查看，如果出现了要插入的插件，就表示导入成功。

uni-app 3D模型 360°全景展示流程

6.复制代码（文档下方有示例代码，全部带走即可）粘贴到事先准备好的文件中。

7.粘贴完之后，试运行以下，可能会报错

uni-app 3D模型 360°全景展示流程

之所以报错是因为我们没有引入three.js

8. 安装three.js 右键项目名选择使用命令行窗口打开所在目录输入 npm i three ，出现下行代码就表示引入成功。

9.效果示例也可以更换其他的3D模型注意3D模型文件格式为 GLTF

（https://glbxz.com/）3D模型网站

uni-app 3D模型 360°全景展示流程

到此插件引入成功

二．更换背景图

1 首先注意查看背景图的文件格式，以防出错。格式为 hdr 文件

uni-app 3D模型 360°全景展示流程

2在浏览器查看hdr 格式的图片是什么（hdr 是贴图的后缀名）

3 并查找更多的背景图

https://tietu.3d66.com/tietu/_1_3779-3783.html 这是我事先找好的hdr 贴图网站网址

uni-app 3D模型 360°全景展示流程

保存到本地即可

4把保存好的贴图素材放到项目中存放图片的文件夹里。可以统一放在一个专门的目录中（goods）方便管理目录名字无所谓

uni-app 3D模型 360°全景展示流程

5替换原来的背景图注意路径不要写少或写错了

uni-app 3D模型 360°全景展示流程

uni-app 3D模型 360°全景展示流程

王*

uni-app c-3D-model three.js vue3

uni-app引入3D模型展示插件的流程和需要注意的问题以及如何更换展示背景图

2023.08.16

1127人

王*

河南省信阳市淮滨县

Hot:2773

一．准备工作

1.在目录下pages中新建一个vue文件

2.在浏览器搜索（https://ext.dcloud.net.cn/plugin?id=11589）网址

4．选择要导入的项目，然后确认。

5.uni_modules中查看，如果出现了要插入的插件，就表示导入成功。

6.复制代码（文档下方有示例代码，全部带走即可）粘贴到事先准备好的文件中。

7.粘贴完之后，试运行以下，可能会报错

之所以报错是因为我们没有引入three.js

9.效果示例也可以更换其他的3D模型注意3D模型文件格式为 GLTF

二．更换背景图

1 首先注意查看背景图的文件格式，以防出错。格式为 hdr 文件

2在浏览器查看hdr 格式的图片是什么（hdr 是贴图的后缀名）

https://tietu.3d66.com/tietu/_1_3779-3783.html 这是我事先找好的hdr 贴图网站网址

保存到本地即可

4把保存好的贴图素材放到项目中存放图片的文件夹里。可以统一放在一个专门的目录中（goods）方便管理目录名字无所谓

5替换原来的背景图注意路径不要写少或写错了

效果就不展示了，更换背景图到这里就完成了。

王*

4.9分

接近满分, 继续加油, 模型灯光如果能切换,会更具美魅力!

uni-app 3D模型 360°全景展示流程

王*

uni-app c-3D-model three.js vue3

uni-app引入3D模型展示 插件的流程和需要注意的问题 以及如何更换展示背景图

2023.08.16

1127人

王*

河南省信阳市淮滨县

Hot:2773

一．准备工作

1.在目录下pages中新建一个vue文件

2.在浏览器搜索 （https://ext.dcloud.net.cn/plugin?id=11589）网址

4．选择要导入的项目，然后确认。

5.uni_modules中查看，如果出现了要插入的插件，就表示导入成功。

6.复制代码 （文档下方有示例代码，全部带走即可）粘贴到事先准备好的文件中。

7.粘贴完之后，试运行以下，可能会报错

之所以报错是因为我们没有引入three.js

9.效果示例 也可以更换其他的3D模型 注意3D模型文件格式为 GLTF

二．更换背景图

1 首先注意查看背景图的文件格式 ， 以防出错。格式为 hdr 文件

2在浏览器查看hdr 格式的图片是什么 （hdr 是贴图的后缀名）

https://tietu.3d66.com/tietu/_1_3779-3783.html 这是我事先找好的hdr 贴图网站 网址

保存到本地即可

4把保存好的贴图素材放到项目中存放图片的文件夹里。 可以统一放在一个专门的目录中（goods）方便管理 目录名字无所谓

5替换原来的背景图 注意路径不要写少或写错了

效果就不展示了 ，更换背景图到这里就完成了。

王*

4.9分

接近满分, 继续加油, 模型灯光如果能切换,会更具美魅力!

uni-app引入3D模型展示插件的流程和需要注意的问题以及如何更换展示背景图

2.在浏览器搜索（https://ext.dcloud.net.cn/plugin?id=11589）网址

6.复制代码（文档下方有示例代码，全部带走即可）粘贴到事先准备好的文件中。

9.效果示例也可以更换其他的3D模型注意3D模型文件格式为 GLTF

1 首先注意查看背景图的文件格式，以防出错。格式为 hdr 文件

2在浏览器查看hdr 格式的图片是什么（hdr 是贴图的后缀名）

https://tietu.3d66.com/tietu/_1_3779-3783.html 这是我事先找好的hdr 贴图网站网址

4把保存好的贴图素材放到项目中存放图片的文件夹里。可以统一放在一个专门的目录中（goods）方便管理目录名字无所谓

5替换原来的背景图注意路径不要写少或写错了

效果就不展示了，更换背景图到这里就完成了。