Thanks @puxiao. I checked the camera-control out (your example that is) and so far I like its behavior and the way it works. I will try to create a group of meshes around it and see how it behaves with a group and let you know how it goes.
Regards
Hi @puxiao
Thanks for the suggestion. I started using it and it works really nice in terms of in place rotation which is the main thing i needed. So it does not always rotate around the center of the scene which is prety cool..
The only issue i have is just like OrbitController it does not rotate 360 degrees in all angles due to makesafe mechanism. However my project requirement is that it should rotate in all angles similar to trackBallControl. My question is can that be achieved we CameraControl as well?
Thanks
try:
controls.minPolarAngle = -Infinity;
controls.maxPolarAngle = Infinity;
Thanks @puxiao. I tried your suggestion:
controls.minPolarAngle = -Infinity;
controls.maxPolarAngle = Infinity;
But it did not work. I still have the same limitations in rotation. It would have been great if camera-controls was based on TrackBallController instead of OrbitController (so it could rotate every where and in 360 degree rotation. I set these right when I defined the controller. Is there anything else I should do for the above params?
I know I have tried the minPolarAngle , and maxPolarAngle attributes in the past on OrbitControl to no avail. But let me know if it has worked for you in the past @puxiao.
Thanks again .
I’m amazed at how long this thread goes. Sometimes making own functionality for specific use case requirements might be faster than trying to adapt existing functionality made for some general use case.
Here is a quick attempt for manual object moving and rotating without using any Three.js controls. Rotations are not bound to \pm180^\circ. Use left mouse button to move, right – to rotate:
https://codepen.io/boytchev/full/RNNQBdR
4 Likes
This observation alone gets you my first “Like”.
Too bad I didn’t have another “Like” at my disposal for the elegant solution in your Codepen.
It seems to me that the absence of simultaneous camera control is an inevitability at this point.
1 Like
Thanks for the great solution @PavelBoytchev. Of all the controllers/solutions that I have played with this is the one that most greatly fits my needs. Thank you for taking the time to put this together. I wish this would be yet another controller for threejs users with similar needs. Camera-controls controller by yomotsu also was a closed second. But it fell short in the 360 degree rotation requirements I have for my scientific cellular app. I went ahead and added zooming capabilities to your solution as well. I think going forward I will use this solution over other threejs controllers since I have more control over object manual movements using a mouse.
Thanks again.
1 Like
@PavelBoytchev , excellent ! I had never paid attention to rotateOnWorldAxis() before.
@siamak
I checked the source code and found:
No wonder it’s useless to set it up.
1 Like
I really appreciate your explanation, it’s clear and well articulated. I like the way you break down complex concepts, very helpful!
1 Like
yes @puxiao not sure why all these controllers have these limitations. At lease they should have options to get around them if the user desires to do so.
Hi @PavelBoytchev and friends
As I implemented this solution I ran into an issue that I wanted to see if there is a work around for. Basically I have two scenes. One for the actual group object and the other one for showing the arrow access in the bottom left corner of the screen. The logic of that is prety much based on this example:
Briefly here is the definition of it:
var arrowScene = new THREE.Scene();
var arrowCamera = new THREE.PerspectiveCamera( 50, CANVAS_WIDTH / CANVAS_HEIGHT, 1, 1000 );
arrowCamera.up = camera.up; // important!
var arrowPos = new THREE.Vector3( 0,0,0 );
arrowScene.add( new THREE.ArrowHelper( new THREE.Vector3( 1,0,0 ), arrowPos, 60, 0x7F2020, 20, 10 ) );
arrowScene.add( new THREE.ArrowHelper( new THREE.Vector3( 0,1,0 ), arrowPos, 60, 0x207F20, 20, 10 ) );
arrowScene.add( new THREE.ArrowHelper( new THREE.Vector3( 0,0,1 ), arrowPos, 60, 0x20207F, 20, 10 ) );
And in my render loop I have the following lines:
arrowCamera.position.copy( camera.position );
arrowCamera.position.sub( controls.target );
arrowCamera.position.setLength( 300 );
arrowCamera.lookAt( arrowScene.position );
So the arrowCamera copies the position of the main camera and then in position.sub we use the controls.target.
So since I am not using any of the controllers any more that use the camera to rotate, this logic is now broken and does not work like it used to.
I went ahead and added an axes helper and tried to update the second arrosscnee using this logic:
let worldpos = new THREE.Vector3();
axesHelper.getWorldPosition(worldpos); // get the world coordinates of axesHelper
arrowCamera.position.copy( worldpos ); // apply it to arrowCamera
While this logic does move the arrowscene coordinates they are not in the same direction as the group rotations and the axesHelper. A picture below describes the issue pretty well:
As you can see my access helper in the bottom right matches the group orientation and directions, but my arrowscene on the left is in a totaly different direction.
How can we fix this issue?
My guess is since we are moving the object and not the camera (unlike all the controllers in threejs) updating the camera position might not be right anyway.
Any ideas on this friends?
Thanks
Hello friends,
I figured out the solution to arrow pointers we usually use and put on the bottom left corner of the screen. Normally if we use a standard threejs controller that use the camera rotation we will add this to the render loop:
arrowCamera.position.copy( camera.position );
arrowCamera.position.sub( controls.target );
arrowCamera.position.setLength( 300 );
arrowCamera.lookAt( arrowScene.position );
But if we are implementing a solutuon without better rotation (i.e @PavelBoytchev elegant solution without threejs controllers) then we have to do a couple of tricks to make it work.
1- First you define and accessHelper and add it to the group or object you are rotating. Make sure this axesHelper is invisible.
2- You go ahead and create a second scene with three arrow helpers . This part is common to both using or not using controllers.
3- in your render loop you add the following lines:
let newQuaternion = new THREE.Quaternion();
axesHelper.getWorldQuaternion(newQuaternion);
arrowScene.quaternion.copy(newQuaternion);
This will do the trick. Again this can be used if you are not using any controllers for your rotations.
Hope this help some one that might have a similar issue like I had after using a customized solution for rotating, panning the object. Hers is a picture of working solutuion:
Cheers