Skip to main content

三维组件

三维组件包括三维空间容器、三维模型、三维数据卡片、三维组件组组件及三维几何体，实现3D场景的应用。

三维空间容器​

用于配置三维模型的容器，三维模型需要放置到三维空间容器内才能生效，组件属性配置如图所示:
三维空间容器配置项
配置属性说明

  1. 场景
  • 背景颜色：一种设置效果，例如背景颜色我们设置为蓝色；
    背景颜色
  • 背景贴图：有全景贴图和立方体贴图，全景贴图直接上传全景图片，立方体贴图需分别对应位置上传图片；
  • 地平面：点击启用地平面模式，材质可选基础、非光泽、变化、高光、物理、卡通，设置地面宽度、高度及颜色；
    tip

    注：只有在地面材质为高光、物理、卡通时，启动阴影才有效果；

  • 雾：启用场景/雾模式，设置雾的颜色及最小距离和最大距离;
  1. 相机：
  • 视野角度：控制相机的视野范围，通常以度数表示，例如 60 度；
  • 近端面距离：设置相机能够看到的最近物体的距离；
  • 远端面距离：设置相机能够看到的最远物体的距离；
  • 初始位置：定义相机的起始位置在场景中的坐标位置；
  • 初始方向：指定相机的初始观察方向或朝向的坐标位置；
  1. 控制器
  • 类别：指定控制器的类型，目前支持轨道控制器；
  • 轨道控制器：控制相机移动轨道;
    轨道控制器配置1轨道控制器配置2
    • 启用：开启控制相机移动轨道
    • 旋转：按住鼠标左键进行旋转;
    • 旋转速度：设置相机旋转的速度；
    • 水平角度上下限：设置相机水平旋转角度的上下限，取值范围为 -Π 到 Π，默认为无限制;
    • 垂直角度上下限：设置相机垂直旋转角度的上下限，取值范围为 0 到 Π，上限默认为 Π，下限默认为 0;
    • 平移：按住鼠标右键进行平移;
    • 平移速度：设置相机平移的速度；
    • 缩放：点击是，利用鼠标滚轮进行缩放;
    • 缩放速度：设置相机缩放的速度；
    • 缩放距离上限：设置相机缩放的最大距离；
    • 缩放距离下限：设置相机缩放的最小距离；
    • 阻尼：给控制器带来重量感，使相机移动更平滑;
    • 阻尼因子：数值越大，阻力越大，取值范围0~1；
    • 自动旋转：自动控制相机进行旋转；
    • 自动旋转速度：设置自动旋转的速度。
  1. 快照
  • 快照：用于动态切换相机位置;
  • 快照变量：绑定一个变量，改变此变量时，可切换相机视角，变量值为某个快照名称或空;
  • 快照工具：开启后，在三维空间容器下方显示快照工具栏，用于存放和管理快照列表，用户可以通过点击快照工具栏中的快照按钮来快速切换相机视角；
  • 快照列表：显示已保存的快照列表，包括快照名称和相机坐标位置信息。
    • 可通过三维空间容器左上角 保存相机坐标中【创建快照】进行快速创建快照，并存储在快照列表中； 创建快照
    • 可点击添加快照按钮创建快照 创建快照
  1. 环境
  • 类型：选择不同环境会呈现出不同的效果。
  1. 渲染：
  • 色彩空间：设置用于控制渲染过程中色彩处理的属性，包括Linear、sRGB。
  1. 灯光
  • 环境光：设置环境中的全局光照效果；
  • 平行光：模拟远处无限远的光源，通常用于模拟太阳光等；
  • 半球光：模拟天空的光照效果，通常用于增强场景的整体光照；
  • 点光：模拟光源从一个点向所有方向辐射，如灯泡等；
  • 聚光灯：模拟具有方向性的光源，通常用于突出特定区域或对象；
  • 灯光设置：灯光设置包括环境光、平行光、半球光、点光和聚光灯设置。
  1. 后期效果
  • 辉光：添加辉光效果，呈现出发光的效果。
  1. 辅助
  • 坐标格：显示场景中的网格，用于帮助定位和测量；
  • 坐标轴：显示场景中的坐标轴，用于指示场景的方向。
  1. 加载中样式
  • 图片：若加载中的默认样式，不符合要求，可自己定义图片作为加载中的样式，
  • 图片宽度：指定加载中图片的宽度；
  • 图片高度：指定加载中图片的高度；
  • 背景色：设置加载中的背景色，

