Cloud Stack Ninja

I have a content model in Contentful CMS that holds images of shirts. I want to be able to pull in those images and display them on a ThreeJS plane on a GatsbyJS site.

Something like this:

function Shirt() {
  const data = useStaticQuery(
    graphql`
      query FeaturedQuery {
        allContentfulShirt(
            limit: 3
            filter: {
              featured: {eq: true}
            }
        ) {
          edges {
            node {
              id
              title
              year
              shirtFront {
                fluid(maxWidth: 500, quality: 85) {
                  src
                  ...GatsbyContentfulFluid
                }
              }
              shirtBack {
                fluid(maxWidth: 500, quality: 85) {
                  src
                  ...GatsbyContentfulFluid
                }
              }
            }
          }
        }
      }
    `
  )

  const ref = useRef();
  const texture = useLoader(TextureLoader, data.allContentfulShirt.edges.node.shirtFront.fluid.src);

  return (
    <mesh>
      <planeBufferGeometry attach="geometry" args={[1, 1, 32, 32]} />
      <meshBasicMaterial attach="material" color={"red"} map={texture} />
    </mesh> 
  )
}

The code above was results in 'error 'TextureLoader' is not defined'.

If possible to render data from a CMS to ThreeJS, how would I go about it?



Read more here: https://stackoverflow.com/questions/64394779/is-it-possible-to-pull-images-from-cms-to-texture-react-three-fiber-component

Content Attribution

This content was originally published by Joey M at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: