House Model two threejs project example
This house model example and what to know first
In this example I am using the DAE loader
I do have the additional assets up on my Github
In this project I am loading an external DAE file, and this DAE file along with any additional assets in terms of textures can be found in my test threejs repo on Github. There are a few folders of interest that are relevant to this post then one of which would as always be the main for post folder for this blog post. The other location of interst is the folder where I am storing the DAE file of the house that I am using. On top of that I am also making use of a copy of my dae helper from my post on the dae loader as well. In this test threejs repo I also have copies of the official threejs files that I am using as well. When it comes to getting this up and running on your end the best way to do so might be to clone down the repo and run the server, but in any case I have all the assets that I am using for this project there.
Version Numbers Matter
When I first wrote this post I was uing r146 of threejs.
1 - First revision of the house 2 source code
The DAE loader helper
When using a loader like the DAE loader there is not just simply loading one or more DAE files, but also setting what the resource path is for each file as well. So I will want to have a way to load one or more DAE files, but also set a resource path for additional textures that I will be using for each file as well. Another problem that I ran into with this is how to go about defining what I want to import from a dae file. Some times I will just want to load in everything and be done with it. However often I will just want one or two objects from a dae asset and leave everything else. Also I have found that some times I would like to use the textures, but use them with a whole other kind of material, or a different kind of map of the same material. One way that I have found to address this is to have what I am calling a cloner function.
The most simple form of this cloner function would be to just call the object3d clone method for every object in the dae file, and then add all of these clones to a single source scene object. So that is what I am doing when it comes to making a kind of hard coded default cloner method. However in many projects I will want to pass a custom method for this where I can do things like using the basic material in place of the phong material, or define some logic so that only mesh objects, or mesh objects of a given name pattern will be added to the source scene object.
1.1 - Basic example where I am just loading in the house model
1.2 - Video example
For a video example I just want to move the camera around, and maybe also add an additional mesh that will just work as some grass to place this down onto. This is then a start point for the final video1 project for this post that should be up at the top of the post. When I make my videos for blog posts like this I start out with something like this but then add additional code that makes use of my many other threejs project examples that I have made thus far.
This house model is just like the first one in the sense that the goal is to just create an object that looks like a house from the outside, but there is no need to model out the inside of the house. This is because for the most part all of my threejs projects thus far have to do with making little video projects, and when it comes to those kinds of projects often I do not need to go ll the way modeling things out at least when it comes to just the outside of the house anyway. So maybe at some point there will be a house three threejs example project and so forth, and when it comes to that maybe I will start going in the direction of modeling out some insides of a house as well, maybe even go so far as to make something that might even be up to code and can end up being built in real life but that is a major deal of course. For now I have not even worked out basic things like how to go about setting what the scale should be and so forth, still it goes without saying that this example is a step in that direction at least compared to the house one threejs project example.