How to draw an animated line segments on animated model?

Questions
,
1

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.

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
Screen Shot 2023-01-18 at 16.02.04749×522 31.9 KB

i

2

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

Do you mind trying this approach instead:

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

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

1 Like
3

Thank so much @Mugen87 ,
But when I add

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?

4

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

5

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

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

6

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

7

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().