In this guide, we'll show a few common controls that allow users to control the playback of a 3D model animation in the display-3d-model component. This includes the ability to:
Start playing and pausing a 3D model animation
Moving the playback position forwards or backwards
Setting the playback position to a specified point
The view we'll build will look as follows:
Developer notes:
Load and display the 3D model in your view
Play and pause the 3D model animation
To play and/or pause the 3D model animation, we'll add the following buttons to our view XML:
In the view JS, we'll initialize a global variable for isPlaying which is used to dynamically show and hide the play and pause buttons.
main.js
var isPlaying = false;
// This function is called when the app navigates to this view (using a link)
function init() {
// initialize any data here that should be available when the view is shown
view.scale = 0.1;
}
Next, we'll need to define the logic for playing and pausing the animation. In the view JS, we'll add two functions and add a playheadPosition variable to track the elapsed playback time:
main.js
var isPlaying = false;
var playheadPosition = 0;
// This function is called when the app navigates to this view (using a link)
function init() {
// initialize any data here that should be available when the view is shown
view.scale = 0.1;
}
// This function is called when the user returns to this view from another view
function resume(from) { }
function playAnimation() {
console.log("Playing animation")
// Set the component's playhead to the specified playhead position
component.display3dModel({ id: "example" }).setPlayhead(playheadPosition);
// Start the animation from the defined playhead
component.display3dModel({ id: "example" }).animationStart();
// Hide the "Play" button and show the "Pause" button
isPlaying = true;
}
function pauseAnimation() {
console.log("Pausing animation")
// Stop playing the animation
component.display3dModel({ id: "example" }).animationStop();
// Show the "Play" button
isPlaying = false;
// Store the current playhead position
playheadPosition = component.display3dModel({ id: "example" }).getPlayhead();
}
Move the playhead forwards, backwards or set it to a specific point
Here we are adding controls to move the animation playhead position forwards and backwards by a set amount, as well as directly specifying the playhead position.
We'll update the relevant part of the view XML code to the following:
In the view JS, we'll define the skipAnimation and setPlayhead functions:
main.js
function setPlayhead() {
// Allow the user to enter a new position in ms
var position = journey.dialog.input({
title: 'Set Playhead position',
message: "Enter the value in ms",
inputValue: playheadPosition.toString(),
});
if (position != null) {
// Store the new position
playheadPosition = Number(position);
// Show the "Play" button
isPlaying = false;
}
}
function skipAnimation(timeValue) {
// Update the playhead position
playheadPosition = playheadPosition + timeValue;
// Automatically start/continue playing from this new position
playAnimation();
}
Complete view code
Below is the complete View XML and JS code used in this guide:
var isPlaying = false;
var playheadPosition = 0;
// This function is called when the app navigates to this view (using a link)
function init() {
// initialize any data here that should be available when the view is shown
view.scale = 0.1;
}
// This function is called when the user returns to this view from another view
function resume(from) { }
function setPlayhead() {
// Allow the user to enter a new position in ms
var position = journey.dialog.input({
title: 'Set Playhead position',
message: "Enter the value in ms",
inputValue: playheadPosition.toString(),
});
if (position != null) {
// Store the new position
playheadPosition = Number(position);
// Show the "Play" button
isPlaying = false;
}
}
function skipAnimation(timeValue) {
// Update the playhead position
playheadPosition = playheadPosition + timeValue;
// Automatically start/continue playing from this new position
playAnimation();
}
function playAnimation() {
console.log("Playing animation")
// Set the component's playhead to the specified playhead position
component.display3dModel({ id: "example" }).setPlayhead(playheadPosition);
// Start the animation from the defined playhead
component.display3dModel({ id: "example" }).animationStart();
// Hide the "Play" button and show the "Pause" button
isPlaying = true;
}
function pauseAnimation() {
console.log("Pausing animation")
// Stop playing the animation
component.display3dModel({ id: "example" }).animationStop();
// Show the "Play" button
isPlaying = false;
// Store the current playhead position
playheadPosition = component.display3dModel({ id: "example" }).getPlayhead();
}
Please refer to the . The same notes apply to this guide.
Please refer to . We'll use the same foundations from the first guide in the below guide.
Note that we have set the attribute to false, since we want users to be able to control the playback manually. We have also added an attribute, which is used by to identify the component in the view XML.
Note that the above functions, to start and stop the animation playback, make use of multiple of display-3d-model.
