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