For the Three.js Convention in Paris, we wished to make one thing that felt much less like an internet site and extra like a small piece of digital equipment.
The thought was easy: Kind your title. Flip it into metallic.
The thought began with the letters themselves.
Each letter is represented as a closed contour made from precisely 120 factors. The emblem letters use predefined level information. For user-generated names, we take a barely totally different route: we draw every letter onto a hidden canvas, convert it right into a pixel masks, hint the contour, clean it, and produce it again to the identical 120-point construction.
The holes rely too — a “B” with out its holes can be a really totally different “B”. Conserving the variety of factors fastened is what makes the following step potential.
Make one letter grow to be one other
Every level on one letter has a corresponding level on the following. We interpolate between them whereas shifting the contours alongside a curved path by house. Reasonably than utilizing a simple morph, we additionally deform the construction because it strikes.
The factors twist, slim and tilt alongside the way in which. What begins as two flat contours turns into a steady development, as if the letter have been being pulled by a metallic tube.
That is the small piece of code chargeable for most of that transformation.
for (let ok = 0; ok <= SEG; ok++) {
const u = ok / SEG, m = ease(u), bump = Math.sin(Math.PI * u);
bezier(A, C, B, u, p); // place alongside the curved path
bezierTangent(A, C, B, u, t); // course of journey at this level
const s = THREE.MathUtils.lerp(sA, sB, m) * (1 - state.pinch * bump);
const tw = THREE.MathUtils.lerp(rollA, rollB, m)
+ Math.PI * state.twist * (i % 2 ? -1 : 1) * bump;
const cosT = Math.cos(tw), sinT = Math.sin(tw);
for (let j = 0; j < N; j++) {
// the identical level index on each letters, blended collectively
const x = THREE.MathUtils.lerp(ringA[j][0], ringB[j][0], m) * s;
const y = THREE.MathUtils.lerp(ringA[j][1], ringB[j][1], m) * s;
const rx = x * cosT - y * sinT, ry = x * sinT + y * cosT;
// rx, ry positioned into 3D house utilizing the curve's native body
}
}The loop handles three issues directly: interpolating the form between two contours, shifting the factors alongside the curve, and making use of the deformation that offers the transition its natural motion.
Construct it like a tower
As soon as the contours are flowing by house, we flip the ensuing geometry into a light-weight structural system.
As a substitute of rendering a stable tube, we preserve chosen longitudinal strains, cross-braces and diagonal helps. The construction takes some inspiration from the Eiffel Tower and its strategy to creating a big, complicated kind really feel remarkably gentle.
The entire thing is rendered in Three.js utilizing line geometry and a customized shader.
There’s no precise ray tracing behind the metallic. The reflective look comes from a baked reflection map, which supplies the construction a altering metallic floor with out including pointless rendering overhead.
Make it yours
The system isn’t restricted to our predefined letters. Kind your personal title, watch it grow to be the construction, then select a end and share the consequence.
For those who make one, tag us and the Three.js Convention — we’d like to see what names individuals put by it.
One title in. One piece of digital structure out.
That’s the entire experiment: a reputation goes in, just a little piece of digital structure comes out.
Constructed for the Three.js Convention in Paris by BL/S®.
