[SOLVED] PCUI VectorInput Data-Binding

Help & Support
1

Hi there, :slight_smile:

I’m toying with the impressive PCUI library, combining it with React.
I’m having some trouble two-way data-binding a <VectorInput> via an Observer object. It seems I have to represent a Vec3 as a string "[1, 2, 3]" in the Observer object, for the <VectorInput> to show its values. But when I type in new values in the browser, it apparently changes the property in the Observer’s .json() to an object type. { 0: 1234567 }

String in becomes object out - maybe an array type? I’m not sure.

Been looking through the PlayCanvas Viewer project, but can’t find any examples binding from VectorInput to Observer object.

Got any tips? :smiley:

2

@Elliott @vaios Can you help with this please?

3

Perhaps it might be easier to work through 3 numeric input types, saving in individual properties

4

Doh, I figured it out… Instead of setting the vector property in the observer object to a string type as seen in PlayCanvas Viewer:

{ vector: "[1, 2, 3]" }

… set it as an object type with the following sub-properties:

{ vector: { 0: 1, 1: 2, 2: 3 } }

The VectorInput will work via the sub-properties when bound to “vector”

5

Hi @damvad ,

Sorry for the confusion with the playcanvas viewer. I’ve gone ahead and updated that to use the object format too: https://github.com/playcanvas/playcanvas-viewer/pull/143/files.

1 Like
6

Hi @Elliott ,

Thanks for the reply and the quick-fix! :smiley: Cool