1. render-mode

此示例演示如何使用显示样式自定义 3d 视口的外观

1.1.1. 目的

此示例的目的是演示以下内容：

从预先构建的样式中读取并将它们应用到视口。

创建自定义样式的资源。

1.1.2. 描述

要设置显示样式，请调用 viewport.overrideDisplayStyle 并将其传递给 DisplayStyleSettingsProps。 在此示例中，DisplayStyle3DSettingsProps 用于提供更多选项。此外还建议以json格式保存和加载样式。预览地址

功能：

• 切换预先设定的渲染模式。
• 使用“与自定义合并”切换来应用自定义样式和指定样式。

1.1.3. 实现过程

style样式示例：

{
  name: "Sun-dappled",
  environment: {
    sky: defaultSkyBox,
    ground: { display: false },
  },
  viewflags: { ...renderingStyleViewFlags, shadows: true },
  solarShadows: { color: 0x524f44 },
  lights: {
    solar: { direction: [0.9391245716329828, 0.10165764029437066, -0.3281931795832247] },
    hemisphere: { intensity: 0.2 },
    portrait: { intensity: 0 },
  },
}

    // 定义DisplayStylesApp
  export default class DisplayStylesApp {
      /** Overrides the current display styles using the viewport API. */
    public static applyDisplayStyle(viewport: Viewport, style: DisplayStyle3dSettingsProps) {
      viewport.overrideDisplayStyle(style);
      }
  }

  // 切换渲染模式时修改相应样式
  const init = useCallback((viewport: Viewport) => {
    if (viewport) {
      let style = displayStyles[activePresetIndex];
      DisplayStylesApp.applyDisplayStyle(viewport, style);

      if (mergeState) {
        style = displayStyles[CUSTOM_STYLE_INDEX];
        DisplayStylesApp.applyDisplayStyle(viewport, style);
      }
    }
  }, [activePresetIndex, mergeState]);

  // 初始化渲染模式
  useEffect(() => {
    const viewport = IModelApp.viewManager.selectedView;
    if (viewport){
      init(viewport);
    } else {
      IModelApp.viewManager.onViewOpen.addOnce(init);
    }
  }, [init]);