Tutorial Shows How to Build Papercraft-Style Portfolios with Three.js
Developer Andrew Woan released a new tutorial for building interactive, papercraft-style web portfolios. The guide details a process using three.js, Blender, and React Three Fiber to create unique 3D web experiences. The tutorial includes full source code and example projects for developers seeking creative portfolio ideas.
- Three.js is a JavaScript library first released on GitHub in April 2010 by Ricardo Cabello, also known as Mr.doob. It allows for the creation of GPU-accelerated 3D graphics in a web browser by abstracting the complexities of WebGL, a low-level graphics API. - Blender, the 3D modeling software mentioned in the tutorial, originated as an in-house tool for the Dutch animation studio NeoGeo. Its first source files were written by co-founder Ton Roosendaal on January 2, 1994. - React Three Fiber acts as a React renderer for Three.js, meaning it allows developers to build 3D scenes using reusable, declarative React components instead of writing vanilla Three.js code. This approach can lead to more readable and maintainable code for complex scenes. - The development of React Three Fiber is led by a collective known as Poimandres (pmndrs), which also maintains a wide ecosystem of helpful libraries for it, such as `@react-three/drei` for helpers and abstractions and `@react-three/gltfjsx` for converting GLTF models into JSX components. - After the animation studio NeoGeo was dissolved, Blender was further developed by a new company, Not a Number Technologies (NaN), which went bankrupt in 2002. A successful "Free Blender" crowdfunding campaign then raised €100,000 to purchase the source code and release it to the public as open-source software. - Beyond portfolios, Three.js is widely used for creating interactive 3D games that run directly in a browser, product and architectural visualizations, and complex data visualizations. - The underlying technology that Three.js utilizes is WebGL (Web Graphics Library), a JavaScript API that enables the rendering of 2D and 3D graphics within a web browser without the need for plugins. - The name "Blender" was inspired by a song from the Swiss electronic band Yello, which the animation studio NeoGeo had used in its showreel.