pmndrs / gltfjsx

🎮 Turns GLTFs into JSX components
https://gltf.pmnd.rs
MIT License
4.71k stars 310 forks source link

webview setState in each component is not responding #105

Closed teenkwn closed 3 years ago

teenkwn commented 3 years ago

My intention is to customize items in character in webview and sent the items name from react native. The data is send correctly but when I need to set the state inside the web add event listener.

It have no problem when set state in color, but it crash when set state color and geometry

`function Boy(props) { const group = useRef() const { nodes, materials } = useGLTF('/man6.gltf')

const state = proxy ({
  current: null,
  color: {
    skin: "#fff6dd",
    hair: 'Material.010', //RN2_Green.002
    shirt: 'NolmalShirt02.001',
    watch: "Material.007",
    shoe: 'Shoes_Normal.001',  //'Material.009'
  }
})  

const stateGeo = proxy ({
  current: null,
  geo: {
    shoe: nodes.Shoes2.geometry,
    shirt: nodes.man_Shirt.geometry,
  }
})

const snap = useSnapshot(state)

const collectionShoesGeometry = {
  "shoe3": nodes.Shoes2.geometry,
  "shoe4": nodes.man_Shoes.geometry,
}

const collectionShirtsGeometry = {
  "shirt3": nodes.Shirt2.geometry,
  "shirt4": nodes.man_Shirt.geometry,
}

window.addEventListener("message", function(event) {
  var requestTrim = event.data + ""
  var value = requestTrim.split("|")
  if (value.length > 0) {
    if (value[0] === "closet") {
      stateGeo.geo['shirt'] = collectionShirtsGeometry['shirt3']
      state.color['shirt'] = "NolmalShirt02.001"
    } else if(value[0] === "watch") {
      state.color["watch"] = "Material.008"
    }
  }
});

useEffect(() => {

}, [])

return (
  <group ref={group} {...props} dispose={null} scale={4.7}>
    <mesh
      geometry={stateGeo.geo['shirt']}
      material-color={snap.color['shirt']}
      material={materials[snap.color['shirt']]}
      position={[0, -0.01, 0.02]}
      rotation={[-1.6, 0, 0]}
    />
    <mesh
      geometry={nodes.watch1.geometry}
      material={materials['Material.001']}
      position={[0, -0.01, 0.02]}
      rotation={[-1.6, 0, 0]}
      scale={1.01}
    />
  </group>
)

}

useGLTF.preload('/man6.gltf')`

I try to put the state outside the function, it's work. Note: useSnapshot can't use twice in the same function and I'm not sure why.

Did anyone have any suggest about this? Thank you

drcmda commented 3 years ago

this doesnt seem correct, color = "NolmalShirt02.001" is not valid