Material deformation occurs after successful loading of LottieLoader

Questions
, ,
1

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

The threeJS display is as follows

image
image528×524 7.29 KB

2

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

3

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