首页 > 技术文章 > ThreeJs编辑器(Oss上传预览模型)

zzatp 2022-01-11 22:00 原文

1、准备好阿里云Oss

1、开通阿里Oss对象存储服务并创建一个bucket

访问官网开通并创建一个bucket
官网网址: https://www.aliyun.com/

2、创建阿里Oss的AccessKey Id和 AccessKey Secret

操作参考网址: https://help.aliyun.com/document_detail/144949.html

操作步骤

  • 以阿里云账号登录阿里云管理控制台
  • 将鼠标置于页面右上方的账号图标,单击AccessKey 管理

3、设置bucket为公共可读

image-20220111214318816

4、设置跨域允许

权限管理有个跨域设置点开设置

image-20220111214425594

点击设置,创建一个规则并设置规则参数后确认
image-20220111214539215

2、编辑器配置好Oss相关参数

除了项目名是自己定义外,其他参数都需要阿里云上获取不能乱填否则无法正确上传。

ID: 阿里云AccessKey Id

Secret: 阿里云AccessKey Secret

bucket: 阿里云Bucket名

项目名: 自定义无要求

region: 阿里控制台bucket概览查找(不需要后面.aliyuncs.com部分),如图
image-20220111214909306

image-20220111214027340

3、设置好后点击上传当前模型

点击上传当前模型后会自动将当前编辑的模型转成压缩格式fbmodel文件存放到工作目录下release文件夹下,然后把模型相关的贴图、动画推送到阿里Oss的Bucket里。

4、点击同步资源

因为工作目录有些公共资源文件夹,比如cubemaps、sysresources、userresources,点击同步资源会将本地资源推送到Oss服务器上

5、完成以上步骤后扫描二维码或者复制链接到浏览器打开即可在线查看当前编辑好的模型效果

例如:https://easyshow.xyz/viewFbModel/?ws=//fbmodels.oss-cn-shanghai.aliyuncs.com/viewFbScene/&model=models/robot/robot_Lod1.fbmodel&version=2

image-20220111215937173

推荐阅读