The set from points method of the buffer geometry class in threejs is a way to create a new buffer geometry from an array of vector3 class objects. This new buffer geometry instance will just have a position attribute alone, which is okay when it comes to creating Points, or Lines, but not so much for Mesh objects. That is unless additional steps are taken to add the additional attributes that are needed to get the geometry to work well with mesh objects.
Even if one is just interested in creating a buffer geometry with a position attribute only to be used to just draw lines are points I have found that the set from points method might work okay for creating a geometry, but does not work so great as a way to update a geometry over time in a loop. If I want to not just create a geometry, but also update it over time, then I am not going to want to do so by directly working with a position attribute. When doing so it would make sense to also just create and set the position attribute the hard way also while I am at it.
As far as I can tell, it would seem that this set from points method was added for the sake of making things easier when it comes to quickly creating a geometry from an array of points in the form of Vector3 objects for each point in space. In this regard I would say that the set from points method is very easy to use. I just create an array of vector3 objects by one means or another, create a blank buffer geometry object, call the set from points method off of the buffer geometry passing the array of points as an argument and I am done. Simple enough sure, but it comes at a cost compared to doing it the hard way.
Maybe the hard way of doing this can be avoided when it comes to creating the geometry to begin with, but in any case the hard way is still how it needs to happen when it comes to updating. Also the hard way of doing it is not actually that much harder, so then one might as well just do that actually. Still in this post I will be going over a few basic examples of this set from points method, before getting into more advanced examples about buffer attributes, mainly the position attribute.
As I said the set from points method is just one little method in the buffer geometry class, there are a whole lot of other methods and properties. There is also a whole lot more to write about when it comes to additional classes of objects that are the values properties of a buffer geometry object as well.
The array that is passed to the set from points method should be an array of Vector3 objects. There is another major class in threejs that comes up all the time, and not just for this specific task. For example when it comes to setting the position of an object3d class based object they way to do so is by way of the position property of the object3d class which is, use guessed it, and instance of Vector3.
I have the source code examples that I am writing about here also up on Github in my test threejs repository. This is also where I path the source code exmaples for all the other blog posts that I have wrote on threejs over the years as well.
When I first wrote this blog post I was using r146 of threejs, and this is also what I am still using as of the last edit in July of 2023. I have more up to date style rules, but I have not updated the source code examples to those new rules at that time. In any case there are a whole lot of code breaking changes coming up ahead, and I have found that I need to write a thing or two about versions in each post.
As with just about all of the other posts that I have wrote on threejs I like to start out with a basic section. When it comes to using the set from points method of the buffer geometry class the typical situation in that by one means or another I have an array of vector3 objects, and I would like to just quickly make a geometry with that array of vector3 objects. Starting with this is simple enough if I am to stick with THREE.Points, or THREE.Lines which is what I will be using in this section. Things get a bit more complex when it comes to turning a geometry made by this means into something that will work well with mesh objects though, and that is something that I will get to in more complex sections in this post.
To get started with the set from points method one way or another I will need to create an array of Vector3 objects. Once I have that array of Vector3 objects I can then create a blank buffer geometry, call the set from points method, and pass the array of vector3 objects to the method. The end result will then be a buffer geometry with a position attribute that is set up using the array of Vector3 objects. This kind of geometry will not work so great with mesh objects, but will be good enough for say the THREE.Points class.
Another option for making use of a geometry that is just composed of a position attribute would be to use THREE.Line, or THREE.LineSegements. With that I would also make use of one of the Line material options to style these line objects.
A basic example of the set from points method is easy enough. That is one of the nice things about this method as I have to say that it does make the process of doing this easy. However creating an array of Vector3 objects that are the points in space that I want, and just simply passing that to the set from points method is just a crude beginning of course. If I want to use the geometry with the THREE.Points class then maybe this crude beginning will be enough actually. However typically I will at least want to use this with THREE.Line, and even THREE.Mesh, in which case a crude beginning is not enough. So in this section I will also be writing about the additional attributes of the buffer geometry class, and how to add these additional attributes to create a geometry that will work well with THREE.Mesh.
This is a set from points example in which I am adding an index for the buffer geometry so that I will have a closed line that will result in a triangle that will be used with THREE.Line. I create the points in space that I want by directly calling the THREE.Vector3 class and adding the Vector3 objects to an array. Once I have the state of this array of Vector3 objects just the way that I like it I can create a blank Buffer geometry object, call the set from points method, and then pass the points array. I now have a buffer geometry with a position attribute, but there is no index for it.
If I just pass the buffer geometry without an index to THREE.Line, it will work just fine but the line will not be closed. One way to fix this would be to add a duplicate point in the points array, however sooner of later it would be a good idea to at least be aware of what the index property of a buffer geometry is for. This index allows for me to result the same points in the position attribute by passing an array of index values for points in the position attribute. So then I can pass an array of index values that is like 0,1,2,0 in this case which would give me the closed triangle that I wanted.
The bar is not that high when it comes to creating a geometry that will work okay with THREE.Points, or THREE.Line. However when it comes to making any kind of real project I am going to want to create geometry that will work with Mesh objects. The next step with making a custom geometry this way would be to add a normal attribute for the geometry. Just like with the position attribute this can end up being a little involved, but also like with the set from points method there is a method that helps to make this easily. The method that can work okay most of the time to quickly create a normal attribute is the compute vertex normal method.
An index is a great tool to help reuse points, however there are still only so many points in the position attribute and thus there are also only so many normal vectors as well then. This can present a problem then when it comes to the state of the normal attribute. If you take the time to study the nature of some of the built in geometries such as the box geometry you will find that typically what is desired is not a fully indexed or non indexed geometry, but rather a kind of happy medium between the two. I could get into detail about this but for now there is just being aware of the to non indexed method of the buffer geometry class that can be used to quickly create a fully non indexed geometry from an indexed one.
Here in this example I will create one geometry with an index, and create a non indexed geometry from that one. I will then call the compute vertex normals method for both of these geometries, and then use them both with mesh objects that use the mesh normal material. When looking at these two geometries the one that is not indexed will look more like one will expect with a built in geometry, while the indexed one will not. The reason why is by making the geometry non indexed the count of the position attribute goes from 4, to 12. That is from 4 points in space, to 12 points in space. Which means there is a single, stand alone point for every triangle. Which also means that there is a single stand alone Vector for each item in the normal attribute when allows for setting a custom set of vertex normal values for each point of each triangle.
I would say that there is just one final attribute that is needed to have a geometry that will work well with THREE.Mesh. There are a lot more of course that will come up when getting into animation, Vertex coloring, and so forth but the last core attribute that comes to mind would be a uv attribute. The mesh normal material will work fine with geometries that just have a position and normal attribute, but if I want to do anything with texture chances are I am going to want to add a uv attribute. Simply put the UV attribute is a way to define what the offsets are for each point of each triangle in a 2d image to store how to go about applying a 2d texture to a 3d object.
The set from points method works okay when it comes to creating a buffer geometry from an array of points once. However I have run into problems when using it as a way to update a geometry object. In general it is a good idea to create a fixed array of points and then update the state of those points over time rather than creating a new buffer geometry over and over again. So the general idea here is that it is okay to call the set from points method once, but after that I will want to mutate the state of the position attribute to update the values of the points over time.
Here I then have an example here I have a helper function that will create an array of vector3 objects with a given set of arguments. I can then create another helper function that will use that method, along with the set from points method to create a geometry object to begin with. I can then use another helper method that does not use the set from points method to update the state of the geometry with a new set of arguments.
The set from points method is then a nice easy way to go about creating a geometry from an array of points in the form of an array of Vector3 objects. However the there is a lot more to this in order to create a geometry that will work well with mesh objects. Also when it comes to updating geometry over time I will still want to directly mutate the position attribute anyway rather than calling set from points over and over again. Which in turn raises the question as to why not just create it in the first place by doing it the hard way also. Still in some cases it might be a nice fact way to create a position attribute to begin with from a points array, and for that alone it might work just fine.