In nodejs the require global is something that will end up being used often in projects as a way to make use of built in as well as custom made nodejs modules. There is more to it then just a way to load modules though, it can also be used as a way to load json files and other assets, so lets take a look at some nodejs require examples today.
In nodejs json is often used as the standard data serialization language of choice for most applications. When it comes to working with json in general in javaScript there is the JSON.parse, and JSON.stringify methods that are of interest. In addition in nodejs there is the nodejs require global that can be used to quickly load json, and the file system module can be used as a built in way to write files including json. There are alternatives to json such as yaml, but for this post I will be going over some of the basics of json in node.js as a way of handing data serialization and config files.
As of version r69 of Threejs the 2d canvas software renderer has been removed from the core of threejs itself, and moved to the examples folder. It was still possible to use it as an add on file but as of late versions of threejs it would seem that is no longer the case. There once was a time where webGL support was not so great, however that was then, and now when comes to modern web browsers webgl support is pretty good.
For the most part these days there is no need to bother with the 2d canvas powered software renderer as the built in webgl renderer will work just fine on most clients, but if for some reason you do want to add more robust support for older clients that do not have great web gl support than the some other renderer option will need to be used in the event that it will not work.
I can not say that I bother with this myself, but never the less there is the question of that small minority of people using outdated browsers and having code not break. Also there is not just concerns over using older browsers but using a client where certain webgl features will just not work. For example webGl2 features will not work on my raspberry pi 4 because of limitations with the video adapter that is used on it even if I am using a modern browser. So then in this post I thought I would touch base on this sort of topic for those that might be interested.
In threejs there is a built in box helper that can be used to help gain some visual idea of what is going on with a Mesh, a Group, or potentially anything else that inherits from the Object3d Class for that matter. I say potentially because it must be an object that has a buffer geometry, or in the case of groups child objects that do. Simply put, the box helper just draws a box outline around the area of an object that it is used with.
There are maybe a few little problems here and there that might come up when using the box helper though. For example one might expect that when a mesh is moved or rotated that box will move and rotate with the mesh object, however this is not always the case. Typically I will want to add a box helper to the object that I have created it for as a child, so that when I move or rotate that object the box helper will move or rotate with it. Another way would be to use a method that can update the state of this box helper object by using a set from object method that is a prototype method of this box helper class.
In this post I will be going over a few quick examples of the box helper in threejs that might help to address some of these issues that might pop up when unseeing it. As such I will not just be writing about the box helper, but also a wide range of other things that can be applied elsewhere when it comes to working with a three.js project in general.
When working with materials in threejs many of the materials support one or more types of maps for skinning a geometry. One such texture map option is an alpha map that is a gray scale texture that will be used to define the alpha transparency values for the material. So then the white areas of the texture will result in a face being fully opaque, black areas will be fully transparent, and values between the two will be used to set any alpha value between the two.
Alpha maps will then come into play when it comes to working things out with transparency in a threejs project. An alpha map is something more to add after working out the very basics of this with the transparency and opacity properties of a material option that will work well for one or more objects. With that said the transparency option is used to turn transparency off and on, opacity is used to set an over all global alpha value, and alpha maps can the be used to set opacity values on a texture level.
In this post I will be going over some examples of an alpha maps, and in order to do so I will also be touching base on how to go about creating a texture with a little javaScript code. One way to do so is to use canvas elements and the THREE.CanvasTexture method as a way to create a texture to use as an alpha map. This kind of thing can also be used as a way to create textures in general for all kinds of other maps that can be used with a material.