PRO EDITOR

Stop Animation on Last Frame

In this article you will learn how to script your 3D animation to stop on its last frame.

First of all, you will need to open the PRO Editor. You can do this by creating a new project or open an existing one from the dashboard and clicking on the PRO Editor button in the top bar.
In the PRO Editor window click File on the top bar, select Import and upload your 3D object.
Click on New button on the script panel.
Set up the name of your script and click Edit to open the code editor.
Paste the following code into the editor:
var mixer = new THREE.AnimationMixer( this );
const clock = new THREE.Clock();
var clip = this.animations[ 0 ];
var action = mixer.clipAction( clip );
action.loop = THREE.LoopOnce;
action.clampWhenFinished = true;
action.play();

function update( event ) {
	if (mixer) {
		mixer.update(clock.getDelta());
	}
}
Close the code editor and click File -> Publish to export your scene.
The exported scene will be downloaded on your computer as a zip archive.

You only need the app.json file you will inside the archive.
Go back to the standard editor, click on the JSON MAE object type on the left panel and upload the JSON file you exported from the PRO Editor.
You will see your 3D model on the scene. Now you can preview it using in the editor or try it out on a mobile device.
Related Topics: