Category Archives: Front End Suffolk

three.js at FE Suffolk

As mentioned in my previous blog post, I had a talk lined up at FE Suffolk about my dabbling with the three.js library. While it went well, I did my usual trick of planning well in advance but clamming up on the actual talk.

Below is a link to all of the scenes/files I showed on the night and if you do the whole inspect the page thing, you will be able to see some of my notes for each section. They are fairly basic scenes as I was just showing some of what I’d picked up while playing with it. Some of the files are quite large (the big finish one is 4.5mb) so may take while to load, I’ve found refreshing the page constantly doesn’t help but it does make me feel like I’m doing something. I intentionally left the obj’s large to see how well three.js would handle them and the mtl files and I’m pretty happy with how well it performed.

All scenes can be navigated using the mouse (click and drag to rotate), the 3d objects which are imported are hand crafted by myself in c4d, everything else comes from three.js and all scenes are made by plagerising following examples from the website.

1 set the scene
A basic page setup with three.js loaded

2 objects
The scene with (wait for it) some objects! Actually a selection of some of the objects within three.js.

3 objects animation
A torus knot animated and bouncing around like a jack rabbit on speed.

4 render effects – ascii
Ascii effects render

5 video cube
original Buck Rogers

6 import obj file
with special guest appearance by the star of last years Unity talk

7 fade
Press any key when its loaded so see how this got its name

8 bad Buck
Demonstrating what happens when a poly with ngons is loaded

9 good Buck
Random factiod, those spacecraft are called Thunderfighters and one day I may actually get round to texturing it properly.

big finish
Featuring 100% more rainbows.

Plus if you’re really into it, you can download the zip file of everything to pick apart.

If any of this is of interest, I’d recommend visiting to see what people who know what they are doing can do with it, rather than mucking about with Skeletor’s head.

I’m making a note here, huge success

Well, nearly…

Monday night (May 27th) was FE Suffolk night and I’d volunteered to give a talk about my use of Cinema 4d and how I have used it to make content for websites, games, videos and other such tomfoolery. To try and make it interesting to the web people in the audience who have probably never been near a NURBS or a metaball in their lives, I thought it would be more fun to demo both Cinema 4d and Unity to give an idea about how a 3d app can be slotted into a workflow. That was the theory anyway but as the saying goes, the best laid plans…

I thought a good way to grab the audiences attention would be to build an iconic object from a well know game so picked the weighted companion cube simply as it’s a cube shape so works well with going from a primitive shape up to something more complex. I built the cube on a Sunday afternoon the week before the talk and spent about a few hours over the next couple of nights putting the texture together while having some fun with the model.
Cinema 4d Cube
This shows my step by step process starting with a primitive cube. The second one is a demo to show a default cube with its standard UV and how simple it is to drop a texture on to get a basic object textured. The third cube is me using a boolean to build some of the shape up, yeah yeah yeah… booleans are not the best way to work but sometimes they can be used to get good results. The fourth cube is the final thing cleaned up and then five is the final textured cube with the UV’s cleaned up as the process of modeling the cube creates some horrible overlapping on the UV. I would go into depth on what some of the terms are but I doubt I could explain them well enough without a load of pictures.

The final result isn’t bad for a few hours work and it’s free to download from the freebies section of the site.

companion cube

A quick video was rendered up to show an example of dynamics.

I then edited an existing Unity sandbox I’ve made to include the cube, along with a script to interact with it (pick it up and chuck it) but I left that as a backup as I really wanted to demo how to import objects from C4D into Unity and then work with them. The landscape was built using a selection of the default items and scripts within Unity but some of the assets are mine such as the crate, the rather crude toilet (crude model rather than crude as in rude) and the picture of famed Sci-fi author Isaac Asimov is something I don’t really think I can explain. Finally I installed the unity player onto my laptop, tested it, copied all the files over and then set off for the talk.

My talk was right after one called ‘Javascript without jQuery’ by the main man of FE Anders Fisher, I got up, plugged the projector cable in the laptop and was greeted by what had to be the smallest screen in the world. My laptop, in an attempt to display the small resolution of the projector, crushed all of the C4D screen into a mess of jumbled screens. So for those that haven’t seen C4D before, this is what it should have looked like:

Not like this:


So not one to be daunted too much, I shuffled on and managed to go through a few of the steps I took in creating the cube and explaining a bit about UV mapping. I should add that while UV mapping is a pretty important step when trying to make a good model, its also one of the most mind numbing processes ever developed by man, and it often takes me the longest out of any stage of making something as I tend to lose the will to live while UVing.

The biggest hurdle came when trying to work with unity as I couldn’t find any of the stuff I wanted to talk through properly and then to rub it in further, the object imported fine into Unity but refused to be imported into the scene. I ended up going straight to the finished version and back-peddling through the steps to show how I added a box collider and a rigid body then applied the script to the scene.

The test scene worked fine in Unity but fell over when I exported it and ran it as it turns out theres an export to offline mode. Well I didn’t know did I? It seems you need a whole load of js nonsense to make it work and without an internet connection it just fails so theres a little tickbox for export to offline mode that pumps out the needed files. You live and learn.

In the end I think I got there, just about, but I think GLaDOS had a hand in a few of the things that threw me off.

A big thanks to Kerry Buckley for taking a photo of me mid ramble.
dr cube and the unity 3d cinema 4d nightmare from hell

If anyone has any questions, feel free to chip in below but finally… here’s the link to the scene: FE Suffolk Unity Demo

Talking of colour

I’d better get this up now before it vanishes from my memory.

I gave a talk on Monday night at the loverly Brewery Tap pub for the loverly Front End Suffolk about loverly colour. A vague subject perhaps, but I wanted to give a bit of grounding to people who may not have known some of the rubbish I’ve picked up over the years that I feel are important to design such as RGB & CMY, how adult & children’s websites treat colour differently and some of the ways that colour is used on the web (eg navigation and branding). The slides are available to download as a pdf along with my notes from the talk but they may be a little hard to follow without me jumping around like a jackalope infront of a screen. Weeeeell I thought I was jumping around, I was probably just slouching.

As I said at the talk, for me colour is something that you need to almost imagine rubbing your face against to feel the texture, I dislike all these clean and stark sites around at the moment so unless the site is there purely for information consumption (such as wikipedia) I want to be engaged visually.

I really enjoyed getting the slides ready for the talk and I think I managed to cover most of my points without flustering too badly. Although I’ve given talks in public and run some workshops before, this was the first time I actually didn’t know how the audience would react, as it was a room full of my peers but thankfully a few people came up to me after to ask questions and discuss some of the points that I had made in the talk so I think it went down ok.

The only thing that stuck in my mind was about halfway through, someone asked me a question about colour in children’s sites being influenced by culture. I think thats what it was anyway, I kind of froze mentally, repeated a few things (can’t remember what) and carried on. Whoever that was (i didn’t see) SORRY! I wish I could actually remember some details but I think I was too much in a state of adrenalin rush at the time.

If anyone at the talk has any questions, please feel free to hit me up here or on twitter where I seemed to pick up a number of people right after the talk. Also the page with the downloads on is my third most popular page at the moment according to my Analytics, right after the main site and (for some strange reason) my Mechanicus page…

Days cycled to work: 90
Days driven all the way to work: 0
Days sailed to work: 1
Days driven half way to drop the car off at the garage to have a service: 1
Days tramped along in snow and ice: 2