i’ve got a bug in https://new.nicer.app/NicerAppWebOS/logic.vividUserInterface/v6.y.z/3D/na3D.js?c=20240203-174902 around or at the line that has a comment set to “ALSO won’t work in either case”
live demo at NicerApp WebOS Unified Interface
i’ve tried re-creating this bug on codepen.io and jsfiddle.net, but that has proven impossible too.
so i’m asking people here to please take a look at my code.
perhaps there’s something i’m obviously missing in my code, coz i’m still relatively very new to the world of 3D code.
Firstly, the line you’ve linked is wrapped in if (false) { - it will never be called.
Secondly, it’s hard to deduce what you mean by “doesn’t work” - what’s happening / not happening? As mentioned in earlier threads, even when ignoring the lack of formatting, naming, and general single-file structure – there’s no feasible way one could dedicate enough time to debug the entire 3000+ lines of someone else’s code 
As for the line you’ve specified, the order of calculations goes as follows in said line:
- You set target to
0.0, 0.0, 0.0 (so the vector is now an “arrow” of length zero, pointing in no direction.)
- You
applyQuaternion to said target - ie. you rotate a zero-vector by some quaternion. Rotation of a zero-vector is equivalent to rotating a point around itself, and rotating a point around itself is equivalent to the original point. So the output of that applyQuaternion will always just be 0.0, 0.0, 0.0 in this case.
- You add
.position to the result of the quaternion rotation, resulting in target being always set to .position.
Long story short:
target.set(0.0, 0.0, 0.0).applyQuaternion(target.camera.quaternion).add(target.camera.position);
Is equivalent to:
target.set(0.0, 0.0, 0.0). // -> target = (0.0, 0.0, 0.0)
target.applyQuaternion(target2.camera.quaternion); // -> target = (0.0, 0.0, 0.0)
target.add(target2.camera.position); // -> target = target2.camera.position
Is equivalent to:
target.set(target2.camera.position);
Ie. you’re never applying the actual rotation - rotation has to be applied around some origin point and by setting the vector to 0.0, 0.0, 0.0, you’re unsetting the origin point. If you’re trying to simulate first-person view rotation - you can try setting target to a very short forward-vector instead of 0.0, 0.0, 0.0, that way you can still apply the rotation properly.
yeah, i know, my code lacks clarity here and there at the moment, but it won’t in it’s final milestone releases.
what i’m really looking for is an example to get three.js to work with either FlyControls or OrbitControls + CameraControls to fly around a scene in a weightless 3rd-person gaming style.
so far, i’ve not been able to find such a piece of example code.
and i’m still experimenting with the current version of my na3D.js, hoping to find a path towards a reliable solution for this 3rd-person gaming viewing style of a scene.
i’m going to need drag and drop move-meshes-around support as well 
i’m really hoping someone here can help us all achieve this three.js milestone.
well i’m nearly half-way to a full solution for these problems i was facing…
(i find Three.JS a great platform to work with btw)
adjusting the FirstPersonControls a bit did the trick for me)
live demo (still evolving) : NicerApp WebOS Unified Interface
code :
(1) https://new.nicer.app/NicerAppWebOS/3rd-party/3D/libs/three.js/examples/jsm/controls/FirstPersonControls.js (modified, MIT-licensed, not included in github repository that’s listed below here because of very real size restrictions on github repositories)
(2) https://new.nicer.app/NicerAppWebOS/logic.vividUserInterface/v6.y.z/3D/na3D.js (business logic code to translate a folder recursively, with file info, to three.js)
(2a) https://new.nicer.app/NicerAppWebOS/apps/NicerAppWebOS/applications/2D/mediaPlayer/ajax_getFileSystemIndex.php (output)
(2b) NicerApp-WebOS-v6.y.z/NicerAppWebOS/apps/NicerAppWebOS/applications/2D/mediaPlayer/ajax_getFileSystemIndex.php at 0676ea5b0eec5eca42448126f9a5b139fea7f559 · NicerEnterprises/NicerApp-WebOS-v6.y.z · GitHub (source part 1)
(2b1) NicerApp-WebOS-v6.y.z/NicerAppWebOS/functions.php at 0676ea5b0eec5eca42448126f9a5b139fea7f559 · NicerEnterprises/NicerApp-WebOS-v6.y.z · GitHub (source part 2)
(3) for the complete package, see GitHub - NicerEnterprises/NicerApp-WebOS-v6.y.z
i’ve switched my sources back to full MIT license status, and won’t be changing it back to closed source. i have more clarity now on what i want to achieve during the rest of my life 
i figured out something today.
by being on the cutting edge of whatever technnological development, one only seriously hurts their own economic chances.
i’ll be adjusting my business- and tech-development plans accordingly starting right now.
it means i’ll have to let go of Three.JS, as the navigation controls are still very immature. sorry.
If you are using FlyControls to to create something that is like “flying” an airplane, there are other options that can be used in along with OrbitControls.
To simulate the rotation of an airplane, you simply need to create a couple of 3D objects, link them together and then input pitch, bank and yaw changes to your child object, get the combined result and store it into the parent object. It’s about 10 lines of code and three.js does all the work for you. (I had previously created my own lengthy rotator routine using Napier equations and was having trouble adding yaw, until I realized that I could use three.js to make all these computations for me.)
And if you don’t need all the features of OrbitControls, you can create your own camera rotator in three.js using linked objects and a handful of lines of code.
ok, i’ll give it another try
some example code would be of great help tho! 
Sorry! I didn’t see your reply.
Here is a CodePen example which shows how to create a rotating airplane. You can use the arrow keys to pitch and bank the airplane and the z/x keys to yaw the airplane.
The important lines are commented with ###. The two 3D objects are defined at lines 23-24. These objects are modified and linked at lines 63-65. THREE.Quaternion() is defined at line 67 The object rotation is performed by the rotAirObj subroutine at 140-152.
Here is a more detailed Demo from my webpage. I have added labels and a few commands to rotate the aircraft in a level bank. But the rotation portion of the program is the same.
Let me know if you have any questions or trouble viewing the CodePen (which has been a problem for some).
ADDITION
You can also reposition the camera so that you are inside the airplane, looking out. I have not tried this with OrbitControls.js - but have used a custom camera mount (once again a couple of linked objects) that involve only a few lines of code to create. I will see if I can get do this with OrbitControls.
Then you will have your own version of Fly.js that I think acts more like an airplane (or a spaceship).