# How to draw an animated line segments on animated model?

**URL:** <https://discourse.threejs.org/t/how-to-draw-an-animated-line-segments-on-animated-model/47009>\
**Category:** Questions\
**Tags:** materials, animation\
**Created:** [January 18, 2023, 9:02am UTC](https://discourse.threejs.org/t/how-to-draw-an-animated-line-segments-on-animated-model/47009 "2023-01-18T09:02:24Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![an\_nguyen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/an_nguyen/32/32598_2.png) [@an\_nguyen](https://discourse.threejs.org/u/an_nguyen)\
**Post date:** [January 18, 2023, 9:02am UTC](https://discourse.threejs.org/t/how-to-draw-an-animated-line-segments-on-animated-model/47009/1 "2023-01-18T09:02:24Z")

</div>

Hi guys,  
I’m using FBXLoader to load an animated model by using react-three-fiber. I want to draw grid linesegments on the model when the animation running. But It can’t.

```javascript
const loadModel = () => {
      const loader = new FBXLoader()
      loader.setPath(resourcePath + '/')
      loader.load(
        mainFileName,
        async (fbx) => {
          // create animation
          mixer = new THREE.AnimationMixer(fbx)
          fbx.animations.forEach((clip) => {
            if (mixer) {
              const idle = mixer.clipAction(clip)
              idle.play()
            }
          })
          animate()

          skeleton = new THREE.SkeletonHelper(fbx)
          skeleton.visible = false
          skeleton.updateMatrixWorld()
          scene.add(skeleton)

          fbx.traverse((node) => {
            if (node instanceof THREE.Mesh) {
              node.castShadow = true
              node.receiveShadow = true
              node.material.side = THREE.FrontSide
              node.frustumCulled = false
              node.wireframe = true
              node.material = customMaterial
              node.material.skinning = true

              const mat = new THREE.MeshLambertMaterial({ color: color, skinning: true })
              const mesh = new THREE.SkinnedMesh(node.geometry, mat)
              mesh.material.wireframe = true
              const wireframeGeomtry = new THREE.WireframeGeometry(mesh.geometry)
              const wireframeMaterial = new THREE.LineBasicMaterial({ color: color })
              const wireframe = new THREE.LineSegments(wireframeGeomtry, wireframeMaterial)
              wireframe.visible = true
              scene.add(wireframe)
            }
          })
        },
        async (event) => {
          console.log(event.total)
        }
      )
    }

```

This is my result.

 ![Screen Shot 2023-01-18 at 16.02.04](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/5/7572adaed183d6afc3def37c8f1c2fa242dac579.png)  
i

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 18, 2023, 10:00am UTC](https://discourse.threejs.org/t/how-to-draw-an-animated-line-segments-on-animated-model/47009/2 "2023-01-18T10:00:16Z")

</div>

With `WebGLRenderer`, skinning does not work with lines and points. Only meshes.

Do you mind trying this approach instead:

```plaintext
const mat = new THREE.MeshLambertMaterial({ color: color, wireframe: true })

```

BTW: The `skinning` material parameter has been removed with `r129`.

---

<div class="post-metadata">

**Author:** ![an\_nguyen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/an_nguyen/32/32598_2.png) [@an\_nguyen](https://discourse.threejs.org/u/an_nguyen)\
**Post date:** [January 18, 2023, 10:47am UTC](https://discourse.threejs.org/t/how-to-draw-an-animated-line-segments-on-animated-model/47009/3 "2023-01-18T10:47:44Z")

</div>

Thank so much @Mugen87 ,  
But when I add

```javascript
fbx.traverse((node) => {
            if (node instanceof THREE.Mesh) {
              node.castShadow = true
              node.receiveShadow = true
              node.material.side = THREE.FrontSide
              node.frustumCulled = false
              node.wireframe = true

              const mat = new THREE.MeshBasicMaterial({
                color: color,
                wireframe: true,
                vertexColors: THREE.VertexColors,
              })
              const mesh = new THREE.Mesh(node.geometry, mat)
              scene.add(mesh)
            }
          })

```

this model does not play animation. Any help with that?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 18, 2023, 10:51am UTC](https://discourse.threejs.org/t/how-to-draw-an-animated-line-segments-on-animated-model/47009/4 "2023-01-18T10:51:40Z")

</div>

> [@an\_nguyen](#):
>
> `const mesh = new THREE.Mesh(node.geometry, mat)`

Sorry, for not being precise but this needs to be `SkinnedMesh` (and not `Mesh`).

---

<div class="post-metadata">

**Author:** ![an\_nguyen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/an_nguyen/32/32598_2.png) [@an\_nguyen](https://discourse.threejs.org/u/an_nguyen)\
**Post date:** [January 18, 2023, 11:08am UTC](https://discourse.threejs.org/t/how-to-draw-an-animated-line-segments-on-animated-model/47009/5 "2023-01-18T11:08:00Z")

</div>

Thanks for that. But it can’t run with model.

```javascript
fbx.traverse((node) => {
            if (node instanceof THREE.Mesh) {
              node.castShadow = true
              node.receiveShadow = true
              node.material.side = THREE.FrontSide
              node.frustumCulled = false
              node.wireframe = true

              const mat = new THREE.MeshBasicMaterial({
                color: color,
                wireframe: true,
                vertexColors: THREE.VertexColors,
              })
              const mesh = new THREE.SkinnedMesh(node.geometry, mat)
              const wireframeGeomtry = new THREE.WireframeGeometry(mesh.geometry)
              const wireframeMaterial = new THREE.LineBasicMaterial({ color: 0xffffff })
              const wireframe = new THREE.Line(wireframeGeomtry, wireframeMaterial)
              wireframe.visible = true
              mesh.add(wireframe)
              scene.add(wireframe)
            }
          })

```

![Screen Shot 2023-01-18 at 18.06.50](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/6/368034c1a12c582dc8f688b886eb440df61b7336.png)

---

<div class="post-metadata">

**Author:** ![an\_nguyen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/an_nguyen/32/32598_2.png) [@an\_nguyen](https://discourse.threejs.org/u/an_nguyen)\
**Post date:** [January 18, 2023, 11:41am UTC](https://discourse.threejs.org/t/how-to-draw-an-animated-line-segments-on-animated-model/47009/6 "2023-01-18T11:41:38Z")

</div>

Hi @Mugen87 ,  
Do you think I should use Shader?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 18, 2023, 1:38pm UTC](https://discourse.threejs.org/t/how-to-draw-an-animated-line-segments-on-animated-model/47009/7 "2023-01-18T13:38:15Z")

</div>

You can’t have an animated instance of `Line`. So if you want to draw a grid of the normally rendered skinned mesh, you probably need a custom shader or an enhancement of `MeshBasicMaterial` via `onBeforeCompile()`.