Merge pull request #3 from baseten/improve-example

Improve Cubes Example

Author: baseten

examples/3d-cubes/src/components/Cube.tsx

@@ -6,7 +6,7 @@ import {
   Transform3dProps,
   useFactoryRef,
 } from 'react-css-transform';
-import { FlatMaterial } from './FlatMaterial';
+import { Face } from './Face';
 import { halfPi, yAxis, xAxis } from '../constants';
 
 const propTypes = {
@@ -46,36 +46,42 @@ export const Cube = ({ faceSize, color, ...otherProps }: CubeProps) => {
 
   return (
     <Transform3d {...otherProps}>
-      <Transform3d translate={pos1.current} rotate={-halfPi} rotateAxis={yAxis}>
-        <FlatMaterial color={color}>
-          <div style={faceStyle} className="face" />
-        </FlatMaterial>
-      </Transform3d>
-      <Transform3d translate={pos2.current} rotate={halfPi} rotateAxis={yAxis}>
-        <FlatMaterial color={color}>
-          <div style={faceStyle} className="face" />
-        </FlatMaterial>
-      </Transform3d>
-      <Transform3d translate={pos3.current} rotate={halfPi} rotateAxis={xAxis}>
-        <FlatMaterial color={color}>
-          <div style={faceStyle} className="face" />
-        </FlatMaterial>
-      </Transform3d>
-      <Transform3d translate={pos4.current} rotate={-halfPi} rotateAxis={xAxis}>
-        <FlatMaterial color={color}>
-          <div style={faceStyle} className="face" />
-        </FlatMaterial>
-      </Transform3d>
-      <Transform3d translate={pos5.current} rotate={Math.PI} rotateAxis={yAxis}>
-        <FlatMaterial color={color}>
-          <div style={faceStyle} className="face" />
-        </FlatMaterial>
-      </Transform3d>
-      <Transform3d translate={pos6.current}>
-        <FlatMaterial color={color}>
-          <div style={faceStyle} className="face" />
-        </FlatMaterial>
-      </Transform3d>
+      <Face
+        translate={pos1.current}
+        rotate={-halfPi}
+        rotateAxis={yAxis}
+        color={color}
+        style={faceStyle}
+      />
+      <Face
+        translate={pos2.current}
+        rotate={halfPi}
+        rotateAxis={yAxis}
+        color={color}
+        style={faceStyle}
+      />
+      <Face
+        translate={pos3.current}
+        rotate={halfPi}
+        rotateAxis={xAxis}
+        color={color}
+        style={faceStyle}
+      />
+      <Face
+        translate={pos4.current}
+        rotate={-halfPi}
+        rotateAxis={xAxis}
+        color={color}
+        style={faceStyle}
+      />
+      <Face
+        translate={pos5.current}
+        rotate={Math.PI}
+        rotateAxis={yAxis}
+        color={color}
+        style={faceStyle}
+      />
+      <Face translate={pos6.current} color={color} style={faceStyle} />
     </Transform3d>
   );
 };

examples/3d-cubes/src/components/DimensionsContext.tsx

@@ -0,0 +1,51 @@
+import { merge3dMatrixWithStyles, use3dTransformations } from 'react-css-transform';
+import { useGlobalContext } from './GlobalContext';
+import { useFlatShading } from '../useFlatShading';
+import { vec3 } from 'gl-matrix';
+import { useMemo } from 'react';
+import { blendHex } from '../utils';
+
+import type { CSSProperties } from 'react';
+import type { Transform3dProps } from 'react-css-transform';
+
+type FaceProps = Transform3dProps & {
+  color: string;
+  style: CSSProperties;
+};
+
+// local position is always 0, outer transform will apply positioning
+const objectLocalPosition = vec3.fromValues(0, 0, 0);
+// local normal is always z: 1, outer transform will apply positioning
+const objectLocalNormal = vec3.fromValues(0, 0, 1);
+
+export const Face = ({ color, style, ...transform3dProps }: FaceProps) => {
+  const { matrixWorld } = use3dTransformations(transform3dProps);
+
+  const { lightPosition, lightColor } = useGlobalContext();
+
+  const { diffuseColor, emissiveColor } = useMemo(() => {
+    return {
+      diffuseColor: blendHex(color, '#ffffff', 0.1),
+      emissiveColor: blendHex(color, '#000000', 0.5),
+    };
+  }, [color]);
+
+  const { outputColorString } = useFlatShading({
+    diffuseColor,
+    emissiveColor,
+    lightColor,
+    objectLocalPosition,
+    objectLocalNormal,
+    lightWorldPosition: lightPosition,
+    parentMatrixWorld: matrixWorld.current,
+  });
+
+  const faceStyle = useMemo(() => {
+    return merge3dMatrixWithStyles(matrixWorld.current, {
+      ...style,
+      backgroundColor: outputColorString,
+    });
+  }, [matrixWorld, style, outputColorString]);
+
+  return <div style={faceStyle} className="face" />;
+};

examples/3d-cubes/src/components/Face.tsx

@@ -0,0 +1,74 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+import { vec3 } from 'gl-matrix';
+import type { ReactNode } from 'react';
+
+type GlobalState = {
+  width: number;
+  height: number;
+  perspective: number;
+  lightPosition: vec3;
+  lightColor: string;
+};
+
+const updatePerspective = (height: number) => (500 / 750) * height;
+
+const updateLightPosition = (width: number, height: number, v: vec3) =>
+  vec3.set(v, width / 4, height / 4, 100);
+
+const getDefaultState = (width: number, height: number): GlobalState => ({
+  width,
+  height,
+  perspective: updatePerspective(height),
+  lightPosition: updateLightPosition(width, height, vec3.create()),
+  lightColor: '#ffffff',
+});
+
+const updateGlobalStateDimensions = (
+  width: number,
+  height: number,
+  state: GlobalState,
+): GlobalState => {
+  return {
+    ...state,
+    width,
+    height,
+    perspective: updatePerspective(height),
+    lightPosition: updateLightPosition(width, height, state.lightPosition),
+  };
+};
+
+const GlobalContext = createContext<GlobalState>(
+  getDefaultState(window.innerWidth, window.innerHeight),
+);
+
+export const useGlobalContext = () => useContext<GlobalState>(GlobalContext);
+
+type DimensionsProviderProps = {
+  children: ReactNode;
+};
+export const GlobalStateProvider = ({ children }: DimensionsProviderProps) => {
+  const [globalState, setGlobalState] = useState(() =>
+    getDefaultState(window.innerWidth, window.innerHeight),
+  );
+
+  useEffect(() => {
+    const handleResize = () => {
+      setGlobalState((state) =>
+        updateGlobalStateDimensions(
+          window.innerWidth,
+          window.innerHeight,
+          state,
+        ),
+      );
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return (
+    <GlobalContext.Provider value={globalState}>
+      {children}
+    </GlobalContext.Provider>
+  );
+};