# How to change the model? In the demonstration animation code,

**URL:** <https://forum.techsoft3d.com/t/how-to-change-the-model-in-the-demonstration-animation-code/4810>\
**Category:** HOOPS Visualize Web\
**Tags:** knowledge-base, animation\
**Created:** [August 5, 2025, 11:12am UTC](https://forum.techsoft3d.com/t/how-to-change-the-model-in-the-demonstration-animation-code/4810 "2025-08-05T11:12:20Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![WangFuYuan199](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@WangFuYuan199](https://forum.techsoft3d.com/u/WangFuYuan199)\
**Post date:** [August 5, 2025, 11:12am UTC](https://forum.techsoft3d.com/t/how-to-change-the-model-in-the-demonstration-animation-code/4810/1 "2025-08-05T11:12:20Z")

</div>

How do I replace it with my own model? And how do I create animations?  
4. Copy and paste this link into your browser: [http://127.0.0.1:5500/animation\_creator.html?viewer=SCS&instance=microengine](http://127.0.0.1:5500/animation_creator.html?viewer=SCS&instance=microengine)  
I changed the suffix and replaced it with my own model: instance = microengine  
But it didn’t work.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/techsoft3d/original/2X/4/4537c7b3f600198cad1ee8fd2bce4406fb5b6e2f.png)

---

<div class="post-metadata">

**Author:** ![tino](https://avatars.discourse-cdn.com/v4/letter/t/9dc877/32.png) [@tino](https://forum.techsoft3d.com/u/tino)\
**Post date:** [August 5, 2025, 12:16pm UTC](https://forum.techsoft3d.com/t/how-to-change-the-model-in-the-demonstration-animation-code/4810/2 "2025-08-05T12:16:54Z")

</div>

This animation demo uses a model and UI that are tightly synchronized so loading a new model is not recommended — unless you plan on making the necessary changes to the UI code. That being said, your models need to be in the folder _animation-creator-main\model\_data_ **and** the model needs to have been converted using HC 2021 SP2 U1 or earlier. This is because the demo uses an older version of Communicator.

As an alternative, our recommendation for learning animation is to use the animation example already available as part of the Communicator package. To view this example, please do the following:

- Launch the server in quickstart by double-clicking _start\_server.bat_ found in the directory _HOOPS\_Communicator\_2025.X.x\quick\_start_
- View the example in the Web Viewer by clicking this URL:  
[http://localhost:11180/animation.html?viewer=csr](http://localhost:11180/animation.html?viewer=csr)

Animation is also covered in our [docs](https://docs.techsoft3d.com/communicator/latest/prog_guide/viewing/animation.html#animation).

---

<div class="post-metadata">

**Author:** ![WangFuYuan199](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@WangFuYuan199](https://forum.techsoft3d.com/u/WangFuYuan199)\
**Post date:** [August 6, 2025, 1:37am UTC](https://forum.techsoft3d.com/t/how-to-change-the-model-in-the-demonstration-animation-code/4810/3 "2025-08-06T01:37:33Z")

</div>

Yes, I want to use this animation tool to edit the animation effects of my own model. The old animation structure is (buffers + samplers + animations), and the new one is (steps). Are there any methods for converting between these two structures? In the Communicator

---

<div class="post-metadata">

**Author:** ![tino](https://avatars.discourse-cdn.com/v4/letter/t/9dc877/32.png) [@tino](https://forum.techsoft3d.com/u/tino)\
**Post date:** [August 6, 2025, 2:02am UTC](https://forum.techsoft3d.com/t/how-to-change-the-model-in-the-demonstration-animation-code/4810/4 "2025-08-06T02:02:36Z")

</div>

The JavaScript source for the new example can be found in _HOOPS\_Communicator\_2025.X.x\web\_viewer\examples\scripts\examples/animation.js_. The actual API is still using buffers, samplers, channels, etc. similar to the older example so there is not really a need for making a “conversion.” The GitHub demo is a bit more polished and presentable than the example included in quickstart but the animation logic is the same.

---

<div class="post-metadata">

**Author:** ![WangFuYuan199](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@WangFuYuan199](https://forum.techsoft3d.com/u/WangFuYuan199)\
**Post date:** [August 6, 2025, 2:21am UTC](https://forum.techsoft3d.com/t/how-to-change-the-model-in-the-demonstration-animation-code/4810/5 "2025-08-06T02:21:49Z")

</div>

Thank you. I found a new animation demo, but why are there no buttons for these contents and operations

![image](https://us1.discourse-cdn.com/flex020/uploads/techsoft3d/original/2X/f/f9afb78eb862ef561e6285ec5ac67e27bad7a98f.png)

 ![image](https://us1.discourse-cdn.com/flex020/uploads/techsoft3d/original/2X/1/15d986ed5c406910262014269161f8a4d2fe6769.png)

---

<div class="post-metadata">

**Author:** ![tino](https://avatars.discourse-cdn.com/v4/letter/t/9dc877/32.png) [@tino](https://forum.techsoft3d.com/u/tino)\
**Post date:** [August 6, 2025, 2:32am UTC](https://forum.techsoft3d.com/t/how-to-change-the-model-in-the-demonstration-animation-code/4810/6 "2025-08-06T02:32:45Z")

</div>

You can think of the GitHub demos as _proof-of-concept_ implementations which may have additional functionalities such as the menu bar you mentioned. The demos/examples included as part of the _quickstart_ module are more **tutorial** in nature with more emphasis on simplicity.

---

<div class="post-metadata">

**Author:** ![WangFuYuan199](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@WangFuYuan199](https://forum.techsoft3d.com/u/WangFuYuan199)\
**Post date:** [August 6, 2025, 2:41am UTC](https://forum.techsoft3d.com/t/how-to-change-the-model-in-the-demonstration-animation-code/4810/7 "2025-08-06T02:41:18Z")

</div>

OK, understood. So, can the keyframe parsing be performed using the old method to parse the new version of the JSON? Or, it is still necessary to implement it by oneself.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/techsoft3d/original/2X/3/3418304613db19afad9c2bec71acb7435233fc64.png)

---

<div class="post-metadata">

**Author:** ![tino](https://avatars.discourse-cdn.com/v4/letter/t/9dc877/32.png) [@tino](https://forum.techsoft3d.com/u/tino)\
**Post date:** [August 6, 2025, 3:02am UTC](https://forum.techsoft3d.com/t/how-to-change-the-model-in-the-demonstration-animation-code/4810/8 "2025-08-06T03:02:44Z")

</div>

The new JSON cannot be imported to the older example as there may have changes to the API. So in that sense, you may have to do manual edits to the JSON.
