babylon-view-react

A React-wrapper for babylon-view. It wraps the SingleProductView.

You use it like this:

<BabylonView
    applicationAreas={applicationAreas}
    product={product}
    width={width}
    height={height}
    configuration={viewConfiguration}
    showInspector={inspectorContext?.showInspector}
    ssao2Pipeline={pipelineConfig}
    orderIndependentTransparency={boolean}
    className={className}
    errorCallback={setError}
    loadingCallback={setLoadingModels}
    viewPhaseCallback={viewPhaseCallback}
    renderEnvironmentCallback={renderEnvironmentCallback}
    orbitalCameraConfigurationCallback={orbitalCameraConfigurationCallback}
/>

Required parameters

• applicationAreas Array of the ApplicationAreas for the current Catalogue. You may also pass the string "loading" to tell the BabylonView you are in the progress of loading.
• product CfgProduct object containing the current product. It contains what Models shall be loaded, prices, which Features and Options that are available etc.
• width & height Current size of the BabylonView-viewport in the browser.

Optional parameters

• configuration Object with settings for how the BabylonView is set up. You can for example control the starting position of the camera and modify other settings as shown below (taken from example-app):

  const viewConfiguration = useMemo<SingleProductDefaultCameraViewConfiguration>(
      () => ({
          camera: {
              initial: initialCameraConf, // Where the camera will start at
              ...cameraDefaults, // Where the camera will reset to
          },
          textureResolutionLevel: MIPS_TEXTURE_LEVEL.Max, // defaults to max if not set
          allowedDetailLevels: [
              DetailLevel.low,
              DetailLevel.medium,
              DetailLevel.high,
              DetailLevel.base,
          ],
          experimentalAnimationCoordinator: CoordinatorDropAndSpin.getCoordinatorCreator(),
      }),
      [initialCameraConf, cameraDefaults]
  );

• showInspector If an html-element is passed here, the Babylon Inspector will be viewed with this element as parent. In general, pass something high level such as the body-element.

• ssao2Pipeline SSAO2PipelineConfiguration object where you can toggle the pipeline on/off and provide a configuration. If no values are given, default values will be used. Example:

  const ssao2Config: SSAO2PipelineConfiguration = {
      enabled: true,
      ssao2Config: {
          ssaoRatio: 1,
          blurRatio: 1,
          samples: 16,
          // radius: 0.5, // here, radius will use the default values
          maxZ: 100, // this will override the default values
          minZAspect: 1,
          expensiveBlur: true,
          textureSamples: 4,
          totalStrength: 1,
          base: 0.05,
          bilateralSamples: 16,
          bilateralSoften: 0.5,
          bilateralTolerance: 0.01,
      },
  };

• orderIndependentTransparency This toggles Order Independent Transparency. If not set, defaults to false. Note: There is a performance cost to enable this feature.

• className Set the class name for the canvas element.

Optional callbacks

• errorCallback Called as soon as an error that ought to be prompted to the user happens.
• loadingCallback Called as soon as the loading status changes. Use it for example to display a spinner on top of the BabylonView. User interaction is not automatically disabled while loading, so if you want to prevent the user from for example rotating the product while loading you will need to do this.
• viewPhaseCallback A callback receiving what phase the product viewing is in.
• renderEnvironmentCallback Called when the RenderEnv object is updated.
• orbitalCameraConfigurationCallback Called with the current settings for the camera. Includes position, field of view, near limit, etc. The callback will be called each time these properties are updated.

Known Issues

Order Independent Transparency

• This does not work with the SSAO2 post processing pipeline. The model will not load.
• Order Independent Transparency Limitations.