0

I'm still pretty new to 3d with blender (and coding in 3d), but I'm trying to create and export a material using nodes (instead of a jpg image):

ring in blender

In React, I'm coding as follows:

export default function Ring({ ...props }: JSX.IntrinsicElements['group']) {
  const group = useRef<THREE.Group>(null)
  const { nodes, materials } = useGLTF('../assets/ring.glb', 'https://www.gstatic.com/draco/versioned/decoders/1.4.1/') as GLTFResult
  return (
    <group ref={group} {...props} dispose={null}>
      <mesh castShadow receiveShadow geometry={nodes.ring.geometry} material={materials['Material.001']} />
    </group>
  )
}

However, in the browser I am getting this result:

white ring

I'm trying to figure out if the issue is:

  • a. There is nothing to reflect, and therefore no color (I added <Sky .. /> and <Environment .. /> tags hoping this would solve it.
  • b. The code needs some extra code to pull in other parameters which are part of the object itself:

item params

  • c. I need to add extra shaders or something because of 'unknown unknowns' in the way I'm using things.
  • d. I've exported it wrongly - which might be the case because I've tried importing here: https://3dviewer.net/ and it is still white. (I tried using 'apply modifiers' when exporting).

Either way, I need to figure out if this is an exporting issue, or a coding issue.

Thanks for the help.

timhc22
  • 101
  • 4
  • 1
    Generally speaking there are limitations exporting node-based materials from Blender. See https://blender.stackexchange.com/questions/57531/fbx-export-why-there-are-no-materials-or-textures – John Eason Sep 25 '22 at 21:05
  • tl;dr — to export to glTF, use a Principled BSDF material. Details on how to set up your materials for export are included in the addon documentation. – Don McCurdy Oct 25 '22 at 19:14

0 Answers0