I have been making a few threejs videos lately in which I am testing out how to go about syncing video with audio. Thus far though I am just working out the timing in terms of time stamps and duration and thus I am not taking into account any kind of actual audio sample data to adjust things that are going on when rendering my frames. However I have found that I can export audio sample data in an HTML file format when using Audacity to work out the audio tracks that I want in this video. So I can adjust the sample rate so that I have just one sample per frame, and then I can export the sample data in an HTML file in which I have at least one sample point for each frame of the video. I can then also do this on a track by track basis, so that I have an HTML file of sample data for say drums, then another for bass, and yet another of samples, and so forth.

I then just need to make another threejs examples project that will use something like the THREE.FileLoader to load these HTML files of audio sample data. The just do a little additional work to create a kind of standard object of this data that I extract from the HTML files. I can then use an array of audio sample numbers that have been adjusted to be in the range of 0 and 1 as alpha values for anything and everything that will call for such a value to adjust things like scale, position, rotation, and any additional effects for any module that I am using and so forth. In other words the goal here is to create music visualization using threejs, and audio sample data exported from Audacity.

Read More

I would like to start at least one if not more threejs project examples that have to do with setting up the uv map of a cube created with the THREE.BoxGeometry constructor in threejs. By default the geometry will have a uv map, it is just that it will use all of the given texture for each face of the cube.

There are ways of setting differing textures to each face without doing anything with the uv attribute such as having more than one material and setting the material index values of each face by way of the groups object. However when it comes to cubes and geometry in general sooner of later I am going to want to learn more about how to mutate the uv attribute values with a little javaScript code.

There are two general ways of doing what I would like to do with cubes here. One way would be to mutate the uv attributes over time so that the locations in a single texture change. The other way would be to set up the uv attribute once so that the cube will always used fixed locations of the canvas, then use a canvas element as the texture, and update that texture as needed. In this post what I currently have is centered around the later rather than the former, but that might change with future revisions of this when and if I get to it.

Read More

Lately I have been taking another look into curves in threejs by making a few quick demos of the Quadratic Bezier curve3 constructor which is one of several options to create a curve apart from creating a custom curve. There are a number of uses for creating curves, but for the most part my interest in them is to explore what my options are for coming up with a javaScript project that helpers me define the movement of object3d based objects, mainly mesh objects and cameras.

One major threejs example project that I made and also have made a few revisions of this far is my sequence hooks module that I use to break down a video project into several sequence objects. Anyway in a late revision of the example I added a feature that allows for me to add paths to be used for each sequence which gave me the idea to make a tool to help with the process of creating the data to use for these, thus I started this create path tool threejs example that I will be writing about here.

Read More

In threejs there is a base Curve class as well as a number of classes that work on top of this Curve Class one of which is THREE.QuadraticBezierCurve3. This Quadratic Bezier Curve class creates a Curve that defines a Curve between a start point, and end point, along with a single control point. This can then be used for anything the requires a curve such as the tube geometry constructor just to name one use case example.

There are a number of other built in curve class methods to choose from, but more often than not one of the built in options will work just fine with what I want to do. Only in the event that I truly do need to work out some custom curve logic would I bother trying to make my own custom curve class. Thus far I can not say that I have found that I need to do that, so if this does not do what you want, look into some of the other built in options first before opening that can of worms.

Read More

I am always thinking in terms of what more I can do when it comes to making javaScript modules built on top of threejs that I can use in my various video projects that I make for these blog posts. One such idea is to make an improved way to go about adding text content to a scene object as I am not happy with my current solution for doing so. There are a number of ways of doing this sort of thing I am sure, but I was thinking in terms of making a module centered around the idea of having one or more mesh objects that use a plane geometry and canvas textures as a way of displaying text content in a scene.

The process of doing this sort of thing will then prove to be a little involved then. On top of the text plane module itself I will also want to have at least some kind of canvas module such as the one that I made for my post on canvas textures. With that said because I want to just get up and running with the text plane module I will have to just go with what I worked out when it comes to that sort of thunk so far and get to work on the text plane module. However speaking of the text plane module there is a lot that I will need to do with text, such as End of Line conversion, wrapping text, and using the various 2d canvas drawing methods to render that text to a canvas element.

This will then be yet another one of my threejs examples where I am writing about a module or some kind of project that is built on top threejs. This time it will have a lot to do with using canvas elements to create textures, and also a whole lot about working with text content.

Read More