xeon

Ok… so there is some algebra and geometery involved.

Overview – we have to determine the angle we need to rotate the object to based on the new X-entry point.

Basically you have to determine the (x, y) of where the mouse left the screen, and where its re-enter. These two points will be the base of a triangle with the apex of the triangle being the origin/center point of the object be rotated.

Two key formulas….
distance between two points =√((x2-x1)^2 – (y2-y1)^2 this will give us the lenght of the two sides from where they exit the screen to the objects center as well as the distance between the two exist points. You will have to do this calculation for all three points.

Then you can use the law of cosines : cos(C) = (a^2+b^2+c^2)/2ac….solve for C and then you have the angle you have to animate the object to.

The problem— the time it takes for it to determine the new angle may be slower than the update X-values. So you would have to create some sort of delay on initial re-entry to prevent further rotation until the object is in the new orientation. This too might look like a stutter or at least sluggish…perhaps…have to try it out.

I also tested the standard drag move puzzle and it behaves the same way…so we are fighting that which is sort of a known condition of drag move…. My only thought is at this point is to put sort of a lag/delay on all the move…so on re-entry it just seems normal.

Ok…I have been trying to recreate the problem you are having and I just cant make it happen.
To test the theory out I created a scene with just a cube. I took the Camera and set it so that it does not have any controls. It can’t orbit, cant pan and cant zoom. This was important because often if you drag on the canvas the orbit Camera will take over and that will rotate while outside the canvas and that was a bit confusing.. when I was testing the drag over on a object.

When using this setup dragging over an object stops for me as soon as the mouse leaves the canvas… however…. i created something else to ensure it stops….give it a shot.

basically added the width of the canvas container to be the limiter of the drag.

Hi domjasper….i take it my last bit of information was not sufficient.
Here is a screen shot of the HTML for the slider and the puzzles needed to read it into a variable and make an object move…no apply button needed.

Try this: https://www.soft8soft.com/topic/blender-object-properties-control/#post-54523

Ok…well… like all things web there are many ways to do this. Adding in the mix of Verge3D then you have a few more.

My initial thoughts are you only need two plane objects and a single camera.
The planes will act as layers. The top most layer will be you spelled out name. This will be a created using a sprite sheet with an alpha channel so only the name appears. The bottom layer will be a large texture of all your content.

To navigate you have tbree options…you can move the camera or you can move the plane or you can move the UV map. Choose one that is easiest for you.

Next you will have navigation to control the movement. You can use simple plane objects, that match the curvature of the buttons you have. Give them a completely transaprent texture…place them between the two planes.

If this is the only thing you are doing…you could consider going up to 4K on the content but 2K with HiDPI compositing will probably be good enough.

And all is done.

Super simple, super performant.

All I have are guesses right now….
I would check to make sure your dictionary and associated data are lined up for the expected object…meaning there isn’t something unexpected in the data field. If there was it would explain the “undefined”

You may want to turn of the Verge3d setting “Optimize Mesh Attributes”, a source of your clone object may be getting merged with another object causing the object name to be different than expected.

Have you tested your theory?

Create a simple animation. Create a play animation puzzle to stop its playback after reaching a specific frame. Conduct your next animation and see what happens. You can do this with a simple text cube project….animated the cube in a given direction over a set number of frames.
Then create a v3d project. Use the play animation puzzle and select your cube animation.
Then create another puzzle like animate parameter and conduct another animation operation on it.

If the animate parameter animation doesnt affect the position of the animation controlled in your keyframes…it should work very well and allow you to end your new animation sequence in a state that matches the postion in the key framed aniamtion.

However, if you have a key frame animation and you have to create another anim parameter at specific key frames… you will have to determine if at a specifc frame the key frame animation will stop or not and do you have to resume it when the new animation is done. If the answer is yes…then again you need to make sure your anim parameter aniamtion leaves the cube in the same location you started from so that you don’t get a “skip”.

Alternatively you could just do all this via key frames. Play animation frame 0-30 and then play animation frames 60-90 then when done go back to playing aniamation frame 0-30 etc.

There should be no stuttering unless you programmatically or key frame the stutter to ocurr.

You can get the values of the sliders using the HTML Get Prop Value and the slider HTML ID.
You can then assign it to a variable or do as need to via puzzles.