Change color of NME block #105

brianzinn · Jan 11, 2021 · 2b1eecb · 2b1eecb
1 parent 4473f8a
commit 2b1eecb
Showing 1 changed file with 40 additions and 18 deletions.
diff --git a/stories/babylonjs/Basic/snippetMaterial.stories.js b/stories/babylonjs/Basic/snippetMaterial.stories.js
@@ -1,12 +1,12 @@
 import React, { useState, useCallback, useEffect } from 'react'
-import { Vector3, NodeMaterial } from '@babylonjs/core';
+import { Vector3, NodeMaterial, Color3 } from '@babylonjs/core';
 import '@babylonjs/core/Rendering/edgesRenderer' // You this need for side-effects
 import { Engine, Scene, useScene } from '../../../dist/react-babylonjs'
 import '../../style.css';
 
 export default { title: 'Babylon Basic' };
 
-const SnippetMaterialById = ({snippetId, name}) => {
+const SnippetMaterialById = ({snippetId, name, surfaceColor}) => {
   const scene = useScene();
   const [material, setMaterial] = useState(null);
   const parseMaterial = useCallback(async () => {
@@ -17,6 +17,13 @@ const SnippetMaterialById = ({snippetId, name}) => {
     );
   }, [snippetId, scene]);
 
+  useEffect(() => {
+    if (material) {
+      let block = material.getInputBlockByPredicate((b) => b.name === 'Surface Color');
+      block.value = Color3[surfaceColor]();
+    }
+  }, [surfaceColor]);
+
   useEffect(() => {
     parseMaterial();
   }, [parseMaterial]);
@@ -26,19 +33,34 @@ const SnippetMaterialById = ({snippetId, name}) => {
   );
 };
 
-export const SnippetMaterial = () => (
-  <div style={{ flex: 1, display: 'flex' }}>
-    <Engine antialias adaptToDeviceRatio canvasId='babylonJS'>
-      <Scene>
-      <arcRotateCamera name="arc" target={Vector3.Zero()} minZ={0.001}
-        alpha={-Math.PI / 4} beta={(Math.PI / 4)} radius={5} upperBetaLimit={(Math.PI / 2) * 0.99}
-      />
-        <hemisphericLight name="light1" intensity={0.7} direction={Vector3.Up()} />
-        <sphere name="sphere1" diameter={2} segments={16} position={new Vector3(0, 1, 0)}>
-          <SnippetMaterialById name="sphereMat" snippetId="#81NNDY#20" />
-        </sphere>
-        <ground name="ground1" width={6} height={6} subdivisions={2} />
-      </Scene>
-    </Engine>
-  </div>
-)
+const colors = ["Red", "Green", "Yellow"]
+
+export const SnippetMaterial = () => {
+  const [selectedColor, setSelectedColor] = useState("Green");
+  const onChange = (e) => {
+    setSelectedColor(e.target.value);
+  }
+  return (
+    <>
+      <div style={{ flex: 1, display: 'flex' }}>
+        <select onChange={onChange}>
+          {colors.map(color => <option key={color} value={color} selected={selectedColor === color}>{color}</option>)}
+        </select>
+      </div>
+      <div style={{ flex: 1, display: 'flex' }}>
+        <Engine antialias adaptToDeviceRatio canvasId='babylonJS'>
+          <Scene>
+          <arcRotateCamera name="arc" target={Vector3.Zero()} minZ={0.001}
+            alpha={-Math.PI / 4} beta={(Math.PI / 4)} radius={5} upperBetaLimit={(Math.PI / 2) * 0.99}
+          />
+            <hemisphericLight name="light1" intensity={0.7} direction={Vector3.Up()} />
+            <sphere name="sphere1" diameter={2} segments={16} position={new Vector3(0, 1, 0)}>
+              <SnippetMaterialById name="sphereMat" snippetId="#81NNDY#20" surfaceColor={selectedColor} />
+            </sphere>
+            <ground name="ground1" width={6} height={6} subdivisions={2} />
+          </Scene>
+        </Engine>
+      </div>
+    </>
+  )
+}