Skip to content

Web 编辑器内容制作指南

写在前面:

  1. Web 编辑器制作的 GLTF 内容,适用于 ThreeJS 和 XRFrame 框架渲染,无法使用在易现自研渲染引擎
  2. AR 模型需要通过其他建模软件制作,例如:Blender 、Maya 等
  3. 制作完成的模型,需导出为 GLB、FBX、OBJ 等格式后在 Web 编辑器中导入。推荐 GLB 格式!
  4. 建议最终输出的内容资源包(GLTF、GLB)在 10MB 以内

一. 基本使用说明

常见使用功能包括:

1.创建简单模型和光源

2.导入和导出

3.编辑

4.平移旋转缩放

5.调整材质

6.切换编辑器语言

切换后刷新生效

二. 制作桌面级 6DoF 内容

平台直接在线编辑跳转 Web 编辑器

导入一个模型

样例模型:

RobotExpressive

Flamingo

Soldier

其他模型素材:

其他示例模型

增加一个光源

光源目前仅支持平行光(DirectionalLight)、点光源(PointLight) 因为导出 GLTF 时,会丢失其他光源 如需使用其他光源,可在实际接入时,在代码中添加。

调整模型大小方向

  1. 需要注意模型的位置,实际体验放置时,会以放置的位置为坐标原点
  2. 模型朝向 Z 轴正方向摆放,在小程序体验时,模型才会正确面对相机
  3. 可点击编辑器中右下角坐标轴上的 X Y Z,快速切换视角,方便移动模型

导出

导出 GLTF 或直接发布到平台(推荐)

三. 制作大场景 6DoF 内容

平台直接在线编辑跳转 Web 编辑器

导入用于锚定位置的点云或 Mesh

点击『文件 - 加载地图』,选择地图以及类型(点云或低模任意都可)

导入要摆放的模型

样例模型:

RobotExpressive

Flamingo

Soldier

其他模型素材:

其他示例模型

调整模型的大小与位置

  1. 调整模型大小,位置,摆放到实际场景中
  2. 可点击编辑器中右下角坐标轴上的 X Y Z,快速切换视角,方便移动模型到目标位置
  3. 注意摆放的过程中,切勿移动点云图层,或者 Mesh 图层,会导致锚定不准确

增加一个光源

光源目前仅支持平行光(DirectionalLight)、点光源(PointLight) 因为导出 GLTF 时,会丢失其他光源 如需使用其他光源,可在实际接入时,在代码中添加。

导出

导出 GLTF 或直接发布到平台(推荐)

四. 制作图片跟踪内容

平台直接在线编辑跳转 Web 编辑器

跳转后会自动在 0 点位置,放置配置的识别图

导入要摆放的模型

基于识别图的位置,摆放模型

样例模型:

RobotExpressive

Flamingo

Soldier

其他模型素材:

其他示例模型

增加一个光源

光源目前仅支持平行光(DirectionalLight)、点光源(PointLight) 因为导出 GLTF 时,会丢失其他光源 如需使用其他光源,可在实际接入时,在代码中添加。

导出

导出 GLTF 或直接发布到平台(推荐)

五. 制作环绕体验内容

平台直接在线编辑跳转 Web 编辑器

导入要摆放的模型

基于识别图的位置,摆放模型

样例模型:

RobotExpressive

Flamingo

Soldier

其他模型素材:

其他示例模型

增加一个光源

光源目前仅支持平行光(DirectionalLight)、点光源(PointLight) 因为导出 GLTF 时,会丢失其他光源 如需使用其他光源,可在实际接入时,在代码中添加。

调整模型位置

注意模型的位置,在 Z 为正时,会在环绕体验进入时的正前方

导出

导出 GLTF 或直接发布到平台(推荐)

常见问题

  1. 导入到内容编辑器的模型效果与建模软件中不一致 Web 编辑器与建模软件不是一样的渲染器,有着不一样的灯光环境,所以您需要在内容编辑器中为模型设置材质和灯光环境。
  2. 导入到内容编辑器的模型丢失了贴图 模型在转换的过程中存在丢失贴图的情况,你只需要在 Web 编辑器中进行材质调整赋予贴图即可。