feat: color blend mode in tileset on reearth/core (#496)

* feat: color blend mode in tileset * Update src/core/mantle/types/appearance.ts Co-authored-by: rot1024 <aayhrot@gmail.com> * Update src/core/engines/Cesium/common.ts Co-authored-by: rot1024 <aayhrot@gmail.com> --------- Co-authored-by: rot1024 <aayhrot@gmail.com>
reearth · Feb 28, 2023 · ca43dc1 · ca43dc1
1 parent 4f07b93
commit ca43dc1
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/src/core/engines/Cesium/Feature/Tileset/index.tsx b/src/core/engines/Cesium/Feature/Tileset/index.tsx
@@ -2,7 +2,7 @@ import { memo, useMemo } from "react";
 import { Cesium3DTileset } from "resium";
 
 import type { Cesium3DTilesAppearance, ComputedLayer } from "../../..";
-import { shadowMode } from "../../common";
+import { colorBlendModeFor3DTile, shadowMode } from "../../common";
 import Box from "../Box";
 import { type FeatureComponentConfig, type FeatureProps } from "../utils";
 
@@ -25,7 +25,7 @@ function Tileset({
   onFeatureDelete,
   ...props
 }: Props): JSX.Element | null {
-  const { shadows } = property ?? {};
+  const { shadows, colorBlendMode } = property ?? {};
   const boxId = `${layer?.id}_box`;
   const { tilesetUrl, ref, style, clippingPlanes, builtinBoxProps } = useHooks({
     id,
@@ -57,6 +57,7 @@ function Tileset({
         style={style}
         shadows={shadowMode(shadows)}
         clippingPlanes={clippingPlanes}
+        colorBlendMode={colorBlendModeFor3DTile(colorBlendMode)}
       />
       {builtinBoxProps && (
         <Box

diff --git a/src/core/engines/Cesium/common.ts b/src/core/engines/Cesium/common.ts
@@ -30,6 +30,7 @@ import {
   Matrix4,
   Color,
   SceneMode,
+  Cesium3DTileColorBlendMode,
 } from "cesium";
 import { useCallback, MutableRefObject } from "react";
 
@@ -472,6 +473,17 @@ export const colorBlendMode = (colorBlendMode?: "highlight" | "replace" | "mix"
     } as { [key in string]?: ColorBlendMode }
   )[colorBlendMode || ""]);
 
+export const colorBlendModeFor3DTile = (
+  colorBlendMode?: "highlight" | "replace" | "mix" | "default",
+) =>
+  ((
+    {
+      highlight: Cesium3DTileColorBlendMode.HIGHLIGHT,
+      replace: Cesium3DTileColorBlendMode.REPLACE,
+      mix: Cesium3DTileColorBlendMode.MIX,
+    } as { [key in string]?: Cesium3DTileColorBlendMode }
+  )[colorBlendMode || ""]);
+
 export const heightReference = (
   heightReference?: "none" | "clamp" | "relative",
 ): HeightReference | undefined =>

diff --git a/src/core/mantle/types/appearance.ts b/src/core/mantle/types/appearance.ts
@@ -125,6 +125,7 @@ export type Cesium3DTilesAppearance = {
   color?: string;
   styleUrl?: string;
   shadows?: "disabled" | "enabled" | "cast_only" | "receive_only";
+  colorBlendMode?: "highlight" | "replace" | "mix" | "default";
   edgeWidth?: number;
   edgeColor?: string;
   experimental_clipping?: EXPERIMENTAL_clipping;