Tween a cube

Help & Support
, ,
1

I would like to move a cube after hitting the HTML button in UI.
I used HTML button scripts from the tutorials page.
I would like to tween (move the box from position A to position B).
I’ve uploaded tween.js into the project. Should I bind it to the root or will it work without any binding?

image
image316×515 10.5 KB

When I try bind that tween.js to ROOT I fail because I can’t see that script from a list. I`m not sure why.

2

Maybe I will ask differently.

When I assign JS to a cube with changing position then it works correctly.
How could I pause/resume animation from HTML button level?

            var obj2 = pc.app.root.findByName('door_loc');
            if (obj2 && obj2.render) {
                obj2.tween.stop();
            }

Why it doesn`t stop my tween animation which is bonded to “door_loc” named object?

3

So I try to find information on how to communicate HTML button with object tween. I don`t know how to callout it to get stop() function.

4

Can you please post a public project of what you are trying to do? It will make it easier for the community to help

1 Like
5

https://playcanvas.com/editor/project/996067

I would like to open and close the door with an HTML button using the Tween library.

The best would be when one button would open and close the same door.

I would want to use a few buttons at the same time. For now, only the first button works correctly.

For now, I only made what is visible on that scene.

When I put code into html-handler.js to add second button or to communicate with ‘door_loc’ object where should be Tween then I couldn’t find it to use stop() on it.

So if you will tell me how to find that tween object from ‘door_loc’ model then I will have a possibility to steer it with HTML buttons.

6

Just focusing on the door open/close part:

You want to have tween the door opening/closed based on the state of the door. For simplicity, I would create a new script that controls the animation of the door and have the HTML button call a function to toggle the state.

Here’s the project that I made from a fork of yours: https://playcanvas.com/project/996128/overview/f-functional-template-01

Key points:

  • I’ve created a new script called openCloseDoor.js that has the logic for the door opening/closing tweens
  • I’ve added logic so that the duration of the tween is dependent on how much the door is open. This stops it doing a slow tween when it’s partly open
  • The tween manager can only tween JS objects hence the angle of the door is wrapped in an JS object

2 Likes
7

Thanks a lot. It looks amazing.

8
  • I’ve added logic so that the duration of the tween is dependent on how much the door is open. This stops it doing a slow tween when it’s partly open

Where did you add your code, I can see only that openCloseDoor.js file but after uploading that script it doesn’t work as in your forked version (the door doesn’t rotate after hitting the button). What should I change more to have the same what you reached? I`m trying to understand this.

Thanks for your effort in helping me. Much appreciated.

Edit: it works thanks. All understood.

9

Last question to this topic. What if I would like to disable the bottom as long middle opening is not fully open?

I would like to open the drawer with the bottom button but only when the doors are fully opened.

10

You can disable whatever you need after the user presses the button and the tween has a .complete callback that you can use to know when it has finished: GitHub - playcanvas/playcanvas-tween: A tween library for PlayCanvas

On this callback, you could fire an app wide event or set a property in the script and whatever is controlling your UI can show/hide what it needs to when the tween is complete.

1 Like
11

hello yaustar the same thing i want to create like opening and closing doors or some meshing like shelfs drawer. the above project animation is not working will you tell me where i can find that project?

12

You can fix that proejct simply by changing the tween library: