How to animate wireframe for gltf object

Questions
, ,
1

Hey guys! i added additional wireframe but it doesnt want to animate :frowning: how i can fix it?

var loader = new THREE.GLTFLoader();

loader.load(
MODEL_PATH,
function (gltf) {
  model = gltf.scene;
  let fileAnimations = gltf.animations;

  model.traverse(o => {

    if (o.isMesh) {
      o.castShadow = true;
      o.receiveShadow = true;
      o.material = materialu;
      o.wireframe = true;
      glTFGeometry = o.geometry;
    }

  });
  model.scale.set(7, 7, 7);
  model.position.y = 0;
  model.rotation.y = 2300;

  scene.add(model);

  var geo = new THREE.EdgesGeometry( glTFGeometry ); // or WireframeGeometry
  var mat = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } );
  var wireframe = new THREE.LineSegments( geo, mat );
  model.add( wireframe );


  loaderAnim.remove();

  mixer = new THREE.AnimationMixer(model);

  let clips = fileAnimations.filter(val => val.name !== 'locator3|Swimming|BaseLayer');
  possibleAnims = clips.map(val => {
    let clip = THREE.AnimationClip.findByName(clips, val.name);

    clip.tracks.splice(3, 3);
    clip.tracks.splice(9, 3);

    clip = mixer.clipAction(clip);
    return clip;
  });


  let idleAnim = THREE.AnimationClip.findByName(fileAnimations, 'locator3|Swimming|BaseLayer');

  idleAnim.tracks.splice(3, 3);
  idleAnim.tracks.splice(9, 3);

  idle = mixer.clipAction(idleAnim);
  idle.play();

},
undefined, // We don't need this function
function (error) {
  console.error(error);
});
2

What you are trying to achieve is unfortunately not possible. Read the following topic for more details:

2 Likes
3

mesh.material.wireframe=true should still work, though, as the link says.

4

Thank you, guys! i made wireframe as texture oceandev.io