For todays post on a threejs example I wanted to make a quick project that has to do with how the lookAt method of the object3d class is not always a kind of golden hammer kind of solution when it comes to setting the orientation of an object, or in this case a group of objects. For the most part that method works well, and is very easy to use, I just call the method off of the object that is based off of object3d, typically a camera, but it can be any other object3d based object, and pass the position that I want the object to look at. However in some cases the end result may not work the way that I want it to, so I can not just turn my brain off and not think about this kind of stuff at all some of the time.
This example then should help to show what I mean by this as it is a whole bunch of objects positioned around the origin and the are all made to look at the origin with the lookAt method. However two objects of interest might be at the top of the over all area where one plain is positioned one way and the other is flipped around completely. this is not always such a bad thing, but it is if what I want to do is make an animation in which this kind of object is of that of a plane that might make a motion like that of a loop.
I have wrote posts on the Object3d lookAt method as well as the object3d class in general. I use the look at method all the time in just about all of my source code examples when it comes to setting the rotation of a camera, however it can also be used with objects in general beyond just that of cameras. In this example I am using the lookAt method to set to orientation of mesh objects which like cameras are also based on the object3d class.
In this example I am not just using the look at method, but also the apply Euler method of the Vector3 class along with the Euler class to set the position of mesh objects. With that said I have wrote a post on the apply Euler method itself, as well as another on the Vector3 class in general. When it comes to using the apply Euler method I need to have a Vector3 instance with a value other than 0,0,0 and when calling the method I need to pass an instance of the Euler class which is yet even another class that is worth looking into further.
When I first made this example I was using r135 of threejs.
The source code for this example can be found in my test threejs repository, along with many others.
When it comes to the helpers section I have an array of materials that I will be using for each mesh object of each group that I will be using for the sake of having a kind of object to use for this. I have one material for the tail of each plane group, and another for all the other mesh objects that I am using. I then have a function that I can call that will create a single mesh object for an over all group of mesh objects. After that I have a make model helper that will crate a new instance of THREE.Group and add all the parts for the over all model.
There is then a create wrap method that will just create a collection fo these models objects, and then I have a helper that I am using to position a whole bunch of these mesh objects, for this example I have it set at about 50 of them.
This example helped me get a good visual idea of what the deal is with the use of the look at method and how it sets rotation for objects. The result is that the lookAt method will work just fine for most situations in which I would want to use it, but there are a few use cases in which it will now work the way that I would want it to. For example using it to set the rotation of a biplane model that might do a loop or two in a scene, when it comes to that I will need to do a bit more than just use the lookAt method, for find some other solution completely actually.