Search code examples
javascriptreactjsthree.jsreact-three-fiber

React three fiber passing function arguments

I made a function to return a material based on a value

function MyMat(height){

  if(height > 2) {
    return (<meshStandardMaterial color="#878787" flatShading={true} />)
  } 
  else if(height > 1) {
    return (<meshStandardMaterial color="#674942" flatShading={true} />)
  }

  return (
    <meshStandardMaterial color="black" flatShading={true} />
  )
}

and when I call it in my canvas likes this

<MyMat height = {4} />

it works but the the value 4 (height) isn't passed, how can I pass it?

Solution

  • You need to write height as object props, not as a value. Replace MyMat(height) with MyMat({height})