三维模型​

三维模型需要放到三维空间中使用，用于上传三维模型文件，可上传多个模型文件;
三维模型配置项

  1. 组件属性：
  • 模型文件：支持导入模型格式：.obj/.glb/.gltf/.fbx；模型文件支持绑定，格式需包含下图中红框内容。 三维模型配置项
  • 定时刷新：开启后，三维模型将根据时间定时刷新，一般适用于三维模型文件是绑定获取的，当变量发生变化时，通过定时刷新更新模型，单位是秒, 不填表示不刷新。
  1. 模型树： 显示：开启后，显示模型的层次机构，默认关闭。
    显示上传的三维模型的层次结构，包括模型的各个部件、子对象或者节点。 点击模型树的顶节点时，下方设置属性针对整个模型生效；点击模型树子节点时，下方设置的属性针对对应字节点生效。 通过模型树，用户可以方便地管理和调整三维模型的不同部分，实现对整体模型和各个部件的精确控制和编辑。
  2. 基础配置：
  • 显示：是否显示模型文件；
  • 透明度：设置模型的透明度；
  • 颜色：调整模型的颜色；
  • 缩放比例：调整模型的缩放比例,，正数有效，默认为1；
  • 位置坐标：设置模型在场景中的位置坐标；
  • 旋转角度：调整模型的旋转角度,取值范围-360到360。
  1. 材质列表
  • 材质列表：为模型配置材质，按照材质渲染模型； 三维模型展示
  1. 整体配置
  • 线框：设置模型的线宽颜色；
  • 悬停高亮：设置鼠标悬浮到三维模型上方时，模型高亮颜色设置；
  • 过渡效果：缩放、位置、旋转变化时的过渡效果，只有预览时生效；
  • 模型动画：模型文件中自带的动画一般为骨骼动画，不可修改；
  • 自定义动画：可以额外自定义的动画类型，包括缩放、位置、坐标。动画为播放属性，并不改变模型本身的属性参数；

三维数据卡片​

可实现三维数据卡片展示的作用。 三维数据卡片效果图

三维数据卡片属性配置

  1. 朝向屏幕：开启后，当单位旋转三维空间组件时，三维数据卡片始终朝向屏幕；
  2. 固定大小：开启后，当缩放三维空间组件时，三维数据卡片大小固定，不变化；
  3. 缩放比例：同三维模型属性说明；
  4. 位置坐标：同三维模型属性说明；
  5. 旋转角度：同三维模型属性说明；
  6. 卡片宽度：设置三维数据卡片的宽度；
  7. 线宽度：设置三维数据卡片的线宽度；
  8. 线高度：设置三维数据卡片的线高度；
    三维数据卡片属性配置
  9. 每行项数：定义卡片中一行展示几项数据；
  10. 数据项：卡片中显示数据设置，点击输入标签名和标签值，标签名可绑定变量。通过鼠标选中数据项拖拽移动顺序
    三维数据卡片属性配置

三维组件组​

可在三维容器中加入平台的信息作展示，三维组件组同组件组组件，可放置其他组件。 三维组件组效果图
三维组件组属性配置

  1. 容器宽度：设置三维组件组的宽度；
  2. 容器高度：设置三维组件组的高度；
  3. 朝向屏幕：同三维数据卡片属性说明；
  4. 固定大小：同三维数据卡片属性说明；
  5. 缩放比例：同三维模型属性说明；
  6. 位置坐标：同三维模型属性说明；
  7. 旋转角度：同三维模型属性说明；
  8. 数据：绑定数据；
  9. 数据表：选择数据表，则三维组件组可获取数据表对应的数据；
  10. 表记录：选择表记录，则三维组件组可获取表记录对应的数据；

材质库​

当组件选择三维空间容器、三维模型、三维几何体时，左侧操作区域的第三个tap为材质库。材质库下，可创建文件夹来组织和管理材质列表，在文件夹下创建材质，可用于三维模型的材质渲染。
三维材质库

新建文件夹​

创建文件夹，管理材质列表，文件夹下可继续创建文件夹，层级以此递减；
创建文件夹

新建材质​

