Rotating an object using scrollbar

Help & Support
, ,
1

Hello everyone

I apologise for my ignorance, but am stuck on a really simple thing. I have a rigged character that I want to control using scrollbars. Essentially this is in order to make an anatomy app to teach students about body movements. Hence I want scrollbars that can be used to flex joints etc.

Please can someone give me a very simple guide to how to write a simple bit of code to couple the value of a scrollbar to the rotation of an object. I am pretty new to Playcanvas

Thanks in advance

Steve

2

If you get a reference to the scrollbar component, you can get the normalised position of the scrollbar (between 0-1) ScrollbarComponent | PlayCanvas API Reference

At which point, you can set the rotation of a model based on that value.

3

Thanks. As a complete Javascript novice, please could you give me some more detail on what I need to do?

Thanks again

Steve

4

Do you have an example project to work from?

5

Sorry, no not yet. An example using a simple cube should be fine though. I can extrapolate from that

Cheers

Steve

6

Office hours video:

Example project: https://playcanvas.com/project/946512/overview/f-rotate-using-scrollbar

2 Likes
7

Amazing. I’ll let you know how it goes. Many many thanks

8

Working very nicely. A question about scrollbars. I don’t want to use the full range of the scrollbar, only the 0.3-0.7 interval. Is there a way to alter the maximum and minimum values on the scrollbar? I have clamped the value I use for rotation, but it leaves areas on the left and right hand sides of the scrollbar that are not used.

Thanks

9

Solved it with a bit of simple maths, but I still wonder if there is a range function for the scrollbar?

10

No, you will have to either reduce the rotation range for the normalised value of 0-1 (eg, instead of 360 degrees, you do 270) or convert the range 0-1 to 0.3-0.7 (v = v * ((0.7 - 0.3) + 0.3).

11

I’ve made pretty good progress on this front but need a bit more help please. Using the method you provided, it seems I can only rotate each joint in one plane. Ideally, I need to be able to rotate each joint in all three planes using scrollbars. It seems that the set value overrides any rotation produced by another scrollbar. I attach a link to my project for you to look at.

https://launch.playcanvas.com/1450328?debug=true

Thanks

Steve

12

Regarding this section of code in my project:

// update code called every frame
ScrollBarRotate.prototype.update = function(dt) {
    var value = this.entity.scrollbar.value;
    this.modelEntity.setEulerAngles(0, value * 360 + this.rotationOffset, 0);
};

What you would have instead, reference to all 3 scrollbars (one for each rotation axis, X Y Z) and use setLocalEulerAngles instead to set the angle on each axis based on each scrollbar’s value

13

Please could you explain how I would reference each of the three scrollbars? Thanks

14

Think I get it. You’d have the same code attached to each of the three scrollbars?

15

More that the script would reference all 3 scrollbars so it can use all the values at once for setting the rotation of a single entity

16

I’d really appreciate it if you could share an updated version of your zombie with three scrollbars to control rotation. Think I’m struggling because there aren’t too many basic tutorials on play canvas scripting aimed at beginners. Can you recommend anything? There’s lots on JavaScript but I’m struggling with how to apply this to the playcanvas environment.

Thanks

17

I’m about to put this on the website for developer.playcanvas.com which is a pretty decent crash course on PlayCanvas: https://portal.gitnation.org/contents/playcanvas-end-to-end-the-quick-version

Perhaps that would be the best place to start if you already have programming experience?

There are also some community made PlayCanvas tutorials on YouTube that would be worth looking too.

18

Thanks I’ll give that a watch. If you have time, an example of rotating with the three scroll bars would be greatly appreciated. I think once that issue is sorted I’ll be in a position to get the whole thing done. Appreciate your help hugely.

19

I’ve created a new project https://playcanvas.com/project/951572/overview/f-rotate-using-scrollbars

This time you need to attach the script to the entity that is being rotated and reference the scroll bars for each axis.

In this example, I used the neck to rotate so you can find the script setup there

image
image1920×976 75.9 KB

20

Thanks. I’ll try not to pester you any more, but this is such a good platform that I really want to make it work for my purposes.
Steve