Kreativa Bryan

For a sweden company I developed a website mockup where the user can control the website progression using the mouse wheel (or the mobile touch).

The website flow start with an HTML title. When the user scrolls the mouse wheel, the title scale down. In reality it's not the title but the 3D camera that goes back and the user understand that is a 3D world, not a normal 2D website. The HTML content is rendered inside a 3D phone and it's like a website in a website. Then the mouse wheel control the rotation of the camera around the 3D model and the progression of other html contents that will be rendered later. I also created an editor to customize the lighting, the materials and the environment

Year

2021

Area

3D Web Experiences

Stack

react three fiber

https://kreativabryan-dev.netlify.app/

3D Camera Movement

The movement of the camera is controlled by the mouse wheel. The progression of the webpage is also controlled by the mouse wheel that trigger some animation to move the camera or rotate/move the objects

Concept Of The Website

Before implementing the design I made a concept of the website with the help of a 2D concept artist. The concept was made in photoshop and it was a 2D image. The concept was used to understand the design, the camera movement, the lighting and the flow of the website.

Duotone Effect

The main requirement of the website was to create a simil duotone effect. The shaders and the lighting of the model were made to achieve this effect.

All projects · Next project: Gig Crawler