# GLB + Shader + R3F

**URL:** <https://discourse.threejs.org/t/glb-shader-r3f/57567>\
**Category:** Questions\
**Tags:** shaders\
**Created:** [October 30, 2023, 12:26pm UTC](https://discourse.threejs.org/t/glb-shader-r3f/57567 "2023-10-30T12:26:21Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lukasz\_Mestales](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lukasz_mestales/32/65638_2.png) [@Lukasz\_Mestales](https://discourse.threejs.org/u/Lukasz_Mestales)\
**Post date:** [October 30, 2023, 12:26pm UTC](https://discourse.threejs.org/t/glb-shader-r3f/57567/1 "2023-10-30T12:26:21Z")

</div>

Hi, I have a small problem with glb, i mean. it displays strangely… after implementing the shader.

```javascript
import React, { useEffect, useRef } from "react";
import * as THREE from "three";
import { extend } from "@react-three/fiber";
import { shaderMaterial, useGLTF } from "@react-three/drei";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

const beltColor = shaderMaterial(
  { progress: 0 },
   `
  void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
  `,
  `
  uniform float progress;
  void main() {
    gl_FragColor = mix(vec4(1.0, 0.0, 0.0, 1.0), vec4(0.0, 0.0, 1.0, 1.0), progress);
  }
  `
);
extend({ beltColor });

export default function Model(props) {
  const modelRef = useRef();

  const { nodes, materials } = useGLTF("bjj_belt.glb");

  useEffect(() => {
    gsap.to(modelRef.current.rotation, {
      scrollTrigger: {
        trigger: ".section1",
        endTrigger: ".section5",
        markers: true,
        scrub: 1,
        start: "top top",
        end: "bottom top",
      },
      y: (index) => Math.PI * (2 + 0.6 * index),
      x: (index) => Math.PI * (2 + 0.6 * index),
      z: (index) => Math.PI * (2 + 0.6 * index),
    });
    // gsap.to(beltColor.uniforms.progress, {
    // value: 1,
    // scrollTrigger: {
    // trigger: ".section1",
    // endTrigger: ".section5",
    // markers: true,
    // scrub: 1,
    // start: "top top",
    // end: "bottom top",
    // },
    // });
  }, []);

  return (
    <group {...props} dispose={null}>
      <mesh
        ref={modelRef} // Assign the ref to the mesh
        castShadow
        receiveShadow
        geometry={nodes.BJJ_BELT.geometry}
        material={materials[beltColor]}
        position={[0, 0, 3]}
        rotation={[0.189, 0, 0]}
      />
    </group>
  );
}

useGLTF.preload("bjj_belt.glb");

```

White version - shader.  
Black version - standard.

 ![1](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/6/06a53dc9735affcbf0515ace01443bb9a45bcb37.png)  
 ![2](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/b/eb55184c17a51b14b268089e14059be00c860f71.png)

Some ideas?

---

<div class="post-metadata">

**Author:** ![raaaahman](https://avatars.discourse-cdn.com/v4/letter/r/5fc32e/32.png) [@raaaahman](https://discourse.threejs.org/u/raaaahman)\
**Post date:** [October 30, 2023, 2:34pm UTC](https://discourse.threejs.org/t/glb-shader-r3f/57567/2 "2023-10-30T14:34:00Z")

</div>

What is your issue exactly? Are you sure `materials[beltColor]` is not `undefined`?

---

<div class="post-metadata">

**Author:** ![Lukasz\_Mestales](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lukasz_mestales/32/65638_2.png) [@Lukasz\_Mestales](https://discourse.threejs.org/u/Lukasz_Mestales)\
**Post date:** [October 30, 2023, 2:38pm UTC](https://discourse.threejs.org/t/glb-shader-r3f/57567/3 "2023-10-30T14:38:49Z")

</div>

looks like THREE.DoubleSide issue, but when I set that, glb disappearing

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [October 30, 2023, 3:34pm UTC](https://discourse.threejs.org/t/glb-shader-r3f/57567/4 "2023-10-30T15:34:01Z")

</div>

you’re not using a custom shader in that example. you’re giving it undefined, so that’s a meshbasicmaterial in threejs.

beltColor is a reference to a shader, you can’t use that as a key, materials[beltColor] doesn’t exist.

it should be

```jsx
const beltColorMaterial = shaderMaterial(...)
extend({ beltColorMaterial })
...
<mesh geometry={...} ...>
  <beltColorMaterial />
</mesh>

```

you also don’t need ref.uniforms.progress.value = foo later on, this is why you use shaderMaterial because it creates auto setter/getters: ref.progress = foo

---

<div class="post-metadata">

**Author:** ![Lukasz\_Mestales](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lukasz_mestales/32/65638_2.png) [@Lukasz\_Mestales](https://discourse.threejs.org/u/Lukasz_Mestales)\
**Post date:** [October 30, 2023, 3:48pm UTC](https://discourse.threejs.org/t/glb-shader-r3f/57567/5 "2023-10-30T15:48:55Z")

</div>

```javascript
import React, { useEffect, useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import * as THREE from "three";
import { shaderMaterial, useGLTF } from "@react-three/drei";
import { useFrame, extend } from "@react-three/fiber";
import beltlVertexShader from "./vertex.glsl";
import beltFragmentShader from "./fragment.glsl";

gsap.registerPlugin(ScrollTrigger);

export default function Model(props) {
  const beltMaterial = useRef();
  const modelRef = useRef();

  const { nodes } = useGLTF("newBelt.glb");

  useEffect(() => {
    gsap.to(modelRef.current.rotation, {
      scrollTrigger: {
        trigger: ".section1",
        endTrigger: ".section5",
        markers: true, // You can remove this in production
        scrub: 1,
        start: "top top",
        end: "bottom top",
      },
      y: (index) => Math.PI * (2 + 0.6 * index),
      // x: (index) => Math.PI * (2 + 0.6 * index),
      // z: (index) => Math.PI * (2 + 0.6 * index),
    });
  }, []);

  return (
    <group {...props} dispose={null}>
      <mesh
        ref={modelRef}
        position={[0, -1, 2]}
        geometry={nodes.Belt_Leather.geometry}
      >
        <beltMaterial ref={beltMaterial} />
      </mesh>
    </group>
  );
}

const BeltMaterial = shaderMaterial(
  {
    progress: 0,
  },

  beltlVertexShader,
  beltFragmentShader
);
extend({ BeltMaterial });

```

I made some corrections, now shader is on glb, but I think that is “sides” problem, because definitely is something wrong with backside…

 ![3](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/e/ee9683f2cd78b424ec095f735c63b632070de607.jpeg)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [October 30, 2023, 4:31pm UTC](https://discourse.threejs.org/t/glb-shader-r3f/57567/6 "2023-10-30T16:31:23Z")

</div>

```jsx
<beltMaterial ref={beltMaterial} side={THREE.DoubleSide} />

```

the root of the issue is that the normals as flipped. if you fix this in blender it would be the cleanest. if this is a single walled mesh then doubleside is correct, but that can also be set in blender imo.

---

<div class="post-metadata">

**Author:** ![Lukasz\_Mestales](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lukasz_mestales/32/65638_2.png) [@Lukasz\_Mestales](https://discourse.threejs.org/u/Lukasz_Mestales)\
**Post date:** [October 30, 2023, 4:38pm UTC](https://discourse.threejs.org/t/glb-shader-r3f/57567/7 "2023-10-30T16:38:16Z")

</div>

Yep, thank you so much Paul. I am still confused with syntax and “injecting” code in right place in R3F.

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [October 30, 2023, 4:51pm UTC](https://discourse.threejs.org/t/glb-shader-r3f/57567/8 "2023-10-30T16:51:24Z")

</div>

fiber semantics aren’t that many but important to know if you want to express three in react. this one page is practically all you need to know [React Three Fiber Documentation](https://docs.pmnd.rs/react-three-fiber/api/objects) if you go through it all once it should be fine.