This will be a post on a nested groups threejs example that I made today that is a continuation of what I started with my post on use of the user data object in the object3d class. The user data object of the Object3d class is a standard object for everything based on object3d for parking application specific data to help make sure that there are no conflicts with properties that are used with three.js.

When making my own code for an over all three.js project I am going to end up with a lot of my own properties and javaScript code that updates those properties. I could do something where I keep all of my own code separate, and then apply that to mesh objects, groups, cameras and so forth. That is to have say to separate collections of state data, one of which I create and update with my own code, and then methods that I used to update the state of a scene objects and all children. However there should still be a standard way of appending some data to objects and the way to do so would be to make use of this user data object.

Read More

For yet another threejs example post I made this backyard scene example that I should write a post on. What I wanted to do is have at least one or more examples that make use of a number of my other projects where I crate a bunch of objects with just the built in threejs geometry classes. That is to create a group of mesh objects that from an over all object of some kind. After I made a few projects like this I just wanted to create a project where I am making use of a whole bunch of projects like that to make an over all larger project. With that goal in mind I guess this project was a success, but now I think I need to put a little more time into what the final product is with an actual three.js project example before even getting started.

This might in time prove to be just one of several more additional future projects that is a composition of several other examples. There is just only so much to write about when it comes to the features of the library itself, so sooner or later I just have to start making some kind of full project that is some kind of animation, game, or some kind of application.

Read More

For another threejs example I made a scene shake module that can be used to shake the whole scene object. When I do so that way I just need to pass the scene object to a method that will apply the current state of a shake object to the scene object. One thing I will want to keep in mind with this is that I do not want to add the camera that I am using to render the scene to the scene object, because if I do I can not see the shake as the camera will be relative to the scene. In the event that I do need to add the camera to the scene then the shake object can be applied to some other object in threejs that is based off of the object3d class other that the scene object such as a group, or the camera.

This shake module might then work out okay when it comes to adding some kind of screen shake effect to a threejs project. For the sake of trying to keep things short, simple and too the point, I did not go over board with features for thus module. The core of the idea is that I just need a way to randomly move an object around within a range, or apply some other kind of logic to produce the shake effect. That is it and as long as it does that more of less it is just a matter of things like code style, and fixing the code when breaking changes are made to threejs itself. So maybe this also will work as a good example of how to go about making a javaScript module for a threejs project as well while I am at it.

Read More

There are a number of official camera controls that can be used with threejs it is just that they are not built into the core of three.js itself. I wrote a post on one of these camera control options which was the orbit controls a long time ago, but I thought that I should take a moment to look into at least one of the other options to make use of in some examples such as the three.js fly controls. So then this will be a quick post on use the official fly controls in a three.js project.

Read More

The depth material in threejs is a material that will render a texture on the faces of the geometry of a mesh using the near and far values of the camera that is used when rendering such a mesh object.

There are a few materials to choose from when it comes to skinning a mesh object without having to bother with external image assets, code generated textures, color attributes, or setting up a light source to show some depth. Often I find myself going with the normal material when it comes to this kind of place holder material but the depth material would be another option.

When it comes to a final choice in materials I often like to go with the the standard material as it is a good over all choice for the most part when it comes to the various maps that it supports. However there are some good things to write about when it comes to the depth material, as well as some other options for materials that work right away without a light source. There is also what branches off from the use of the depth material when it comes to things like the arguments that are given when creating a camera, namely the near and far values.

Read More