Back to the Shapespark home page

UV modifiers to animate texture

How we can use UV modifiers to animate texture in model.

Regards

Hi!

You could include body-end.html file with custom script. In the script you should find the material (or materials) you wish to animate, and call setUvOffsetAndScale on that material on each frame.

You can find additional information about extending Shapespark with custom scripts at our GitHub:

The example script for texture animation:

<script>
  var viewer = WALK.getViewer();

  var material;
  var offsetX = 0

  function animateMaterial() {
    offsetX += 0.01;
    material.setUvOffsetAndScale(offsetX, 0, 1, 1);
    requestAnimationFrame(animateMaterial);
  }

  function onSceneLoadComplete() {
    material = viewer.findMaterial('Painting 01');
    material.setUvOffsetAndScale(0, 0, 1, 1);
    requestAnimationFrame(animateMaterial);
  }

  viewer.setMaterialEditable('Painting 01');
  viewer.onSceneLoadComplete(onSceneLoadComplete);
</script>
2 Likes

Thansk for reply. i am bit confuse. please share direct link of animation.

I’m sorry if my response was confusing. If I understand you correctly you would like to use UV modifiers to transform (move or stretch) texture in time. For example:

movingUvs

We don’t have any in depth example or tutorial of texture animation via UV modifiers.
To achieve such texture animation with UV modifiers you must use custom scripts, and extend Shapespark with custom javascript code. Custom scripts must be included in body-end.html file that can be uploaded only in the Standard and Plus plan.

You can find more examples how to extend Shapespark with custom scripts in customisation category:

2 Likes