Inverting the normals of a sphere threejs example
When editing some of my older threejs content and have got around to my post on cube textures which in turn put me in the direction of exploring this topic and related subjects and also alternatives. The process of just adding a cube texture to a scene is one thing, but the process of creating textures to use as cube texture is a whole other matter. Thus far I have not found a sound way to go about creating these kinds of textures from a resource image because doing so is a little involved, and I have a lot of pots boiling on top of this that makes me want to look for a kind of simple place holder solution for now.
There are a lot of issues that come up when trying to make one of these cube textures, for one thing I need to start with a texture that is seamless in all directions, and on top of that I need to have a way to mutate the state of the texture so that it does not look like I am in inside a cube but rather a sphere of sorts even though it is a cube.
While I look into the subject of making these kinds of textures the thought occurred that there should be more than one way to go about doing this sort of thing that will have the same visual outcome at least. One such idea would be to just have a sphere, and inverting the normal attribute values so that the front side of the sphere is the inside of the sphere. Then there is making a texture to use with the inner surface of this sphere, and making all of this part of a DAE file that I can then just load, scale up as needed, and have fixed at the center of the scene object. I can then have a situation in which the camera and all additional objects of interest are inside this kind of sky sphere, and I can then just draw on the surface of this sphere as a way to create a kind of background for one or more over all projects.
Although this kind of alternative might have its advantages it is will not at all a replacement for making a cube texture, which does stroke me as the best way to go about doing this sort of thing with threejs projects. One reason why is that cubes textures are not jst use for backgrounds, but environment maps also. Still this kind of alternative might still work okay of I do not care about environment maps for now. So then this a post on a threejs example in which I am using a DAE file of a sphere with inverted normal, and custom uv mapping and textures as an alternative way of making a kind of cube texture.
Inverting Sphere normals, and what to know before hand
This example makes use of the DAE loader that must be added on top of threejs
This example makes use of the DAE file, or Collada File, the loader of which can be found in the threejs repository example folder. I have all ready wrote a blog post on this DAE loader a while back and thus assume that you know a thing or two about these various additional assets to work with in the threejs repository. Also I am making use of an additional module that I made a while back where I am building on top of this DAE loader, but this is mainly just some abstractions and additional methods that I have found that I like to have when working with DAE assets thus far.
Source code and DAE assets are up on Guthub
Version numbers matter
When I first wrote this blog post I was using r135 of threejs, and the last time I came around to do some editing I was using r146.
1 - First version of this inverted normals sphere DAE file example
In this section I will be going over what I have together thus far when it comes to the source code of this example. In this section I am just going over the source code as the state of the sphere as well as the state with textures is all something that I have worked out in an external dae file that I am loading with my DAE tools module that I worked out in another example. There is just then the question of how to load the DAE file, and also what to do with the result object that the DAE Loader will give.
For this first revision of this sphere normal invert example I am making use of threejs, the Collada file loader, r2 of my DAE tools file, and a main.js file the works on top of all of this.
The main thing that stands out as far as this example goes is that I am calling the load one method of my DAE tools module that I made in a previous example. I will be going over a copy of the source code of this module in the next sub section, but for now the main thing here is that this is just the way that I thus far like to load not just a dae file, but also any additional textures that the dae file needs to load also. This load one method will return a promise that should resolve when the dae file as well as all textures used in the dae file are finished loading.
When I have the DAE result object to work with, by default the phong material is what is used. For this example I am not making use of any light source and am therefor replacing the phong material with the basic material. I am then just using the map texture from the old phong material for this new basic material. When it comes to the ground mesh object I am also using the mesh basic material as well.
1.2 - The dae tools file that I am using for this
This is the source code for the DAE tools module that I made a while back that I am using for this project. Sense this is a project in which I am just loading a single DAE file I am using just the load one method, but I also worked out a load all method for this module as well.
As of late the direction I seem to be going in with threejs is using the library to make Videos, and when it comes to this kind of application the bottom line with whatever I am doing is how the frames turn out. With that said this seems to be a kind of solution that I would say works out okay when it comes to that, and the kind of style that I have in mind. However I would not say that this is an end when it comes to looking into this sort of thing more.
Creating a background for scenes in threejs strikes me as just one of many things that can end up being a total time consuming rabbit hole if I do not first find a half way decent place holder solution for it which is what this is. If I am happy with the idea of manly creating textures that I then use with the uv map of a sphere that has inverted normals then I can go with this and move on to the next thing. With that said I think I can go with something like this when it comes to just making some that works okay and moving on, at least when it comes to making my videos at least. However I am sure that this is yet another topic that I will have to come back to again at some point when it comes to slowly moving forward with every little thing that comes up when doing this kind of work.