1. Get the model animation

2. Play the model animation

3. Stop playing the model animation

In the process of building 3D visualizations, I found that many models have built-in animations. Many models have built-in animations during the production stage. If the model has built-in animations, you can use API calls to play them in ThingJS.

For example, in the official example, the dbclick event is used to open the cabinet, and the click event is used to close the cabinet with the right mouse button.

1. Get the model animation

Start by using the animationNames property to get what animations are attached to the 3D visualization model.

console.log(obj1.animationNames); // Outputs the animation of model obj1 in the log windowCopy the code

Some of the models in the CampusBuilder model library are also animated, such as cabinets, people, animals, etc. You can see if the model is animated by looking at its properties in CampusBuilder.

2. Play the model animation

Use the playAnimation interface for animation playback. After loading the 3D visual park, I placed a cabinet in the 3D visual park as an example, such as setting and opening animation for the cabinet. LoopType is used to control the loopType, such as the cabinet opening animation shown below.

Cabinet model open door animation code is very simple, the code is as follows:

Function playAnim() {reset(); / / function playAnim() {reset(); $('.warnInfo3 ').text(" Create cabinet model and play cabinet opening animation (open1) "); Cabinet = app. Create ({type: 'Thing', name: 'cabinet ', url: 'https://www.thingjs.com/static/models/cabinets/47f34ce2c5a14b6d8fd4e80974394a55', position: [0, 0, 0], angles: [0, 0, 0], complete: function () {$('.warnInfo3 ').text(" open1 "); Cabinet. on('click', function (ev) {// Watch an object app.camera.fit(cabinet); Cabinet. playAnimation({name: 'open1', // LoopType // thing.looptype.Repeat loop // thing.looptype. Thing.looptype. no, // no loop}); }); }})}Copy the code

You can also play the model animation backwards.

obj.playAnimation("animation"); 
Copy the code

You can also play multiple animations simultaneously;

Obj. PlayAnimation ({name: ["open1", "open2"], loopType: thing.looptype.PingPong, speed: 0.4});Copy the code

3. Stop playing the model animation

Use the stopAnimation interface to stopAnimation playback.

// When an object has more than one animation, the 'stopAnimation' interface will stop all animation playback obj.stopAnimation(); // Specify which animation to stop obj.stopAnimation("open1");Copy the code

Model animation is an important part of 3D visualization project development. I don’t use 3D software modeling myself, so using models from the ThingJS model library is very convenient for teams that don’t have modelers. The rational use of model animation technology can make 3D visualization scenes more vivid and interactive effects better. After learning to set model animation, you can continue the subsequent development of 3D visualization projects.