Experience2D vertices displacement

• Three.js
• GLSL

By displacing vertices (xyz coordinates) of a plane, we can achieve different effects/textures like sea, sand, lava, etc.

These examples are relatively basic and only focus on Y vertices displacement using one classic noise mixed with a sin wave.
By adding more noise/randomness, we can create more complex/realistic effects.

• Presets:
• Blue sea
• Sand
• Radioactive waste
• Or build your own

Experience3D vertices displacement

• Three.js
• GLSL
• Blender

Basically the same concept as above but with a 3D model.

Here we displace the x and z vertices using a sin wave to create a wobble effect.

Experience3D model sliced

• Three.js
• GLSL
• Blender

Slicing an object to reveal other objects inside

Using trigonometry, we can decide to show/hide parts of some objects. This concept can be used differently, for instance, instead of using an angle to check which part of the mesh is shown, we can use a noise or image texture. The "animation" will be different but the concept stays the same.

• States:
• Opened
• Closed

Experience3D animations

• Three.js
• Blender

Different walk animations with a fox lowpoly model

All animations are created in Blender, linked to the 3D model and imported in Three.js. That way we can start/stop each animation with different events (click, load, scroll, etc.)

• Animations:
• Idle
• Walk
• Run

Experience3D interactions

• Three.js
• GLSL
• Blender

The house was build in Blender then imported in Three.js

Trying to create interaction with a 3D model for Quito. The idea was to open popup/pages when we click/hover on different parts of the house.

In the end we went a different way but this basic experience can still be used and improved for other projects in the future.

ExperienceEarth

• Three.js
• GLSL

Re-creating the earth with as many details as possible

This can be easily customisable with different textures to create other planets. We can also place points/pins with hover events (cards, popups or links).