Material deformation occurs after successful loading of LottieLoader

code demo :

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

const lottieLoader = new LottieLoader()
lottieLoader.setPath('animation/').load('circle.json', function (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)

Static resources are as follows:

The threeJS display is as follows

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

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 )

1 Like