This will be another threejs example type post, this time it will be about making yet another simple model of something, just using threejs itself rather than making and loading an external file of some kind. This time I am thinking I will like to make a crude yet effective house model. I do not care to make anything that complex with this one, just a very simple, basic house like model that might end up being part of a larger scene of some kind in one or more future projects.
This time it will be yet another one of my models that is just a group collection of mesh objects using the built in threejs geometry constructors rather than an external file of one type or another such as the DAE file standard. However there will be one little part in which I am making a custom geometry as well.
My general idea that I have in mind is that if I make enough of these kinds of models I can use them to make an over all larger scene that will include a house model like this, along with some trees, cars, people and other similar objects that can then be used to make some kind of crude animation.
This is not my first threejs project example in which I make this kind of module this kind of way. The first project like this that I made would be my guy one module that I made back in 2018. I also made a an example that is the guy one module and a hamster wheel type model as well taking this kind of approach. I have a number of other examples on top of that of course but you get the idea with this. What I am doing is just creating geometry with the built in geometry constructors, using that with mesh objects, and the positioning and rotating them in ways to make something that forms an over all object of some kind.
Although creating groups of mesh objects might work okay, in the long run it might still be best to look into what the options are with external file formats. With that there is also looking into software tools to create and edit these kinds of external file formats. It might prove to be a bit of a pain to do so, but then again so is making these kinds of mesh group models also.
Thus far I have found that I like the DAE file format as it is a text format, and is also very open and HTML friendly. There are a whole lot of other options that should be consider such as the buffer geometry loader which is nice because that is baked into the core of the threejs library alone.
The source code for this threejs example is up on Github in my test threejs repository. This is also where I park the source code for my many other posts on threejs as well.
When I started this post I was using three.js r127 which was a later version of three.js in April of 2021, and the last time I came around to do some editing I was using r146 of threejs. When updating the code for r146 I made use of the THREE.WebGL1Renderer as I was getting errors relating to using Webgl2. So if you are running into problems where this code is not working for you the first thing to check might be to make use that you are using a version of three.js that will work with this to begin with.
Sense I first wrote this post it would seem that this example is getting a little traffic, so I took a closer look at the source code and found a number of things that needed to be fixed. For one thing I made sure that the custom geometry that I am using to fill in a gap has a uv attribute which I failed to do in the first version of the source code. In addition to this I also rotated and adjusted some things when it comes to the state of the geometry so that it will still work okay at least with materials that do not use the THREE.DoubleSide constant with the side property. I still want to use the THREE.DoubleSide constant with the roof mesh objects, however it is now option with the other mesh objects that compose the over all house.
There are two new main things that I am doing in this new demo of the house module. One is that I am using a custom set of materials when creating the house, and the other is that I am using canvas textures. In the old version of the house model a texture would not look right as there was now uv attribute for the custom triangle geometry, but now it looks okay.
I then have a house triangle helper method that makes use of the Buffer Geometry constructor to create just a single triangle that I will be using to built part of the house. You see I think the basic idea here is that I will be using a three.js built in Box Geometry constructor to create he base of the house, and use the plane Geometry constructor to create the roof. However I am then going to need some triangle areas to fill in the gaps on each side, so then this is where this helper comes into play.
I then have the create method of the module which as of this writing is the one and only public method of the model. I am not thinking that a model like this will be needing some kind of update method. If I am going to make some kind of weird animation in which a house is something that ends up becoming very animated maybe I will cross that bride when and if I come to it. Anyway in this create method I am using the THREE.Group constructor to create a group that will contain all the mesh objects for this model. I am using a Box Geometry for the base of the house, meshes that make use of the plane geometry for parts of the roof. I am then also using my Triangle helper to create th mesh objects that I need to fill in the gaps between the base and the roof.
So now I am going to want to test out this house model by setting up a scene, and maybe at least one more attentional mesh that will serve as the ground of an over all larger scene. When it comes to really using this I will want to have at least a few more mesh objects, and models like this including a person model, but maybe that is all a matter for another post.
For now I start out by creating the scene and then set the background color for the scene to something other than the default black. I am then choosing to use some directional light along with some ambient light because the use of this hose module will always be some kind of outdoor scene, and this is a good way to simulate daylight I have found. I am then also going to set things up so that the light will case a shadow.
I am then setting up a camera and a web GL renderer to use for this demo, nothing out of the ordinary with this aside from maybe a few changes to allow for shadows. I am then creating an instance of my house model, and then having a simple plane geometry based mesh to serve as a crude yet effective ground for now.
For this example I am also making use of orbit controls ans a way to move around and make sure things look okay at least from all directions, and I also set up a basic app loop to change the position of the directional light and anything else that I might choose to animate for this.
When this demo is up an running things seem to be working as I would expect for this thus far. I have a simple little house on a plane, and the directional light is resulting in shadows being casted onto the plain from the house. There is nit much more to write about at this point, but if I come up with some additional things to play with maybe I can come up with something a little ore interesting.
So this is not much to look at for now, but as I make more models like this I think I will eventually start something where I am working with a bunch of models like this to produce an over all larger project. In fact sense I first wrote this post I have got around to writing another post on another examples that is a more advanced version of this example that is just that. I have come to just simply calling it the backyard scene example and it includes this house model along with many others that I have made thus far.
I am not interested in making games with threejs at this time, I think a project like that would end up eating up to much time. However simple crude animations might work if I am willing to put in enough time and energy to do so. What I like about videos also is that I do not have to care as much about bugs, and predominance. As long as my frames render the way that I want them to I have a finished product and I can then move on with my life which is great. These are the kinds of projects that I would use something like this with where what is most important is just how it looks and if it fits in with an over all style.