{"id":11348,"date":"2014-05-29T21:06:21","date_gmt":"2014-05-29T20:06:21","guid":{"rendered":"http:\/\/www.kirkd.co.uk\/blog\/?p=11348"},"modified":"2025-08-04T16:06:21","modified_gmt":"2025-08-04T15:06:21","slug":"three-js-fe-suffolk","status":"publish","type":"post","link":"https:\/\/www.kirkd.co.uk\/blog\/three-js-fe-suffolk\/","title":{"rendered":"three.js at FE Suffolk"},"content":{"rendered":"

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

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.<\/p>\n

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<\/del> following examples from the threejs.org<\/a> website.<\/p>\n

1 set the scene<\/a>
\nA basic page setup with three.js loaded<\/p>\n

2 objects<\/a>
\nThe scene with (wait for it) some objects! Actually a selection of some of the objects within three.js.<\/p>\n

3 objects animation<\/a>
\nA torus knot animated and bouncing around like a jack rabbit on speed.<\/p>\n

4 render effects – ascii<\/a>
\nAscii effects render<\/p>\n

5 video cube<\/a>
\noriginal Buck Rogers<\/p>\n

6 import obj file<\/a>
\nwith special guest appearance by the star of last years Unity talk<\/p>\n

7 fade<\/a>
\nPress any key when its loaded so see how this got its name<\/p>\n

8 bad Buck<\/a>
\nDemonstrating what happens when a poly with ngons is loaded<\/p>\n

9 good Buck<\/a>
\nRandom factiod, those spacecraft are called Thunderfighters and one day I may actually get round to texturing it properly.<\/p>\n

big finish<\/a>
\nFeaturing 100% more rainbows.<\/p>\n

Plus if you’re really into it, you can of everything to pick apart.<\/p>\n

If any of this is of interest, I’d recommend visiting https:\/\/threejs.org\/<\/a> to see what people who know what they are doing can do with it, rather than mucking about with Skeletor’s head.<\/p>\n","protected":false},"excerpt":{"rendered":"

As mentioned in my previous blog post, I had a talk lined up at FE…<\/p>\n","protected":false},"author":5,"featured_media":11354,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[8],"tags":[348,289],"class_list":["post-11348","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-tomfoolery","tag-front-end-suffolk","tag-three-js"],"aioseo_notices":[],"yoast_head":"\nthree.js at FE Suffolk - KirkD<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.kirkd.co.uk\/blog\/three-js-fe-suffolk\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"three.js at FE Suffolk - KirkD\" \/>\n<meta property=\"og:description\" content=\"As mentioned in my previous blog post, I had a talk lined up at FE...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kirkd.co.uk\/blog\/three-js-fe-suffolk\/\" \/>\n<meta property=\"og:site_name\" content=\"KirkD\" \/>\n<meta property=\"article:published_time\" content=\"2014-05-29T20:06:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-04T15:06:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.kirkd.co.uk\/blog\/wp-content\/uploads\/2014\/05\/skeletor.png\" \/>\n\t<meta property=\"og:image:width\" content=\"952\" \/>\n\t<meta property=\"og:image:height\" content=\"850\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Kirkd\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dr_monkeyface\" \/>\n<meta name=\"twitter:site\" content=\"@dr_monkeyface\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirkd\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.kirkd.co.uk\\\/blog\\\/three-js-fe-suffolk\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.kirkd.co.uk\\\/blog\\\/three-js-fe-suffolk\\\/\"},\"author\":{\"name\":\"Kirkd\",\"@id\":\"https:\\\/\\\/www.kirkd.co.uk\\\/blog\\\/#\\\/schema\\\/person\\\/11e74cae78e3ab4efeea6b845862c846\"},\"headline\":\"three.js at FE Suffolk\",\"datePublished\":\"2014-05-29T20:06:21+00:00\",\"dateModified\":\"2025-08-04T15:06:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.kirkd.co.uk\\\/blog\\\/three-js-fe-suffolk\\\/\"},\"wordCount\":401,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.kirkd.co.uk\\\/blog\\\/#\\\/schema\\\/person\\\/4bef8a64dae90a2bea21a2e1cb7a75ae\"},\"image\":{\"@id\":\"https:\\\/\\\/www.kirkd.co.uk\\\/blog\\\/three-js-fe-suffolk\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.kirkd.co.uk\\\/blog\\\/wp-content\\\/uploads\\\/2014\\\/05\\\/skeletor.png\",\"keywords\":[\"Front End Suffolk\",\"three.js\"],\"articleSection\":[\"Web tomfoolery\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.kirkd.co.uk\\\/blog\\\/three-js-fe-suffolk\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.kirkd.co.uk\\\/blog\\\/three-js-fe-suffolk\\\/\",\"url\":\"https:\\\/\\\/www.kirkd.co.uk\\\/blog\\\/three-js-fe-suffolk\\\/\",\"name\":\"three.js at FE Suffolk - KirkD\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.kirkd.co.uk\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.kirkd.co.uk\\\/blog\\\/three-js-fe-suffolk\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.kirkd.co.uk\\\/blog\\\/three-js-fe-suffolk\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.kirkd.co.uk\\\/blog\\\/wp-content\\\/uploads\\\/2014\\\/05\\\/skeletor.png\",\"datePublished\":\"2014-05-29T20:06:21+00:00\",\"dateModified\":\"2025-08-04T15:06:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.kirkd.co.uk\\\/blog\\\/three-js-fe-suffolk\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.kirkd.co.uk\\\/blog\\\/three-js-fe-suffolk\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/www.kirkd.co.uk\\\/blog\\\/three-js-fe-suffolk\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.kirkd.co.uk\\\/blog\\\/wp-content\\\/uploads\\\/2014\\\/05\\\/skeletor.png\",\"contentUrl\":\"https:\\\/\\\/www.kirkd.co.uk\\\/blog\\\/wp-content\\\/uploads\\\/2014\\\/05\\\/skeletor.png\",\"width\":952,\"height\":850},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.kirkd.co.uk\\\/blog\\\/three-js-fe-suffolk\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.kirkd.co.uk\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"three.js at FE Suffolk\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.kirkd.co.uk\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.kirkd.co.uk\\\/blog\\\/\",\"name\":\"KirkD\",\"description\":\"feeding on the gammy carcass of life since 1793\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.kirkd.co.uk\\\/blog\\\/#\\\/schema\\\/person\\\/4bef8a64dae90a2bea21a2e1cb7a75ae\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.kirkd.co.uk\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.kirkd.co.uk\\\/blog\\\/#\\\/schema\\\/person\\\/4bef8a64dae90a2bea21a2e1cb7a75ae\",\"name\":\"David\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e81fbe6e950e195c15f8d589e9d04e8cad0b24e713857b7a3b75c4bd6089ca2c?s=96&d=wavatar&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e81fbe6e950e195c15f8d589e9d04e8cad0b24e713857b7a3b75c4bd6089ca2c?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e81fbe6e950e195c15f8d589e9d04e8cad0b24e713857b7a3b75c4bd6089ca2c?s=96&d=wavatar&r=g\",\"caption\":\"David\"},\"logo\":{\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e81fbe6e950e195c15f8d589e9d04e8cad0b24e713857b7a3b75c4bd6089ca2c?s=96&d=wavatar&r=g\"},\"sameAs\":[\"http:\\\/\\\/www.kirkd.co.uk\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.kirkd.co.uk\\\/blog\\\/#\\\/schema\\\/person\\\/11e74cae78e3ab4efeea6b845862c846\",\"name\":\"Kirkd\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9ab3e05b808765807d33a34b33af51e8e3b5fa2ba01fefb023368bd90ddb6dac?s=96&d=wavatar&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9ab3e05b808765807d33a34b33af51e8e3b5fa2ba01fefb023368bd90ddb6dac?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9ab3e05b808765807d33a34b33af51e8e3b5fa2ba01fefb023368bd90ddb6dac?s=96&d=wavatar&r=g\",\"caption\":\"Kirkd\"},\"sameAs\":[\"http:\\\/\\\/kirkd.co.uk\\\/\",\"https:\\\/\\\/x.com\\\/dr_monkeyface\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"three.js at FE Suffolk - KirkD","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.kirkd.co.uk\/blog\/three-js-fe-suffolk\/","og_locale":"en_GB","og_type":"article","og_title":"three.js at FE Suffolk - KirkD","og_description":"As mentioned in my previous blog post, I had a talk lined up at FE...","og_url":"https:\/\/www.kirkd.co.uk\/blog\/three-js-fe-suffolk\/","og_site_name":"KirkD","article_published_time":"2014-05-29T20:06:21+00:00","article_modified_time":"2025-08-04T15:06:21+00:00","og_image":[{"width":952,"height":850,"url":"https:\/\/www.kirkd.co.uk\/blog\/wp-content\/uploads\/2014\/05\/skeletor.png","type":"image\/png"}],"author":"Kirkd","twitter_card":"summary_large_image","twitter_creator":"@dr_monkeyface","twitter_site":"@dr_monkeyface","twitter_misc":{"Written by":"Kirkd","Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.kirkd.co.uk\/blog\/three-js-fe-suffolk\/#article","isPartOf":{"@id":"https:\/\/www.kirkd.co.uk\/blog\/three-js-fe-suffolk\/"},"author":{"name":"Kirkd","@id":"https:\/\/www.kirkd.co.uk\/blog\/#\/schema\/person\/11e74cae78e3ab4efeea6b845862c846"},"headline":"three.js at FE Suffolk","datePublished":"2014-05-29T20:06:21+00:00","dateModified":"2025-08-04T15:06:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.kirkd.co.uk\/blog\/three-js-fe-suffolk\/"},"wordCount":401,"commentCount":0,"publisher":{"@id":"https:\/\/www.kirkd.co.uk\/blog\/#\/schema\/person\/4bef8a64dae90a2bea21a2e1cb7a75ae"},"image":{"@id":"https:\/\/www.kirkd.co.uk\/blog\/three-js-fe-suffolk\/#primaryimage"},"thumbnailUrl":"https:\/\/www.kirkd.co.uk\/blog\/wp-content\/uploads\/2014\/05\/skeletor.png","keywords":["Front End Suffolk","three.js"],"articleSection":["Web tomfoolery"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.kirkd.co.uk\/blog\/three-js-fe-suffolk\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.kirkd.co.uk\/blog\/three-js-fe-suffolk\/","url":"https:\/\/www.kirkd.co.uk\/blog\/three-js-fe-suffolk\/","name":"three.js at FE Suffolk - KirkD","isPartOf":{"@id":"https:\/\/www.kirkd.co.uk\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.kirkd.co.uk\/blog\/three-js-fe-suffolk\/#primaryimage"},"image":{"@id":"https:\/\/www.kirkd.co.uk\/blog\/three-js-fe-suffolk\/#primaryimage"},"thumbnailUrl":"https:\/\/www.kirkd.co.uk\/blog\/wp-content\/uploads\/2014\/05\/skeletor.png","datePublished":"2014-05-29T20:06:21+00:00","dateModified":"2025-08-04T15:06:21+00:00","breadcrumb":{"@id":"https:\/\/www.kirkd.co.uk\/blog\/three-js-fe-suffolk\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kirkd.co.uk\/blog\/three-js-fe-suffolk\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.kirkd.co.uk\/blog\/three-js-fe-suffolk\/#primaryimage","url":"https:\/\/www.kirkd.co.uk\/blog\/wp-content\/uploads\/2014\/05\/skeletor.png","contentUrl":"https:\/\/www.kirkd.co.uk\/blog\/wp-content\/uploads\/2014\/05\/skeletor.png","width":952,"height":850},{"@type":"BreadcrumbList","@id":"https:\/\/www.kirkd.co.uk\/blog\/three-js-fe-suffolk\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kirkd.co.uk\/blog\/"},{"@type":"ListItem","position":2,"name":"three.js at FE Suffolk"}]},{"@type":"WebSite","@id":"https:\/\/www.kirkd.co.uk\/blog\/#website","url":"https:\/\/www.kirkd.co.uk\/blog\/","name":"KirkD","description":"feeding on the gammy carcass of life since 1793","publisher":{"@id":"https:\/\/www.kirkd.co.uk\/blog\/#\/schema\/person\/4bef8a64dae90a2bea21a2e1cb7a75ae"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kirkd.co.uk\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":["Person","Organization"],"@id":"https:\/\/www.kirkd.co.uk\/blog\/#\/schema\/person\/4bef8a64dae90a2bea21a2e1cb7a75ae","name":"David","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/e81fbe6e950e195c15f8d589e9d04e8cad0b24e713857b7a3b75c4bd6089ca2c?s=96&d=wavatar&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e81fbe6e950e195c15f8d589e9d04e8cad0b24e713857b7a3b75c4bd6089ca2c?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e81fbe6e950e195c15f8d589e9d04e8cad0b24e713857b7a3b75c4bd6089ca2c?s=96&d=wavatar&r=g","caption":"David"},"logo":{"@id":"https:\/\/secure.gravatar.com\/avatar\/e81fbe6e950e195c15f8d589e9d04e8cad0b24e713857b7a3b75c4bd6089ca2c?s=96&d=wavatar&r=g"},"sameAs":["http:\/\/www.kirkd.co.uk"]},{"@type":"Person","@id":"https:\/\/www.kirkd.co.uk\/blog\/#\/schema\/person\/11e74cae78e3ab4efeea6b845862c846","name":"Kirkd","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/9ab3e05b808765807d33a34b33af51e8e3b5fa2ba01fefb023368bd90ddb6dac?s=96&d=wavatar&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/9ab3e05b808765807d33a34b33af51e8e3b5fa2ba01fefb023368bd90ddb6dac?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9ab3e05b808765807d33a34b33af51e8e3b5fa2ba01fefb023368bd90ddb6dac?s=96&d=wavatar&r=g","caption":"Kirkd"},"sameAs":["http:\/\/kirkd.co.uk\/","https:\/\/x.com\/dr_monkeyface"]}]}},"_links":{"self":[{"href":"https:\/\/www.kirkd.co.uk\/blog\/wp-json\/wp\/v2\/posts\/11348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kirkd.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kirkd.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kirkd.co.uk\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kirkd.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=11348"}],"version-history":[{"count":1,"href":"https:\/\/www.kirkd.co.uk\/blog\/wp-json\/wp\/v2\/posts\/11348\/revisions"}],"predecessor-version":[{"id":14138,"href":"https:\/\/www.kirkd.co.uk\/blog\/wp-json\/wp\/v2\/posts\/11348\/revisions\/14138"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kirkd.co.uk\/blog\/wp-json\/wp\/v2\/media\/11354"}],"wp:attachment":[{"href":"https:\/\/www.kirkd.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=11348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kirkd.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=11348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kirkd.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=11348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}