add light support to renderer props (#151).

brianzinn · Sep 7, 2021 · 797a1fc · 797a1fc
1 parent 8bd2583
commit 797a1fc
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 30 deletions.
diff --git a/src/PropsHandler.ts b/src/PropsHandler.ts
@@ -1,3 +1,4 @@
+import { Light } from '@babylonjs/core/Lights/light.js';
 import { FresnelParameters } from '@babylonjs/core/Materials/fresnelParameters.js';
 import { BaseTexture } from '@babylonjs/core/Materials/Textures/baseTexture.js';
 import { Color3, Color4 } from '@babylonjs/core/Maths/math.color.js';
@@ -317,12 +318,12 @@ export const checkControlDiff = (oldProp: Control | undefined, newProp: Control
   })
 }
 
-export const checkObjectDiff = (oldProp: Record<string, unknown> | undefined, newProp: Record<string, unknown> | undefined, propertyName: string, changedProps: PropertyUpdate[]): void => {
-  propertyCheck<Record<string, unknown>>(oldProp, newProp, propertyName, PropChangeType.Primitive, changedProps, (oldProp, newProp, changedProps) => {
+export const checkObjectDiff = (oldProp: Record<string, unknown> | Light | undefined, newProp: Record<string, unknown> | Light | undefined, propertyName: string, changedProps: PropertyUpdate[]): void => {
+  propertyCheck<Record<string, unknown> | Light>(oldProp, newProp, propertyName, PropChangeType.Primitive, changedProps, (oldProp, newProp, changedProps) => {
     if (newProp !== oldProp) {
       changedProps.push({
         propertyName,
-        changeType: PropChangeType.Primitive,
+        changeType: PropChangeType.Primitive, // basic equality check (same as primitive)
         value: newProp
       })
     }

diff --git a/src/customHosts/GizmoLifecycleListener.ts b/src/customHosts/GizmoLifecycleListener.ts
@@ -27,20 +27,22 @@ export default class GizmoLifecycleListener extends BaseLifecycleListener<Gizmo,
       }
     }
 
-    console.log('skipAutoAttach:', gizmoProps.skipAutoAttach);
-
     if (gizmoProps.skipAutoAttach !== true || (gizmoProps.attachGizmoToMesh !== false && gizmoProps.attachGizmoToNode !== false)) {
       const searchType = gizmoProps.attachGizmoToMesh === undefined && gizmoProps.attachGizmoToNode === undefined
-        ? 'node' // default with no attach preference specified.
-        : gizmoProps.attachGizmoToNode === true ? 'node' : 'mesh';
+        ? null // default with no attach preference specified
+        : gizmoProps.attachGizmoToMesh === true
+          ? 'mesh'
+          : gizmoProps.attachGizmoToNode === true ? 'node': null;
 
       let tmp: CreatedInstance<any> | null = instance.parent;
       while (tmp !== null) {
-        if (searchType === 'mesh' && tmp.metadata && tmp.metadata.isMesh === true) {
+        // Note: LightGizmo expects attachedMesh when assigning light, so check Mesh first
+        // https://forum.babylonjs.com/t/lightgizmo-attaching-a-node/23653/3
+        if ((searchType === null || searchType === 'mesh') && tmp.metadata?.isMesh === true) {
           gizmo.attachedMesh = tmp.hostInstance;
           break;
         }
-        if (searchType === 'node' && tmp.metadata && tmp.metadata.isNode === true) {
+        if ((searchType === null || searchType === 'node') && tmp.metadata?.isNode === true) {
           gizmo.attachedNode = tmp.hostInstance;
           break;
         }

diff --git a/src/customHosts/GizmoManagerLifecycleListener.ts b/src/customHosts/GizmoManagerLifecycleListener.ts
@@ -6,11 +6,9 @@ import BaseLifecycleListener from './BaseLifecycleListener';
 export default class GizmoManagerLifecycleListener extends BaseLifecycleListener<GizmoManager, any> {
 
   onChildAdded(child: CreatedInstance<any>, parent: CreatedInstance<any>): void {
-    console.log('child added to gizmomanager', child);
     const gizmoManager: GizmoManager = parent.hostInstance! as GizmoManager;
     // TODO: check usePointerToAttachGizmos?
     if (child.metadata && child.metadata.isGizmo !== true) {
-      console.log('attaching to gizmo manager')
       if (child.metadata.isNode === true) {
         gizmoManager.attachToNode(child.hostInstance);
       } else if (child.metadata.isMesh === true) {

diff --git a/src/generatedCode.ts b/src/generatedCode.ts
@@ -15884,7 +15884,7 @@ export class FiberAxisDragGizmo implements HasPropsHandlers<FiberGizmoProps> {
 export class FiberLightGizmoPropsHandler implements PropsHandler<FiberLightGizmoProps> {
     getPropertyUpdates(oldProps: FiberLightGizmoProps, newProps: FiberLightGizmoProps): PropertyUpdate[] | null {
         const changedProps: PropertyUpdate[] = []
-        // type: 'BabylonjsCoreLight' property (not coded) BabylonjsCoreLightGizmo.light.
+        checkObjectDiff(oldProps.light, newProps.light, 'light', changedProps)
         checkObservableDiff(oldProps.onClickedObservable, newProps.onClickedObservable, 'onClickedObservable', changedProps)
         return changedProps.length === 0 ? null : changedProps;
     }

diff --git a/storybook/stories/babylonjs/Basic/gizmoManager.stories.js b/storybook/stories/babylonjs/Basic/gizmoManager.stories.js
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Engine, Scene, useScene } from 'react-babylonjs';
 import { Color3 } from '@babylonjs/core/Maths/math.color';
 import { Vector3 } from '@babylonjs/core/Maths/math.vector';
@@ -13,30 +13,37 @@ const Inspector = () => {
 }
 
 export const GizmoManager = () => {
+  const [lightRef, setLightRef] = useState(undefined);
 
-  const lightRef = useRef(null);
+  useEffect(() => {
+    console.log('light has been set', lightRef);
+  }, [lightRef])
   return (
     <div style={{ flex: 1, display: 'flex' }}>
       <Engine antialias adaptToDeviceRatio canvasId='babylonJS' >
         <Scene>
           <arcRotateCamera name='arc' target={new Vector3(0, 1, 0)}
-            alpha={-Math.PI / 2} beta={(0.5 + (Math.PI / 4))}
-            radius={10} minZ={0.001} wheelPrecision={50}
+            alpha={0.5 + -Math.PI / 2} beta={(0.5 + (Math.PI / 4))}
+            radius={15} minZ={0.001} wheelPrecision={50}
           />
-          {/* <hemisphericLight name='hemi' direction={new Vector3(0, -1, 0)} intensity={0.8} /> */}
+          <hemisphericLight name='hemi' direction={new Vector3(0, -1, 0)} intensity={0.8} />
           <Inspector />
+          <directionalLight name='red-light' direction={new Vector3(-5 * Math.PI / 4, -5 * Math.PI / 4, -Math.PI)} intensity={8} angle={102} exponent={5}
+            diffuse={Color3.Red()}
+            specular={Color3.Red()}
+            position={new Vector3(0, 5, 0)}
+            ref={setLightRef}
+          >
+            <shadowGenerator mapSize={1024} useBlurExponentialShadowMap blurKernel={32} shadowCastChildren>
+              <icoSphere name='ico1' position={new Vector3(0, 2, 0)} diffuseColor={Color3.Red()} />
+            </shadowGenerator>
+          </directionalLight>
+
           <utilityLayerRenderer>
-            <gizmoManager thickness={3} positionGizmoEnabled>
-              <spotLight name='red-light' direction={new Vector3(0, 0, Math.PI)} intensity={8} angle={102} exponent={5}
-                diffuse={Color3.Red()}
-                specular={Color3.Red()}
-                position={new Vector3(0, 5, 0)}
-              >
-                <shadowGenerator mapSize={1024} useBlurExponentialShadowMap blurKernel={32} shadowCastChildren>
-                  <icoSphere name='ico1' position={new Vector3(0, 2, 0)} diffuseColor={Color3.Red()} />
-                </shadowGenerator>
-              </spotLight>
-              <lightGizmo light={lightRef.current} updateScale skipAutoAttach={true} />
+            <gizmoManager thickness={3} positionGizmoEnabled rotationGizmoEnabled>
+              <sphere name="sunMesh" diameter={1}>
+                <lightGizmo light={lightRef} updateScale />
+              </sphere>
             </gizmoManager>
           </utilityLayerRenderer>
           <ground name='ground1' width={15} height={15} subdivisions={2} receiveShadows />

diff --git a/storybook/stories/babylonjs/Hooks/hooks.stories.js b/storybook/stories/babylonjs/Hooks/hooks.stories.js
@@ -20,7 +20,7 @@ const shade = 0;
 const rpm = 10;
 
 const RotatingBox = ({position}) => {
-  const centerTransform = useRef();
+  const centerTransform = useRef(null);
   useBeforeRender((scene) => {
     if (centerTransform.current !== null) {
       const deltaTimeInMillis = scene.getEngine().getDeltaTime();

diff --git a/tools/generate-code.ts b/tools/generate-code.ts
@@ -990,7 +990,7 @@ const addPropsAndHandlerClasses = (generatedCodeSourceFile: SourceFile, generate
 
     // These properties break out to specific method handlers
     type PropertyKind = 'BabylonjsCoreBaseTexture' | 'BabylonjsCoreColor3' | 'BabylonjsCoreColor4' | 'BabylonjsCoreVector3' | 'BabylonjsCoreFresnelParameters' | 'BabylonjsCoreQuaternion' |
-      'BabylonjsGuiControl' | 'number[]' | 'lambda' | 'observable' | 'method' | 'primitive' | 'object';
+      'BabylonjsGuiControl' | 'number[]' | 'lambda' | 'observable' | 'method' | 'primitive' | 'object' | 'BabylonjsCoreLight';
     type NameAndType = {
       name: string
       type: string,
@@ -1082,6 +1082,7 @@ const addPropsAndHandlerClasses = (generatedCodeSourceFile: SourceFile, generate
                 })
               }
               break;
+            case 'BabylonjsCoreLight':
             case '{ [key: string]: any; }':
               propsToCheck.push({
                 name: propertyName,
@@ -1154,6 +1155,7 @@ const addPropsAndHandlerClasses = (generatedCodeSourceFile: SourceFile, generate
               writer.writeLine(`checkQuaternionDiff(oldProps.${propToCheck.name}, newProps.${propToCheck.name}, '${propToCheck.name}', changedProps)`);
               break;
             case 'object':
+            case 'BabylonjsCoreLight':
               writer.writeLine(`checkObjectDiff(oldProps.${propToCheck.name}, newProps.${propToCheck.name}, '${propToCheck.name}', changedProps)`);
               break;
             case 'primitive':