# Material deformation occurs after successful loading of LottieLoader

**URL:** <https://discourse.threejs.org/t/material-deformation-occurs-after-successful-loading-of-lottieloader/58549>\
**Category:** Questions\
**Tags:** loaders, textures, animation\
**Created:** [November 25, 2023, 9:39am UTC](https://discourse.threejs.org/t/material-deformation-occurs-after-successful-loading-of-lottieloader/58549 "2023-11-25T09:39:19Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bryce](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bryce/32/42336_2.png) [@Bryce](https://discourse.threejs.org/u/Bryce)\
**Post date:** [November 25, 2023, 9:39am UTC](https://discourse.threejs.org/t/material-deformation-occurs-after-successful-loading-of-lottieloader/58549/1 "2023-11-25T09:39:19Z")

</div>

code demo :

```
import { LottieLoader } from 'three/examples/jsm/loaders/LottieLoader.js'

const lottieLoader = new LottieLoader()
lottieLoader.setQuality(2)
lottieLoader.setPath('animation/').load('circle.json', function (texture) {
	console.log(texture)
	const geometry = new THREE.PlaneGeometry(1, 1)
	const material = new THREE.MeshStandardMaterial({ roughness: 0.1, map: texture })
	const mesh = new THREE.Mesh(geometry, material)
	scene.add(mesh)
})

```

Static resources are as follows:  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/f/5f78b8d7f4ce4cf203913f4f8e0320e4f4a4a4d3.png)

The threeJS display is as follows

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/6/e61a46f73e84be25f14c83591085b5883dc86f55.png)

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [November 28, 2023, 6:50am UTC](https://discourse.threejs.org/t/material-deformation-occurs-after-successful-loading-of-lottieloader/58549/2 "2023-11-28T06:50:10Z")

</div>

Hard to tell without actually seeing the plane - how does the scene look if you render it with `background.color = new THREE.Color(0xff00ff);` ?

---

<div class="post-metadata">

**Author:** ![Arthur](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arthur/32/22954_2.png) [@Arthur](https://discourse.threejs.org/u/Arthur)\
**Post date:** [November 28, 2023, 1:15pm UTC](https://discourse.threejs.org/t/material-deformation-occurs-after-successful-loading-of-lottieloader/58549/3 "2023-11-28T13:15:02Z")

</div>

If it’s supposed to look like a circle, the issue is probably that your plane is square and your animation has non square dimensions. Instead of a square geometry, you should use a rectangular one with the same aspect ratio as your animation.  
Easiest way to do this is to create your geometry like this: `new PlaneGeometry( animationWIdth, animationHeight )`