There should be a standard way to go about making an object in threejs visible or not just like that of the visibility and display css properties when it comes to styling some html. It would seem that there is such a standard property which would be the visible property of the Object3d class, this property is a Boolean value that is set to true by default. The state of the visible Boolean is used as a way to inform a renderer if a given object such as a mesh object should even be rendered or not to begin with.

However it is true there are also a number of other subjects of interest such as setting the transparency property of materials for example that will will still make an object render, it is just that an opacity value can be set to zero that will have a similar visual effect. There is also just simply moving an object out of view of the camera of course which might often prove to be a quick, brainless way to get this done and move on. Other option that comes to mind would involve moving mesh objects from one group that is added to a scene object to another group that is not. Yet another way to active this kind of effect would be to make use of the layers feature of threejs as well which is yet even another option.

So in this post I will of course be going over the object3d visible property, but I will also be going over a number of other related topics and code examples so that might also be better ways of getting a desired result when it comes to the visibility of an object in three.js.

Read More

Earlier this week I wrote a post on a simple tree model in three.js, so today I thought I would write a post on another example in which I am using that tree model to create a simple world of sorts with these trees all over it. The idea here is to just have instances of this simple tree model positioned on the surface of a sphere. With that said I am going to want to have a main world module that will create and position a collection of three models, and it will also make use of some additional features that I have worked out in other examples, such as using canvas elements to create textures for the trees as well as the world sphere itself.

So this time around the three.js example in this post is actually not just one example, but a combination of several examples that I have worked out all ready in the past. This is not the first such example that I have made like this, but I think that I would like to make at least a few of these. The reason why I say that is that I am trying to find out what I might like to do with three.js over the long term when it comes to making animations, games, or maybe even something practical if I can manage doing so. I do like writing these posts, but I would like to also do more than just that if I am going to make this the main subject that i write about moving forward.

Read More

When it comes to rotating things in threejs there is the rotation property of the object3d class that stores an instance of the Euler class which is one way to adjust the local rotaton of such an object. When it comes to a Mesh object which is one of many objects that are based off of object3d, this rotation property can be used as a way to rotate the mesh as a whole, along with any children that might be added to the mesh objects as well.

However it is also worth pointing out that the buffer geometry used in a mesh object can also be rotated independently of a mesh objects orientation as well. In some cases I might want to rotate a geometry rather than rotating the mesh object, or any parent object of the mesh.

When it comes to rotating a buffer geometry there are a number of methods that are of interest for this kind of task. Often I end up using a method like that of the rotateX method however just like that of the Object3d class there is also a look at method that might also work in some cases. However I think it might be best to use these methods only once to make the geometry line up with what would be expected when using an object3d level method or property value to set an orientation of a mesh object that contains a geometry. In this post I will be going over a few examples that will showcase this sort of thing.

Read More

I wrote a post on a simple crude three model example using three.js, but I thought I would come around to making another one of these just for the sake of doing the same thing a different way. The last tree model that I made involves making a whole bunch of cone geometries and then positioning them and rotating them in a way to make something that looks a little like an ever green tree. This is another model like that where I am just using a sphere geometry and a box geometry to create another kind of tree that is more of the Deciduous rather than evergreen type.

So it goes without saying that I am going for a kind of style where I am just making simple basic models using the built in three.js geometries. In the long run though it might be best to look into how to go about making models in blender and then importing them into threejs by way of something like the dae file loader.

This is then a fairly basic threejs example of this kind of model but there are still a few basic things that I need to work out when it comes to creating these kinds of groups of mesh objects. One thing to be aware of is what happens when I use the object3d look at method with out of these. For this tree model I would want for the look at method to make it so that the bottom of the trunk is what is facing the position that I give to the look at method.

Read More

When making a threejs project there might be situations in which it would be nice to have a way to click on a mesh object. When dong so this will result in some kind of action being preformed that is event driven by way of user input rather than some kind of run time script. To do this I need a way to cast a ray from the camera that I am using outward based on a 2d location of the canvas element of the renderer. Then I need to get a collection of mesh objects that intersect with this ray that is going from the camera outward. Luckily this kind of functionality is built into threejs itself and it is called the THREE.RayCaster Class.

There is also the idea of using a raycatser by positioning one at some location in world space, set a direction, and then just get a point on a surface of any kind of geometry. There are all kinds of use case examples for that kind of situation that has to do with knowing how to position one mesh object onto the surface of another mesh object. So that is another general use case that comes to mind that may or may not also involve human input.

There is just getting started with the very basics of raycasting in threejs, and of course I will be starting out with that in this post. However there might be a whole bunch more advanced topics that will also come up when it comes to this sort of thing. So I think that it might be called for to go over at least a few examples of the ray cater class in threejs.

Read More