In this tutorial, Bruno Simon and Alex explains us how to use three.js and how to enhance a website by adding a 3D element to a header.
Starting from a standard header section, they swap out the standard image for a cool shape with a matcap.

Bruno Simon twitter:
Bruno Simon course:
Alex’s YouTube channel:

► For more videos, subscribe to our channel:

► Who are we?
Prismic is a headless CMS with an API and a CDN.

With Prismic, you can create and edit content on the internet. We aim to simplify content management and to make work enjoyable for developers, marketers, and content teams.

► Go to our website for more information:

► What is Slice Machine?

► Find us also on:
Twitter:
Instagram:
LinkedIn:

00:00 Intro
01:10 Adding three.js
02:15 The three variable
03:16 How to add a scene, camera and aspect ratio
07:48 How to add a cube
18:40 How to see the cube on the web page
24:01 Changing the geometry
27:05 changing the materials
28:03 What are Matcaps and how to use them?
33:11 How to animate our object
37:23 How to make the camera move
46:41 How to ease the animation
50:20 Outro

#Prismic #Threejs #WebDevelopment