fix: snippet material story (material null check) #111

brianzinn · Oct 6, 2021 · c8532a9 · c8532a9
1 parent 0387de7
commit c8532a9
Showing 1 changed file with 18 additions and 20 deletions.
diff --git a/storybook/stories/babylonjs/Basic/snippetMaterial.stories.js b/storybook/stories/babylonjs/Basic/snippetMaterial.stories.js
@@ -1,40 +1,38 @@
 import React, { useState, useCallback, useEffect } from 'react'
 import { Vector3, NodeMaterial, Color3 } from '@babylonjs/core';
-import {  Texture } from "@babylonjs/core/Materials/Textures/texture";
+import { Texture } from "@babylonjs/core/Materials/Textures/texture";
 import '@babylonjs/core/Rendering/edgesRenderer' // You this need for side-effects
 import { Engine, Scene, useScene } from 'react-babylonjs'
 
 import '../../style.css';
 
-// disabled due to errors
-// export default { title: 'Babylon Basic' };
-
+export default { title: 'Babylon Basic' };
 
 const setBlockValue = (
   name,
   value,
   material
 ) => {
-    if(value instanceof Texture){
-      let textureBlock = material.getTextureBlocks().find((b) => b.name === name);
-      if (textureBlock !== undefined) {
-        textureBlock.texture = value;
-      }
-    }else{
-      let block = material.getInputBlockByPredicate((b) => b.name === name);
-      if (block !== null) {
+  if (value instanceof Texture) {
+    let textureBlock = material.getTextureBlocks().find((b) => b.name === name);
+    if (textureBlock !== undefined) {
+      textureBlock.texture = value;
+    }
+  } else {
+    let block = material.getInputBlockByPredicate((b) => b.name === name);
+    if (block !== null) {
       block.value = value;
-      }
+    }
   }
 };
 
-const SnippetMaterialById = ({snippetId, name, blockValues, freeze}) => {
+const SnippetMaterialById = ({ snippetId, name, blockValues, freeze }) => {
   const scene = useScene();
   const [material, setMaterial] = useState(null);
   const parseMaterial = useCallback(async () => {
     NodeMaterial.ParseFromSnippetAsync(snippetId, scene).then(
       (nodeMaterial) => {
-        if(freeze === true){
+        if (material !== null && freeze === true) {
           material.freeze();
         }
         setMaterial(nodeMaterial);
@@ -44,13 +42,13 @@ const SnippetMaterialById = ({snippetId, name, blockValues, freeze}) => {
 
   useEffect(() => {
     if (material) {
-      if(freeze === true && material.isFrozen){
+      if (freeze === true && material.isFrozen) {
         material.unfreeze();
       }
-      blockValues.forEach((entry) =>{
+      blockValues.forEach((entry) => {
         setBlockValue(entry.name, entry.value, material)
       })
-      if(freeze === true){
+      if (freeze === true) {
         material.freeze();
       }
     }
@@ -67,7 +65,7 @@ const SnippetMaterialById = ({snippetId, name, blockValues, freeze}) => {
 
 const colors = ["Red", "Green", "Yellow"]
 
-const SnippetMaterial = () => {
+export const SnippetMaterial = () => {
   const [selectedColor, setSelectedColor] = useState("Green");
   const onChange = (e) => {
     setSelectedColor(e.target.value);
@@ -87,7 +85,7 @@ const SnippetMaterial = () => {
             />
             <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" freeze blockValues={[{name:"Surface Color", value: Color3[selectedColor]()}]} />
+              <SnippetMaterialById name="sphereMat" snippetId="#81NNDY#20" freeze blockValues={[{ name: "Surface Color", value: Color3[selectedColor]() }]} />
             </sphere>
             <ground name="ground1" width={6} height={6} subdivisions={2} />
           </Scene>