Making Phyramid's procedurally rendered 3D header with three.js

What it does

When we updated the Phyramid website in August 2014, we created a header background to go with our identity, employing geometric shapes. The background, pictured below, was made using 3DS Max — we displaced a segmented plane's vertices on all axes, added a directional light then placed a camera above the scene. This render served us well, but we thought it would be much cooler to render the whole thing inside the browser in the first place. Not only would this look nicer, but we could also take advantage of the medium's interactivity. So that's what we did. We opted to use the wonderful three.js and recreate the relatively simple scene instead of exporting it from 3DS Max. Here's how we did…from phyramid.com

• 
  Triangulart2016 · maxwellito.github.io · ▲106

  Graphic editor build in JS to create isometric illustrations

• 
  3D Parallax Editor by Webydo2016 · 3d-parallax.webydo.com · ▲145

  Craft interactive 3D animations, without code

• 
  I'm developing a 3D engine in JavaScript and WebGL and video logging it2020 · youtube.com · ▲6
• 
  3D Editor to Create Animations, in the Browser2021 · twitter.com · ▲8
• 
  A free tool for real world procedural generation in Unity3D2017 · youtube.com · ▲7
• AE
  An Extension System for three.js2012 · learningthreejs.com · ▲5

• 
  SimCity, but with Permits▲847

  A free city-building game in your browser. You are the mayor. You know what the city needs. Now get it past the zoning board, the neighbors, the appeals court and the next election.

  Life & fun · 19h ago · permit.petercai.com

• IV
  I've been paying for a rural Tanzanian's education for 10 years▲778

  Life & fun · 13d ago · tanzaniaeducationproject.org

• 
  Bigwords.page – Turn any screen into a sign. The URL is the app▲728

  Turn a phone, tablet or TV into a sign. Type a message and it fills the screen: welcome signs, timers, Wi-Fi passwords and more. No app, no account, free.

  Life & fun · 14d ago · bigwords.page

• 
  Guitoro, a virtual guitar you strum with your keyboard▲573

  Play a free virtual guitar online with your keyboard or by touch. Slow songs down and see every chord, string and strum. Acoustic, classic, electric and bass.

  Life & fun · 8d ago · guitoro.com

• 
  See *almost* any carriers phone settings▲432

  Carrier settings from iPhone, Pixel and Galaxy firmware, decoded and compared: APNs, VoLTE, 5G and Wi-Fi Calling per carrier, and what each build changed.

  Life & fun · 12d ago · carrierexplode.com

• 
  The whole Solar System and every tracked satellite, live in the browser▲407

  Life & fun · 22d ago · space.bl2.net

• 
  Hooked▲836

  A book on how to build habit-forming products

  Life & fun · 2014 · amazon.com

• 
  Bartender▲616

  Organize and hide menu bar items on your Mac

  Life & fun · 2014 · macbartender.com

• 
  Startup Threads▲519

  Ship custom shirts to fans & leads without holding inventory

  Life & fun · 2014 · game-corner.actionflash.com

• 
  Echo by Amazon▲480

  A hands-free speaker you control with your voice

  AI · 2014 · amazon.com

• 
  Withoomph▲456

  Free, beautifully designed logos instantly

  Work · 2014 · canva.com

• MM
  Meet me, I'll buy you coffee▲427

  Life & fun · 2014 · letstalkover.coffee