Combining CameraControls and gsap with FlyControls?

FlyControls is not intended to work in conjunction with the other camera controls out there in the ThreeJS package, i get that.

but how would i combine CameraControls with FlyControls, using CameraControls as the general interface to my business logic’s FROM FlyControls?

my sources are here :

and a live demo is here : 3D file manager on

oh, and you might be happy to learn that my sources are entirely MIT-licensed :slight_smile:

well, i narrowed it down to this conundrum :

FlyControls can manipulate the viewing angle, so can CameraControls.
i want to reach a state where if i don’t use CameraControls’ ability to change the viewing angle of the world you’re looking at, for FlyControls to temporarily (while the mouse button is down) take over this task.

but i’m having huge difficulty getting the camera target from either FlyControls or the object in my logic.userInterface/na3D.source.js (which is scope.object inside FlyControls). :frowning:

i could really use some help just about now…

The built in controls objects don’t work very well with multiple controls enabled.
You can get away with switching between them etc. with judicious enable/disable, and maybe .reset(), but you may end up doing a lot of extra work. My suggestion would be to cut and paste the parts of each control that you like and make your own custom controller. This will give you full control over event handling/routing, or even, just copying them into your local tree and modifying them to expose the behaviors you need. I think they are designed more as a baseline implementation.

Additionally from a design perspective… Perhaps you could reduce the rounded corner radii… I feel like the complex structure of the borders etc. distracts from the 3d content, and takes up more real estate which could be better used in a larger 3d presentation area. Perhaps you could make the entire background the 3d area, and float the 2d UI on top?
The shadowing and transparency are a bit attention grabbing too… and heaving shadows/transparency can negatively impact the browsers compositing speed.

Cool concept you have going!

all i really need (right now at least) is a way to inquire FlyControls about what it’s currently looking at.

and as for the concept; thanks for the compliment, and yes, it’s also possible to use the 3D interface (once done) as the primary gateway, to shun the rounded 2D CSS borders, etc.

my system is designed to be very flexible, with minimal overhead for it’s users (programmers and designers). :slight_smile:

I’m still not 100% clear on the question but:

To sync the OrbitControls with the current camera manually… you can set its .target to 0,0,-something * camera.quaternion + camera.position,0,-10).applyQuaternion(camera.quaternion).add(camera.position);

Great!! :slight_smile:

https://github .com/NicerEnterprises/NicerApp-WebOS/blob/b2cd128822381bc67f93068b65f6bca53f10b98e/NicerAppWebOS/logic.userInterface/na3D.source.js#L365

i had already come to a solution myself, which involved selectively bypassing the .update() of the .targetEnd in t.cameraControls…
but the thing is; if i add threejs as fork to my own sources at github, my package grows too large for github’s storage space…

so this is really a life saver…
thanks, @manthrax :slight_smile:

with all due respect folks,
to mark my posts listing my own framework as spam,
is not only inaccurate,
it’s petty. very petty.

there’s enough financial hurdles in advertising already! :stuck_out_tongue:

and frankly, for ThreeJS to ship with about a dozen camera position handling objects,
that don’t work well together,
is a clear cut sign of immaturity of your code.

sorry, but someone has gotta say ‘i won’t be spending much time digging into the ThreeJS sources just to get basic functionality to work well enough together to be stacked into new functionality’. and i’m saying it.

I understand your frustration, but please realize… when you make a statement like that… you are insulting the work of 1000s of programmers, artists, scientists, and engineers, who have spent the last couple decades building this free library for you to flail around in…

Then there are those of us here, literally volunteering our time to help you when you inevitably get stuck on something trivial.

You may think there are better approaches, and you are welcome to contribute those back to the ecosystem, or indeed build your own feature rich library that can fluidly compose simple modules that have little intrinsic relationship to each other., or conversely perhaps you may benefit from something a little higher level like R3F/Unity/Unreal or similar?

R.E. pulling all of threejs in as a dependency in your project… probably unwise. I usually just pull the minified library and whatever modules I need… or load them from CDN.

Sorry one of your promo posts got marked as spam… Feel free to dm it to me and I can take a look and offer you feedback! :slight_smile:


1 Like

@manthrax :

yes, i hate to have to get insulting towards the givers of a free library as well.
but in some cases, a slight slap on the wrist of some people’s egos does get them to change their policies, in ways that are clearly beneficial to themselves and their user community.

as for feedback, i much welcome that at any given time, here, or in email to; i usually respond within 48 hours.
and the demo link is up again too :slight_smile:

@ staff :

thank you for restoring my posts! :slight_smile:
(i had 'm up not so much to promote my own product, but rather as a showcase of my 3D folders viewer, as you might have guessed already).

@ everyone :

i’ll keep developing for ThreeJS now, and i will be contributing code back into your eco system as well, as soon as i have something done and properly debugged.
my 3D folders/data viewer app works a whole lot better now than it did just 3 days ago, and i thank you all for that :slight_smile:

1 Like