创建材质，用于三维模型或者三维体材质渲染。
创建材质

  1. 基础
  • 名称：填写材质的名称，名称创建后不可修改；
  • 类型：设置材质的类型，包括pbr、phong、points、shader，类型创建后不可修改；
  • 所属文件夹：选择材质的所属文件夹，默认创建材质时的文件夹。
  • 裁剪方式：设置裁剪方式，包括正面、反面。
  1. UV
  • 贴图旋转：调整贴图的方向
  • 贴图倍数：设置贴图在 U 轴和 V 轴上的重复倍数，用于控制贴图的缩放效果；
  • 贴图偏移：设置贴图在 U 轴和 V 轴上的偏移量，以调整贴图的位置；
  • 贴图锚点：设置贴图的锚点位置，影响贴图的对齐方式；
  1. 漫反射
  • 颜色：设置漫反射颜色，影响材质的基本颜色。
  • 贴图：选择用于漫反射的贴图，增加材质的细节。
  1. 光泽度(当类型选择phong时的联动属性)
  • 光泽度：调整材质表面的光滑程度和反光效果。值的范围通常在 0 到 100 之间，其中 0 表示完全无光泽（哑光），100 表示高光泽（全反射）。
  1. 高光(当类型选择phong时的联动属性)
  • 颜色：设置高光的颜色，影响光源在材质表面产生的亮点颜色.
  • 贴图：选择用于控制材质表面高光效果的贴图。
  1. AO
  • 强度：设置 AO 效果的强度，增强材质的阴影效果。
  • 贴图：选择用于 AO 的贴图，提供细节阴影。
  • UV集：设置用于 AO 贴图的 UV 集，以控制贴图的映射方式。
  1. 法线
  • 贴图：选择用于法线的贴图，增加材质的表面细节。
  • 强度：设置法线贴图的强度，控制法线效果的显著程度。
  • Y轴翻转：设置是否翻转法线贴图的 Y 轴，以适应不同的贴图格式。
  1. 自发光
  • 颜色：设置自发光颜色，使材质在没有光照时仍然发光。
  • 贴图：选择用于自发光的贴图，提供发光细节。
  • 强度：设置自发光的强度，控制发光效果的显著程度。
  1. 透明度
  • 透明测试：设置是否启用透明测试，以控制材质的透明度。
  • 透明：设置材质的透明度值，控制材质的透明效果。
  • 贴图：选择用于透明度的贴图，提供透明细节。
  1. 光照贴图
  • 强度：设置光照贴图的强度，控制光照效果的显著程度。
  • 贴图：选择用于光照的贴图，提供光照细节。
  1. HDR
  • 模式：设置 HDR 模式，包括不同的渲染模式，以增强材质的动态范围和细节。
    • 相乘： 说明：该模式将 HDR 贴图的颜色值与材质的基本颜色相乘，增强整体亮度和对比度。 应用场景：适用于需要增加亮度和对比度的场景，例如金属材质或高光泽表面。
    • 混合： 说明：该模式将 HDR 贴图的颜色值与材质的基本颜色进行线性混合，生成更平滑和自然的光照效果。 应用场景：适用于需要柔和光照效果的场景，例如皮革、织物等非金属材质。
    • 叠加： 说明：该模式将 HDR 贴图的颜色值叠加到材质的基本颜色上，产生更强烈和戏剧化的光照效果。 应用场景：适用于需要强调光照效果的场景，例如灯光效果或特殊效果材质。
  1. 粒子(当类型选择points时的联动属性)
  • 尺寸：设置粒子的初始尺寸，影响粒子在三维空间中的显示大小。
  • 尺寸衰减：设置粒子尺寸随相机深度而衰减的效果，使粒子在远处看起来更小。
  • 受雾影响：设置粒子是否受到场景雾效果的影响。
  1. 着色器(当类型选择shader时的联动属性)
  • 着色器代码：编写和输入用于自定义材质效果的着色器代码。
  • 帧脚本：设置每帧执行的脚本，用于更新和控制着色器效果的动态变化。

应用材质​

三维模型/三维几何体 右侧基本属性配置中材质配置可选择材质列表 创建文件夹

tip

材质可通过拖拽调整所属文件夹，但移动材质会导致原有材质失效，需要手动对应用该材质的模型替换移动后的材质，请谨慎操作。