Orbit Controls with constraint set to "lock" prevents panning feature

Well, there’s not a simple way how to fix this.

I agree that some gallery / showroom / orbital + transitional controls should be available without much of a hustle :+1:

Thank you and sounds good. What next?

  1. I would tag this question as ā€œansweredā€, because the original problem was solved.
  2. Option to mute user input temporarly is on your backlog?
  3. Shall I close this post?

by user 539536674582036491

Hi @Simeon | blendFX yes go ahead, you can mark it answered but leave it open :slightly_smiling_face:
I’ll take a look at the mute input and/or if there’s just a check missing if all booleans are disabled

@Simeon | blendFX latest versions have added a new option to OrbitControls that allow you to disable user input from interrupting the lerp to a target position

Wow! thank you for taking care of this and I’ll test it as soon as possible. This week I was very busy with other stuff, but one of the task was a proposal for a job for a webGL App, which I’m looking forward to make with needle.

by user 539536674582036491

hey there, now I finally found time for testing and more. It still takes time, to work in TypeScript and not getting unity compiler feedback, but getting errors from browser which mostly point on codelines, which have nothing to do with the real problem. In general I’d say debugging in c# was much easier… but at the end, I found a working solution.

Here’s some feedback for this topic:

by user 539536674582036491

First of all: thank you for this option. Now it works better. I still think, there’s space for improvements.

Now the tween is not interrupted, but user still can interact. This lead to strange behavior: that the position lerp from orbitControls never stopps, because it ā€œwaitsā€ via code for a min distance, but the zooming and touching of user could force against and this and minDist is never reached (until input is stopped).

I solved this with taking away all possible inputs. Ok, but now I have to ā€œwaitā€ until minDist is reached, which feels for me undefined and not adjustable. Currently I wait for 2 seconds, which works, but does not feel fluent. But if I enable it before this savety timer the user could interact before the lerp is finished and the fight begins.

I updated my example to demonstrate:

  1. when focus the table, the controls are activated after 2 secs for savety… but it feels not smooth. You want to interact earlier.

  2. focus at the pictures I enable the input after 1 sec, which is more fluently. But just try to scroll/zoom in shortly after arriving. The tween feels finished, but mostly it is not and then user inputs fights with the tween.

I recommend the lerpSpeed and minDistance should be exposed and even better would be the following:

All these set…Position-functions should have (beside the targetVector) a duration property. With this we could adjust the speed depending from the distance. I could check after click the distance from new view to camera and make the tween longer or shorter depending from the distance → smooth experience.

The current method to make it smooth is maybe not optimal, because at the end is takes very long to reach the target and at the beginning it is very fast. A ease tween with quad characteristics would be best. My opinion.

by user 539536674582036491

by user 539536674582036491

Thanks a lot for the detailed feedback! :muscle:

What exactly do you mean by Unity Compiler feedback?

Can you try to disable hot reload (in the needle engine unity plugin settings)? It might be related to the issue with line numbers not being correct

Would you prefer if input would be disabled completely during the lerp? I think the duration suggestion makes sense and is better than waiting for a distance being reached. EaseInOut would also be a good improvement, totally agree

I try this hot reload thing. I think, input during lerp should be muted in the case, as I described it.

In general in Unity if I declare something wrong or have errors during execution it always was just a doubleClick on the error and mostly it also had a good hint, what’s wrong. Currently I run not seldom into errors and it takes time to find the source. That’s also because I don’t know the syntax of java/type very well…

I mean, it’s maybe a unrealistic whish, but already using Unity as Editor for WebGL is crazy, so it would be even easier if I write c# and it’s converted into .ts in the background. Now it’s the other way round. Maybe some magic which prooves, that the used methods are compatible and sends warnings if not.

Regarding the tweening to new views: Maybe I also overload the usecase of the orbitControls. Shall they really also control the change of views? Just thinking loud.

If I look to the three.js doc I see functions like .lerpVectors and .smoothstep. Maybe I should try to make use of them in my ViewController so that the orbitControl and viewControl is separated.

Nontheless. Slerping often feels not natural if used to change positions.

by user 539536674582036491

When you change the Hot Reload setting you need to restart the local server as well - sorry I forgot to meniton this

Just an example for an error I just run into:

I want to use the vector3 or a part in a function, somewhere in the code I wrote:

this.currentView.newFocus.x

… and there is no problem in Unity. But in Browser I get:

Failed to execute 'linearRampToValueAtTime' on 'AudioParam': The provided float value is non-finite.

I should have written…

this.currentView.newFocus.position.x

by user 539536674582036491

Unity would complain, that newFocus is a gameObject and has no prop ā€˜x’ for example, I’d had to use transform.position instead. But due to the error I was misleaded to some other issues…

by user 539536674582036491

You should get these errors in your code editor already! If you dont then you might want to check your code editor why it doesnt display typescript errors for you (you’re writing in typescript? which editor are you using?)

Linting like this does also exist for webdev!

But I agree the error shown is totally misleading - Are you sure that wasnt caused by something else? Take this as an example. I get the error in vscode and at runtime it only prints undefined but no error otherwise because javascript is not object oriented and it’s perfectly fine to add or remove fields to objects at runtime (except not what we expect here which is what Typescript is useful for)


image.png

yes. i’m pretty sure, this error was caused by this mistake.

ok… ā€œLintingā€ → now, I’ve a word for these useful hints. I too use visual studio code. But for people who are mainly interested in sending vectors from a to b, start animation and save some states, these IDEs or intelligent editors + git, npm, extension, etc. are definitely confusing. Due not daily needed, I forget some things and often, when I have a stable pipeline and work, let say, half a year on it and then update some parts (because I have), not seldom the pipeline brakes due dependency here and another error there :wink:

Is there a special extension for vscode you would recommend? If I search TypeScript there are thousands.

by user 539536674582036491

I also updated my demo: Minimal

It’s still my training area so I thougt, why not trying to make this tweening thing. It works but again, I don’t get to the point of ā€œperfectā€.

On the bottom there are two buttons to switch between old (which uses the orbitControl) and the new one using my viewControl. It make use of the mentioned functions (.lerpVectors and .smoothstep) and work as expected, but they again collide with the ā€œlockā€ feature.

The chromeball shows the position of the lookAt Object. My tweens only work together with the ā€œlockedā€ setting (which are enabled) but than panning won’t work.

by user 539536674582036491

Just applied some of your feedback to make the position change a bit smoother. I hope this will be helping you :slightly_smiling_face:
20231116-170520_Orbit_Controls_Lerp_-_Google_Chrome-logo.mp4

The ā€œallowInterruptā€ set to false also prevents any camera changes while in transition. I also added a duration field which is exposed.
There will also be an explicit event exposed for when the target has been reached (in case you need it)