Scene Shake threejs example
For another threejs example I made a scene shake module that can be used to shake the whole scene object. When I do so that way I just need to pass the scene object to a method that will apply the current state of a shake object to the scene object. One thing I will want to keep in mind with this is that I do not want to add the camera that I am using to render the scene to the scene object, because if I do I can not see the shake as the camera will be relative to the scene. In the event that I do need to add the camera to the scene then the shake object can be applied to some other object in threejs that is based off of the object3d class other that the scene object such as a group, or the camera.
The shake module threejs example and what to know first
In this post I am writing about a module that works on top of threejs to provide a way to create and update a screen or object shake effect. This is not a getting started type post on threejs, or any additional skills that are required in order to extract something of value from reading this. However in this section I will be briefly writing about a few things that you might want to read up more on before reading the rest of the post.
Read more about Vector3 and Euler class objects
If you are still a little new to threejs it might be a good idea to read more about the Vector3 class which is great for just about almost all things that have to do with the position of objects in space. Snese this is a project example where I aim to make a kind of screen shake effect the Vector3 class will end up being used a little for this project of course. However there is also the Euler class of threejs as well that is like Vector3 but it has more to do with angles rather that position.
Check out more on the Object3d class
The scene object is just one example of an object that is based on the object3d class that you might want to read more about if you get the chance. The position property of an object3d based stores a vector3 object which can be used to set the position of the scene object. Also the rotation property of object3d stores a Euler class object and can be used to set the rotation of the object which also comes handy for making a scene shake effect. When setting the position of the scene object there is no parent object of the scene object so the position is relative not to a parent object but something that seems to be often referred to as world space.
Source code is up on Github
The source code examples that I am writing about here can also be found in my test threejs repository on Github. This is also a repository where I store the source code examples for my many other blog posts on threejs as well.
Version Numbers matter with three.js
When I made this shake module, and the demos that make use of it, I was using threejs version r127. The last time I came around to do some editing I was using a dev version of r150. With that said this is the first post in which I am working out updated code that is in line with my r150 code style rules.
The demos where working fine on my end last I checked. However in the future it is possible that the code examples here will break on newer versions of threejs as code breaking changes are made all the time to threejs. Always take care to note how old a post is, or any mentions of versions of external assets used when making use of code examples on the open web.
1 - Module form of shake module, degree and position lock feature ( r2 )
If you still want to use the old script tags there are still the older revisions of this modue that I made for older versions of threejs. I will be keeping all of that up in these posts.
1.a - The shake-module.js file ( r2 )
Here I have the updated module form of the shake module that is in JSM rather that IIFE format. On top of just making a few quick changes to pull that off I also was able to add the positon and degree lock features that I had writen down on the todo list for this project.
1.1 - On click, degree and position lock demo ( r2 )
This is an updated version of the on click demo that I made for R0 of the shake.js module. On top of just working with the module form of the module I am also making use of the new position and degree lock features of the module. Also I was able to work out another way to set the intensity of the shake based on the position of the click event.
2 - shake.js now has a update method, and range values ( r1 )
Sense I first wrote this post I have thus far made one revision of this shake.js module. So far I just made a few changes that have to do with making it so that there are just two public methods of interest to work with which are the create and update methods. All the other methods are now internal helper functions rather than additional methods that I must call. On top of this I thought I should also make a demo of the module that is an animation loop example, rather than that of an event driven example as I did for my first version of this shake module example.
2.a - The shake.js file ( r1 )
With this first revision of the shake.js module I wanted to make it so that I now just have two public methods, a create method and an update method. This seems to often be the typical case with many of my modules thus far. That is that I have a create method that I use to create a kind of object then have at least one method that will act on that object such as an update method.
Sense I now just have two public methods in this module there are three general sections of the code. An area with internal helper methods, then a section for both of the public methods that I can use outside of the module in some code that will make use of this module.
Beyond reducing the number of public methods I also added a few features that I think are needed thus far. When it comes to create options I now do not set fixed starting values for the pos and deg shake object properties, but rather I set to arrays that are range values for the pos and deg values. I then can set a fixed intensity values, but when using this in a project this intensity value is something that I will want to mutate in the code.
Another major change is the introduction of an obj property that is an object to which the shake object is to be applied to. The idea here then is that when I create the shake object I pass a ref to the object that I would like to have the shake apply to rather than having to call a separate method after updating the shake object alone.
2.1 - The animation loop example of shake.js ( r1 demo )
Now for a demo of this improved version of the shake module that is an animation loop rather than an event driven demo that I made for the R0 version of shakejs.
3 - The shake module ( r0 ) and event driven demo
In this section I will be going over the state of the first version of this shake module and an event driven demo of the module. This crude start of the module is a little weird, but never the less when used as intended it will result in a kind of shake effect.
3.a - The shake module ( r0 )
This module has a public create method that I can use in a project to create an instance of what I am calling a shake object. This shake object will contain data about the current state of the shake such as the max values to use for position and rotation ranges. The shake object as of this first version also contains the current actual Euler and vector3 instance to use to offset a given object for a current frame tick.
After the create method I have a roll public method which will change the current state of the Euler and Vector3 class instances that are used to set the position of the object to which the shake object is applied to. Speaking of applying a shake object to an object3d based object such as a scene object, to do that I also have one more additional public method that is used to apply the current state of shake object. This object can be the scene object which is what I originally intended to use this with, but it can also be used with any other object based on object3d such as a group, mesh, or camera.
I am making use of the user data object of the object3d class as a way to park what the original values where for the position and orientation of the object that was passed to it. When the active flag is false the values park there will be used to set the position and orientation of the object, else a set of values in the shake object will be used that can bu updated with a roll method.
There might be many more features I might want to add to something like this, and also maybe change the whole way that I go about creating the shake values to begin with even. However for the sake of this post, and also for the example itself maybe it would be best to try to keep this module relative simple and not go to far beyond what I all ready have here. Also much of the logic that comes to mind when it comes to setting the active flag and updating the roll, and setting the values for position and rotation range values will change a little from one use case to another anyway. So then maybe much more of what comes to mind should not be baked into the module, but just be additional logic in the demo that will be using this module.
3.1 - Base demo of the shake module where I am shaking the whole scene ( r0 demo )
For this demo of the shake module I am using events as a way to adjust the shake pos and deg properties based on the position of a touch move or mouse move event on the canvas element. It is tempting to pull some of this into the module, but I think that this sort of thing will end up changing a little from one use case example to the next actually.
This turned out to be a quick fun little example of using threejs as a way to create a scene shake module, that can also be used to shake other objects in a threejs environment. When it comes to suing this in projects in which I end up adding the camera to the scene then of course I am not going to want to make the scene object the object to which the shake applies then as the camera will then be relative to the scene object and things will not end up shaking. That kind of problem is easily fixed though by just wrapping everything that I want to shake into a group and then make that group the object that I use with my public method that apples the shake object to a threejs object based off of object 3d.