When I am working on threejs demos and simple project examples I will often get into a situation in which I might want to copy a mesh object. When doing so there is the idea of just copying the own properties of the mesh object, but often I will also need clones of all the child objects as well, there is also the geometry, and material that is used by the mesh that I might want to clone while I am at it.

The process of copying an object in general can be tricky business, as such I have wrote a few posts on this when it comes to cloning objects with lodash methods as well as native javaScript by itself such as with my post on copying an array with just vanilla javaScript array prototype methods. When doing so there are two general ways of thinking about the process of copying an object, shallow cloning, and deep cloning.

Shallow cloning is creating an new object where it is more or less just the properties of the object itself that are copied, and not anything when it comes to nested objects that are values of the source object. Deep cloning then is then the general term for getting into the subject of what should and should not be copied when it comes to looping over all the nested properties of an object. Things can prove to get a little complex with that in some situations though, for example some objects I might want to copy, while others I might just want to reference.

If I am making a threejs project and I want to shallow copy of a mesh object then I just need to use the clone method of a mesh instance. Once I have a shallow copy it is then a question of what additional steps I might want to take when it comes to cloning additional nested objects of the mesh object. This will then be a post on the mesh clone method, and while I am at it also address some of the issues that might come up when making copies of mesh objects, and cloning objects in general.

Read More

I work with threejs a lot, and when doing so I have found that one thing that is fun is working out expressions for handling the movement of a camera. There ae a number of options to work with when it comes to cameras but for the most part I end up using a perspective camera. Apart from working out javaScript expressions for the x, y a,d z values of a position there are all kinds of ways to go about moving a camera such as having a camera move around of course, and must of this applies to objects in general actually

There is also having the position and rotation of a camera be subject to event handlers that are attached for pointer events. In other words to control the camera with a mouse, and or keyboard which is nice when I am working on a project and I would like to see how things look from all kinds of different perspectives. There are some official controls that are in the threejs Github repository for this sort of thing in the form of orbit controls, and fly controls for example. However there is also of course making ones own custom controls for a project which is often a required part of working out an over all user interface.

So in this post I will be writing about some threejs examples that have to do with using the position and rotation properties of an instance of a camera along. This can involve working out expressions, but also there are a whole lot of threejs feature to work with also when it comes to this sort of thing as well when it comes to looking into everything there is to work with in the Vector3 class, as well as Curves just to name a few core features to be aware of.

What I work out here for a camera will also apply to just about anything in threejs that inherits from the Object3d class as well. So much of this is just ways of moving and rotating objects in general actually, but still I will be keeping the emphasis on cameras alone for the most part here.

Read More

Threejs is certainly an example of fun and exciting javaScript. Sure there might prove to be many examples of practical application of threejs to write about as well, however I often see it more as something to play with when it comes to making simple animations, games, and toy like projects.

I often find myself making clocks because they are a quick yet fun thing to make with javaScript and canvas elements. However there is a great deal of room for creativity when it comes to this kind of project as well if I do take a moment to pour some serious time into one of them. However for the sake of this post at least I think I will be starting out with just a basic example of a clock using threejs. With that said this post will be on a threejs example that is a javaScript powered basic clock which should prove to be a simple fun little project.

This is an example type post in which I am making a threejs project where things are updated by way of the local client system time. This is then not to be confused with the THREE.Clock constructor which is a class that can be used to keep track of time that has elapsed from a starting point. This Clock class often comes into play when making a main animation loop, which is something that is kind of a whole other subject apart from this.

Read More

For today I would like to write another post about a canvas example, because canvas is fun and life is short. Todays post on canvas examples will be an example of a basic clock using canvas and javaScript. Making clocks is fun because doing so is easy, but there is also lots of room when it comes to doing things that are original with it when it comes to getting creative with canvas and javaScript.
Sure a starting point would be just a simple digital or analog clock but why stop there as there are so many things that a developer could do when it comes to working with date objects and using them to update the state of an object that can then be rendered using canvas. Still in this post I will be going over just a simple basic clock concept using canvas and javaScript that will involve a state object and then methods that are used to render that state object to a canvas element. However this basic idea can be expanded to do all kinds of interesting and creative things when it comes to making clocks.

If you want to get a copy of the source code of this basic clock example it can be found in the canvas-examples repository at my github account. Along with the source code for all my other canvas example for this series of posts.

Read More

So now for yet another canvas example, this one is going to be pretty cool, or at least I think so. It has to do with the limits of 2d images when it comes to a set resolution and color depth. Or in other words every image that is possible when given a finite width, height and color depth.

When working with an image of any fixed width, height, and color depth there is a finite number of possible combinations for that kind of a matrix. Sure as you increase the resolution and color depth the total number of possibilities does start to become a crazy large finite number but it is still never the less a finite number never the less.

So with that said this is one of several ideas that keep coming back to be, and I revisit it now and then. So I though I would make it part of my canvas example collection of projects and write a post about this one because I think it is pretty cool. For now I think I might just stick with regular javaScript numbers when it comes to the image index values, but sooner or later I think this is the kind of project that calls for the use of high precession math via a module like bigInt.js or the javaScript built in BigInt constructor.

Read More