Hello, I have been messing around with light functions, and I wanted to create an opening scene to a game. I am using a directional light that will be simulating the day and night cycles, on a white plane, there is an Orthographic Camera pointed at the plane. I have found similar posts about this, but all I have found has to do with making projects from scratch, and I am using the editor, the point is, I want to make the camera move around the plane, and want to know how to smoothly move objects without just teleporting them. Thank you in advance for any responses.
One key to getting smooth movement is to base it on time… and use “interpolation” to get the current value of the thing.
If you’re using orbitcontrols… you can interpolate the controls.target and the camera.position, and that gives you most of what you need to do any kind of camera action.
You can interpolate vector3s with vector3.lerpVectors( start, end, alpha )
alpha is (currentTime - startTime) / (endTime - startTime);
Then you can apply “easing functions” to alpha, to change how the action plays out over time…
If you stick to this approach for animation… your animations will play the same regardless if the app is running slow or fast, since you’re basing animation on actual time… not just adding some arbitrary value each frame.
I like this video explaining easing functions…
There are also libraries like GSAP that can do interpolation/animation in a nicely wrapped way.
IF you want to get even crazier, you can dig into the threejs animation system… (which is mostly used for animated characters but can be used/expanded to animate other things as well… )
The issue it time itself, I have messed with clocks, and it seems like a lot to try to implement that into movement, I don’t know what lerp is, and I don’t know how to use the animation system, do you have any insight on how to do this, thank you for replying btw. Also, I have found trouble using normal js functions, in the editor.
I would try to read the code of projects you’re interested in. Especially the threejs examples
https://threejs.org/docs/#manual/en/introduction/Animation-system
https://threejs.org/examples/#webgl_animation_keyframes
https://threejs.org/examples/#webgl_animation_skinning_blending
These are all made for a js script, not the editor, and I have looked through these, and can’t find any solutions, do you have a code example for this type of movement?