Vector3 set from spherical coords method
When it comes to working out all kinds of simple hello world type project examples using threejs for the sake of learning the basics of threejs, or just gaining a more solid understanding of the library regardless of experience, the Vector three Class might come up often when doing so. There is a whole lot to write about when it comes to the Vector3 class such as things like normalizing an instance of Vector3, or getting the distance between two instances of a Vector3 object.
One this that often want to do when making any kind of project with three.js is to position an object in terms of a spherical set of values in terms of a radius, and then two angles that have to do with coronets similar to that of latitude and longitude. Thus far I have made one threejs project example that had to do with creating a module that is centered around the single purpose of positioning an object3d based object of one kind or another to the surface of a sphere. That examples has to do not just with setting a position, but also setting a desired value for the rotation of an object3d based object such as a mesh or camera. The system I made for that example does seem for the most part to work okay, but I still think that there are more ways of doing the same thing, some of which might prove to be better for one reason or another. With that said while I was taking a second look at the Vector3 documentation I have found that there is a prototype method in the vector3 class that has to do with setting the values of a verctor3 instance using a radius, and two angles in radian values called Vector3.setFromSphericalCoords. So then this method might also prove to be a helper fool for working out some kind of system like the one I made for the threejs project example example post, but to know for sure I have to make at least a few quick demos.
The basics of the set from spherical coords method and what else to know first
Also all though I will be trying to keep the examples here fairly simple with threejs, there is still an awful lot to take in when it comes to everything there is to work with in the library. I have mentioned the Vector3 class of which I am writing a post about just one method in this class, there is then a wide range of other classes in the library that are major Classes to be aware of also. Such as Euler, and Object3d, just to name a hand full.
Check out my position things to sphere surface threejs example
I have made one of my threejs project examples on a subject that has to do with the set from sphere coords method. When it comes to that project I am not using the set from spherical coords method, but rather I am exploring what all the options are when it comes to this sort of thing and have found other options that I like better. This blog post will be mainly on this set from spherical coords method still, but in any case I think it is called for in this opening section to say that there are many alternatives to this method. The two main alternatives that come to mind are the Apply Euler method of the Vector3 class, and the raycaster class. When it comes to vector3 class methods I find myself preferring the use of apply Euler, and the raycaster class is better for doing this sort of thing with any kind of geometry beyond just that of a sphere.
Source code examples are on Github
The source code examples that I am writing about in this post can also be found up on Github.
Version Numbers matter
The version of threejs that I was using for this example was r127 when I first wrote the post, and the last time I cam around to do a little editing I was using r146. Because of feedback that I have received about various things I have made a habit of always taking note of what version of threejs I was using when I made the examples in a blog post on threejs. The reason why is because threejs is a very fast moving library in terms of development, and code breaking changes are often made in each new revision.
1 - Some basic getting started examples of the set from spherical coords method
For this section I will be starting out with just some very basic getting started type examples of the set from spherical coords method of the vector3 class. There is just calling simply creating an instance of a Vector3 class object, and then calling the method and taking a look at the values of the vector after calling it. Then there is making one of not more static scene examples in which the method is used as a way to say, set the position of an object such as a camera or a mesh object.
1.1 - A Very basic example of the setFromSphericalCoords Vector3 method
1.2 - Basic Scene example
So now that I am getting some values that look good there is now the question of starting to use this set from spherical coords method in at least one if not more basic scene examples. For this example of a basic threejs scene I am just going to be using this spherical coords method to position a mesh. I will not be doing anything fancy when it comes to light and animation so for the single method object that I will be positioning I will be using the THREE.SphereGeomrty constructor with the THREE.MeshBasicMaterial which is the typical go to material for any scene in which I am not doing anything with light.
When it comes to mesh object, camera object, or any object that is based off of the Object3d class in threejs there is the position property of such an object. The value of this position property is an instance of the Vector3 class, as such at any moment I can just call the setFromSphericalCoords method and pass the values that I want to set the position of the object by a radius and two angles. In this example I am doing just that with the camera, as well as a single mesh object of a sphere.
2 - Animaiton loop examples
In this section I will now be getting into at least one if not more video project examples for this post. As of this writing I have just the one video that is shown at the top of this post. However sooner or later I will come around to edit and expand this post more, so there will likley be more examples in this section at some point in the future.
2.1 - Simple Video1 loop example
What I have here is a quick example that is based off of the source code for the first video that I made for this blog post. For that video I made a simple set mesh position helper function and when it comes to this function I am of course using the set from spherical coords method of the vecotr3 class. The example involves a sphere that I have placed at the center of the scene, and I am then using this set mesh position helper to set the position of the cube on the surface of the sphere.
That will be it for now when it comes to this set from spherical coords method for now at least until I come around to do a bot more editing of this post. I may get around to doing that later thins month but I would not hold by breath on that I have a whole lot of other posts on threejs that I have wrote over the years, and many of them need a great deal of editing also. This is a subject that I do seem to keep coming back to now and then though So I am sure that there is more to add on this when I get around to it.