Move orbitcontrol camera on circular path around object - javascript

newbie in threejs here.
I have a cube with different color on each face. The cube can be rotate using OrbitControl and I have 6 buttons in Dat.GUI to control the camera position. Objective is when clicking on "Animate to red", the orbitcontrol camera will move to the red face from its current position on a circular path, "Animate to blue" camera will move to the blue face and so on...
I have the "Animate to red" button somewhat working right now but I don't think my solution is right. Can someone point me to the right direction? Thanks
Here is my codesandbox link https://syckkt.csb.app/

So I've implemented a fix to your code here: https://exciting-haslett-vfbojd.csb.app/
The idea is to have a list of unit vectors representing each side, then animating the camera to that position. If the side is on the opposite side of the shape we animate to a perpendicular side first and then towards our target side after. Just check the code it's all in there.

Related

threejs TrackballControls - Rotate around picked point & Zoom in direction of mouse

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.

Is mouse over possible in three.js pointerlock controls?

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.

Get Camera's Rectangle position from CesiumJS

I am having trouble to get Rectangle position of current Camera view.
I want to create a Rectangle or Wall on the same position as current Camera view (red rectangle). Is there any way to do this?
Thank you
I am not sure I understand you problem, but I think you may have luck using the the Cesium camera's computeViewRectangle function to get the approximate rectangle the camera can see.
Here is the documentation:
https://cesiumjs.org/Cesium/Build/Documentation/Camera.html#computeViewRectangle

Dynamic circle in Canvas

Using the Attached Fiddle we could see the circle is created on mouse up. Right now, it is drawing the circle by choosing the mouse up point. So, wherever we our mouse up position, the circle will be created there.
Fiddle Link
<div id="canvas">Click to draw<br/></div>
I am actually trying to create a circle starting from mouse down point till mouse up point.
Please suggest

Javascript rotate image with mouse coordinates

Im using a parallax effect that moves a ball according to the users mouse position (http://webdev.stephband.info/jparallax/index.html). I am trying to figure out a way that the ball will also rotate. So it would appear that as the user moves their mouse over the area, the ball rolls across the screen.
I have found some javascript examples that show how to rotate an item on mouse click, I am just not skiled enough in js to put it all together.
here is a Jsfiddle that shows an example:
jsFiddle
This is more tangential advice than an answer, but in order to make the rolling ball look realistic, make sure that it rotates at a rate that is consistent with the ball's circumference. Otherwise it will look fakey.
This jQuery plugin might be useful.

Categories

Resources