When making a threejs project there will be at least some projects in which I might want to add one or more light sources to a scene object. There are a lot of options to choose from when it comes to light sources, and sense this post will be a general overview of light in threejs I will be going over what some of those options are. However there are also a whole lot of other things that branch off from the use of light sources that I am also going to want to write about also here while I am at it.

Read More

The Context Bridge class in electron.js is what I need to use in late versions of electron.js to create a shared API with my client side javaScript code in such a way that I only expose what is needed in the front end. There are alternatives to this such as disabling context isolation and enabling node integration when creating a browser window, but still there are good reasons why this is the default. The main concern here has to do with security and that it is not generally such a good idea to expose all that nodejs has to work with to the client system.

So then for this example the basic project idea is just a simple text editor project. The general idea here is to have a text area element in the html file that will be used for the main Browser Window, and I will then be using some additional JavaScript code in a client side javaScript file to make use of the API defined in the preload.js file in which I am using the context bridge class. This api will contain methods that I can use to attach event handers for when an open and save as option are selected in the file Menu of the main browser window.

In order to create some kind of example that exercises the use of the context bridge as well as the various other classes in electron.js that are closely related to the use of the context bridge class I will need to have some kind of basic project idea. The main class that I have come to find that I need to use with the contextBride class is to also use the ipcRenderer class, this is what I will want to use to define what to do when I make calls of the send method of the webContext object in main.js. Speaking of the main.js file there are also a wide range of other classes that I am going to want to use there also such as the dialog class which is what I need to use in order to create native dialog windows for opening and saving a file.

Read More

I have wrote a number of posts on the various helpers in threejs that can be used to get a better idea of what the visual state of things is with something in a threejs project such as with the arrow helper for example. However thus far I have not wrote one on the grid helper, so todays post will be just a few examples of using this kind of helper in a threejs project.

There are a number of other things that can be done in place of using the grid helper, such as having one or more objects in the scene that can replace what the grid helper is used for, as well as be a part of the scene content itself. One of the typical things to do with that would be to use the plane geometry constructor to create a crude yet effective kind of ground mesh. When it comes to that kind of geometry. There are ways to have an array of materials, and then also work out some kind of pattern when it comes to using what material with what grid location. There is also just making a single texture for the surface of the plane geometry as well, using another option such as the box geometry, or going so far as making some kind of custom geometry by starting out with a custom position attribute.

However when it comes to just having a grid in the scene to just make sure that objects are where they should be, or to just get a sense of what is going on with things when it comes to working out some kind of animation, the grid helper is a nice quick way of having a grid to look at rather than just space. There are a few things to be aware of when using this Grid helper constructor, so at least a few quick example of this are called for that I will be parking in this content.

Read More

The Browser Window class is one of the first Classes in Electron.js that one will want to work with. It is possible to have an electron app without using it, but chances are I am going to want to have at least one if not more windows to work with, and to do so I will want to use this class.

There is also one other class that I think that a developer should be aware of right alway also, which is the Menu class. This Menu class as the name suggests is how to go about creating a custom menu for one or more windows in the application. So in todays example I am just going to be taking a few more steps forward from my hello wold example that I started with with Menus also while looking more into what can be done with the browser window class, starting with maybe the set menu method of the browser window class. I have found thus far that this is the method that I am going to want to use when it comes to having more than one kind of menu for more than one kind of window.

Read More

For this threejs project example I wanted to make a 3D version of a 2d canvas javaScript project that I made a little while back that has to do with something I am calling a source layer. The general idea of what I have in mind here is to make my own art program that involves setting up what the content of a resource layer is, then I have one or more additional canvas layers positioned on top of that source layer that I draw on.

There may be alternative ways of doing this sort of thing such as just creating a scene the way that I want to, adjust the position of the camera and so forth and then just take a still picture and open that still picture up in an image editing program like GIMP. Any decent image manipulation program such as GIMP will have layers as a feature, so I can add the still of the scene as a source layer, then create another layer on top of that and draw to that. with that said there is the question of how to go about justifying making something like this rather than just using tools that are all ready out there to work with. I can not think of that much, but for starters there is just making a minimal custom tailored program that is made for a specific kind of work flow, or over all style. Aside from that it is possible that this example might just prove to be another one of my unfinished prototypes for some kind of application using threejs.

I would like to make at least one, if not more projects that function as a kind of tool to help in in the process of making projects though. This project might not prove to be the best example of this kind of thing, but sooner or later I might expand on this specific kind of threejs example. That is to create some kind of tool that helps in in the process of making some kind of asset or file product.

Read More