I'm using OrbitControls.js to rotate camera around a pivot point. I don't want to limit up/down rotation in any way - I need the camera to "go around" the model ("orbiting" the pivot point).
I tried commenting out the phi limits but then rotating freaks out on top and bottom of the model and acts glitchy for a fraction of a second and then gets back to the limit point anyway.
Any suggestions how to achieve the desired effect?
I think you should use TrackballControls instead of OrbitControls. There is no limitations on rotation in up/down directions.
Related
I’m trying to implement an onscreen joystick to control a 3D avatar’s movement.
The joystick is from Nipplejs
https://github.com/yoannmoinet/nipplejs
The perspective camera is fixed in place and continuously lookAt at the moving avatar
After the character moves a certain distance, the camera will jump to a position behind the character
I’m using joystick’s radian position for the avatar’s Y rotation
However when I push the joystick 90 degrees, the 3D avatar doesn’t move forward, instead it rotates and moves to the right.
And when the avatar rotates towards a different direction, pushing the joystick 90 degrees results in the avatar again changing to a different direction.
I’ve included a drawing showing the fixed joystick and the above situation.
How can I have the avatar’s direction always match the joystick’s rotation / direction?
Thank You!
Lets say that I have a player sprite, located at (player.x, player.y). On a mousemove event, I am capturing the cursor's position, which is (e.pageX, e.pageY). In the game, the player will be constantly moving, always towards the direction of the cursor. I am trying to find a way to to rotate the player sprite to always face the mouse cursor, and also move 10 pixels closer to the cursor every game tick. So far, this has me stumped. I have seen many examples of this online, and have tried all of them, but none seem to work. Any help that can be provided would be very much appreciated.
First of all, you must learn the basics of trigonometry. Without this knowledge, you will can't make something like you want.
Center of you image is the center of an circle. Knowing position of center and mouse position, you can calculate the angle. Calculated angle you can use to rotate image.
I am using threejs (r73). I use a PerspectiveCamera. My goal is to implement mouse interaction. For that purpose I want to use
TrackballControls.js . But I want a slightly different behaviour.
I want to rotate around the point that the user picked on the screen
I want to zoom in direction of the mouse position
For the second point I already found a "solution" at stackoverflow. The zoom works, but when I change the target vector of the control, panning and rotating does not work any longer.
Can anyone provide such an modified implementation of TrackballControls or help me with that?
EDIT
With the applied "solution" panning still works but rotating doesn't.
The idea from https://stackoverflow.com/a/16817727/2657179 also does not work.
Understanding the fact that there would not be any cursor on the screen while using Point locker controls, is it possible to use mouse over somehow ? like a cube glows when my camera goes near or faces the cube geometry ?
https://stemkoski.github.io/Three.js/Mouse-Over.html pointer lock will be possible too, you only need to define right vector.
Best to use 2 scenes.
I have a plane that the camera is looking straight at and am using Trackball Controls to be able to zoom, pan, and rotate the plane. I realize that currently there isn't a way to limit the rotation or pan like can with zoom in the file, but was hoping there is a fix for this.
I'd like to limit the rotation to only a few degrees and not be able to flip the plane in anyway. Also, I'd like to only allow panning when the plane is still visible on the screen. I don't want to allow a user to pan and be able to remove the plane from the window. Is there a quick fix to add to the Trackball Controls or how do I go about setting limits to the rotation and pan? Or is there a better type of control for handling this functionality?