Prismic | Three.js coding tutorial: how to enhance a website by adding a 3D element? ft Bruno Simon | Prismic @Prismic | Uploaded October 2021 | Updated October 2024, 4 hours ago.
In this tutorial, @BrunoSimon 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: twitter.com/bruno_simon
Bruno Simon course: threejs-journey.com
Alex's YouTube channel: youtube.com/channel/UCSRXVi__zITUsyeb8bzxBHg

► For more videos, subscribe to our channel: youtube.com/channel/UCJq6AEgtWeZt7ziQ-fLKOeA?sub_confirmation=1

► 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: prismic.io/?utm_campaign=market&utm_source=youtube

► What is Slice Machine? https://www.slicemachine.dev/?utm_campaign=market&utm_source=youtube

► Find us also on:
Twitter: twitter.com/prismicio
Instagram: instagram.com/prismicio
LinkedIn: linkedin.com/company/prismic-io

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