This will be a blog post on the texture class in threejs, and while I am at it I will also have to at least touch base on some closely related topics as well. I will not be getting into detail with various course skills that you should all ready have solid before hand here when it comes to the basics of threejs. However in any case I do like to always use these opening sections to wrote about a few subjects that you might want to read up on also if you have not done so before hand.
When it comes to really getting into how to work with textures the process of doing so is not just with the texture, but also how to work with some details with the geometry that is used as well. For example there is the UV attribute of buffer geometry objects that is an attribute of geometry that contains offset values that are used in the process of mapping a 2d image of a texture object to a 3d object in terms of buffer geometry, a mesh material and an overlapping mesh object.
Another feature of geometry to be aware of that is relevant to the use of textures is the groups array of buffer geometry objects. This will come into play when using an array of materials, each of which might have there own texture.
There is a whole lot of ground to cover when it comes to materials that I will not be getting into here of course. When using textures there are certain materials such as the normal, and depth materials to which the various map options of interest are just not supported at all. Also depending on things like adding light or not the various map options will change from one material to the next. A good starting material option would be the basic material, and just sticking with the map option of that material. Once the basics of textures are solid it is just a material of knowing what map is for what and which needs to change with the state of the texture used for it.
I also have the source code examples that I am writing about here up on my test threejs repo on Github. This is also the place on Github where I park the source code examples that I have made for my many other blog posts on threejs that I have wrote thus far.
When I first wrote this blog post I was using r152 for the source code examples of the post.
TO kick off this post I am going to want to start out with some very basic getting started type demos. For this section then I will be sticking to using just the basic material and map option. On top of that these will be just simple static, single frame renders that will not involve anything to advanced that will come up when getting into animation loops.
The texture loader is then one way to go about loading in textures in the form of external image assets. There are a whole lot of other ways to go about loading textures this way of course. If you have any preferred way to load image files then the Image object can just be passed to THREE.texture. However if I just want to load images alone, and then do something else when it comes to geometry, materials and the state of objects then the texture loader is a good option for doing so.
There Might be a lot more to get into when it comes to the texture loader, and loaders in general. However this is very much a basic section on textures alone. I have my main blog post on the texture loader if you are interested in some examples that have to do with loading many images, and other various advanced features of the texture loader, and loading managers.
For this section I will not want to go over a few demos of the various features of the texture class. By features I mean the various problems and methods of the Texture class. I will not be getting into detail with all of these here. However I think that I should have at least one or two demos about various key features that I have found actually do come up once in a while for various projects that I have worked on thus far to say the least.
By default a texture will not repeat as the Wraps And WrapT properties of textures will default to the THREE.ClampToEdgeWrapping constant. However the tick to get this to work does not just simply involve setting WrapS and WrapT to THREE.RepeatWrapping as there are some additional features of the Texture class that will typically also need to be adjusted for this. These other features are the center and repeat properties of the texture both of which are instances of the Vector2 class. The center vector object will need to have th x and y values adjusted with values between 0 and 1 as a way to adjust where there center of the image should be each repeat. After that there is the values of the Vector2 for the repeat property which default to 1 for x, and y, these will need to be increase to whatever values you want for the number or repeats for each axis.
One thing that I have noticed with canvas textures with low resolutions is that they look blurry. The reason why this is has to do with the default value of the mag Filter option of the texture. The default value for Texture.magFilter is THREE.LinearFilter, however often I might want to use the THREE.NearestFilter option when using low res canvas textures to get a desired outcome.
There is a great deal more to be aware of when it comes to textures, and all kinds of additional topics that will come up the branch off from the subject of textures as well of course. However that might have to be it for this blog post at least. Some additional subjects with textures have to do with geometry, and the various map options of the various materials. In the opening section I wrote about uv attributes, with that said I have a threejs example post that is a kind of advanced subject with uv mapping that you might want to check out with that. As of the various map options I have wrote posts on alpha maps, and emissve maps which are to great options for some materials beyond just the map option.