DEV Community: Davide Mandelli

Codemotion Milan 2023: my first session in public

Davide Mandelli — Fri, 17 Nov 2023 11:32:59 +0000

Hey folks! 👋🏼 Welcome to all tech and software development enthusiasts!

I'm Davide, Software Engineer @ Klarna, and I'm one of the 120 speakers who had the opportunity to step on stage to share their experience at Codemotion Milan 2023.

If you don't know what Codemotion is (that's a shame, you should!), it's the biggest tech conference in Italy 🇮🇹🤌🏼 and one of the biggest tech conferences in Europe. They organize a lot of events and webinars about a lot of topics: accessibility, AI, programming languages and much more.

My journey began when I received a message from my dear friend Emanuele on Telegram asking if I'd like to join Codemotion's WannaBe Speaker program and deliver a public session for the very first time in my life. Just to add a bit of context, Emanuele is a Codemotion ambassador, Microsoft MVP, GitHub Star and lastly GitHub Star of the Year (2023). He's always been my inspiration since day 0 when I started working in the IT world (I met him as a colleague in my first job experience) and he has always encouraged and motivated me to do my best to shine.

The mentorship with Emanuele was an intense and educational journey. He did something around 120 sessions in public and many more online, so I was sure that thanks to his incredible experience he would have advised me in the best way possible.

For these and many other reasons, his proposal to guide and mentor me through the world of public speaking was the spark that immediately ignited my determination and convinced me that I would make it, so I accepted!

Through Meet calls, Telegram groups, and individual sessions, Emanuele shared many essential but extremely helpful tips and strategies to face the stage with confidence.

He didn't just prepare me for the event; he aimed to bring out a unique communication style, valid for this session and for any other session I will do in the future.

Initially, I had many expectations and fears. It was my very first time at an event of this entity and at the same time, I had never spoken on a stage before so I was completely unaware of what I was going towards: it was a leap of faith. About 2400 people were attending the event, so I knew that I would have had to be well prepared on my topic and that my public speaking skills would have been put to a real test.

However, Codemotion's WannaBe Speaker program exceeded all my predictions: the event wasn't just a place to talk about technology and meet new cool people; it was a unique opportunity to grow as an individual.

Reality surpassed expectations, transforming the event into a springboard for my personal and professional growth.

The content of my session was about the View Transitions API, a new browser API still partially in beta and available just for Chromium browsers (as of today 😃).

I tried to convey my passion and knowledge on the subject, engaging the audience in a meaningful conversation. The preparation with Emanuele made this moment even more rewarding.

On the day of the talk, I was a bit nervous and excited at the same time: as soon as I reached the venue, I immediately realized how big it was and how many people there would have been: I was shocked! 🤯

I had the opportunity to meet new fantastic people, see familiar faces, and engage in insightful conversations that enriched both my professional network and personal experiences.

I also got the chance to stay in the "speaker room", where I took the opportunity to review my slides and check if everything was ready for the session that was planned for the afternoon.

The moment I stepped onto the stage was a mix of emotions: adrenaline, enthusiasm, and a slight tension blended as the audience awaited my words. Thanks to both Emanuele and the support of the program, I faced the stage with confidence, aware that I was up there for a reason and not because I was a random lucky person.

The session went pretty well: maybe I just started too quickly for fear of missing something during the speech 😅 As soon as I stepped off the stage, some people came to provide feedback and ask questions: that moment was probably my favorite because is the most "rewarding" - knowing that the audience was engaged and eager to discuss the topic made the entire experience truly fulfilling.

I highly recommend this experience for anyone aspiring to improve their speaking skills: it encourages personal and professional growth. Mentors like Emanuele create a stage for you to shine. Taking the red pill and joining this experience is a step toward inevitable growth and unlocking your potential. It's definitely worth it!

This initiative had a profound impact on my personal and professional growth. I learned to overcome the challenges of public speaking and gained confidence in my abilities. The network of connections and the experience with the WannaBe Speaker Program became invaluable resources for my future path.

In conclusion, Codemotion Milan 2023 was an absolutely unforgettable chapter in my career.

Thanks to the WannaBe Speaker Program, I overcame my fears and embraced the stage with confidence. If you receive an invitation to participate, don't hesitate to take this unique opportunity!

Thanks to everyone who made this extraordinary journey possible!

See you at next year's Codemotion! 😉

How to easily get started with ThreeJS - Part 3

Davide Mandelli — Mon, 06 Dec 2021 10:13:23 +0000

Hi guys, hope you are fine! 🙂

I'm back after posting the second part of this series about how to get started on ThreeJS without pain.
If you haven't done it yet, you can read the first and second part here 👇🏼

How to easily get started with ThreeJS - Part 1

Davide Mandelli ・ Nov 23 '21

#tutorial #threejs #webgl #javascript

How to easily get started with ThreeJS - Part 2

Davide Mandelli ・ Nov 26 '21

#javascript #tutorial #webdev #programming

Small recap

In the second part, we saw how to animate the cube, how to change its geometry and how to change its material. We arrived to this beautiful 3D animation:

The final code used to achieve this effect is the following:

// script.js

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight);
camera.position.z = 3;
scene.add(camera);

const textureLoader = new THREE.TextureLoader(); 
const matcapTexture = textureLoader.load("https://bruno-simon.com/prismic/matcaps/3.png");

const geometry = new THREE.TorusKnotGeometry(0.5, 0.2, 200, 30);
const material = new THREE.MeshMatcapMaterial({ matcap: matcapTexture });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

const animate = function () {
  window.requestAnimationFrame(animate); 

  mesh.rotation.x += 0.01; 
  mesh.rotation.y += 0.01;

  renderer.render( scene, camera );
};
animate();

document.body.appendChild(renderer.domElement);

In this last part we will see how to make our canvas responsive, how to smoothly animate the camera and how to insert some HTML stuff to be much more presentable as a heading section. We will style the page in order to look like this: https://th3wall-threejs.netlify.app

Let's make it responsive

If we preview in the browser the result of the code provided in the small recap up here, we could clearly see that the canvas is not responsive.
So, how can we make it responsive?

First of all, we need to add an event listener on the window 'resize' method:

window.addEventListener('resize', () => {

})

Then, we need to handle the camera.
Inside our event listener, we need to update the aspect of the camera, and we do so by providing it the ratio between the window innerWidth and innerHeight:

//Update the camera
camera.aspect = window.innerWidth / window.innerHeight;

Every time we update a parameter of the camera, we should communicate it to the camera.
The "updateProjectionMatrix" is a function of the PerspectiveCamera that updates the camera projection matrix. It must be called after any change of parameters. (see it in ThreeJS docS)
So, on the camera we call this method:

camera.updateProjectionMatrix();

The last thing to do is to pass the new viewport sizes to the renderer:

renderer.setSize(window.innerWidth, window.innerHeight);

and we're done! Now our canvas is fully responsive and we can verify it by resizing the screen.
Here's the full event listener function:

window.addEventListener('resize', () => {
  //Update the camera
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  //Update the renderer
  renderer.setSize(window.innerWidth, window.innerHeight);
})

Camera animations based on mouse position

Now that we added responsiveness to our canvas and our object, it's time to bring some movements to the scene.
We're going to do a classic animation: if we move the mouse on the left the camera will move to the left, if we move the mouse on the right the camera will move to the right, and the same applies to up & down movements.

First of all we need to know where is the cursor.
We can store the cursor position in a variable:

const cursor = { x: 0, y: 0 };

Whenever the mouse will move, the x and y values of the cursor will be updated. So we add an event listener on the mousemove:

window.addEventListener('mousemove', event => {
  // update cursor values
});

Inside the listener we will retrieve the cursor position with vanilla JS, really easy. The event parameter contains the position of the cursor on the X-axis and on the Y-axis:

cursor.x = event.clientX;
cursor.y = event.clientY;

Logging the values of the cursor we can see the coordinates that go from 0 (on the top left) to the maximum viewport width and height (to the bottom right). But the kind of values we want to have are normalized values, that go from 0 to 1.
We can achieve this by dividing the cursor value by the current viewport width/height:

cursor.x = event.clientX / window.innerWidth;
cursor.y = event.clientY / window.innerHeight;

Now that we have the values that floats from 0 to 1, we can add a little genius trick from Bruno: let's subtract 0.5 from each cursor values.

cursor.x = event.clientX / window.innerWidth - 0.5;
cursor.y = event.clientY / window.innerHeight - 0.5;

Why?
Because in this way (you can look at the graph down here) having the 0 at the center, the positive values will go to +0.5 and the negative values will go to -0.5

Now that we have coded the update for the cursor values, we need to move the camera simultaneously.
Inside the animate function, that is executed with the requestAnimationFrame, we save the cursor values in two variables:

const cameraX = cursor.x;
const cameraY = cursor.y;

We assign these two values to the camera position:

camera.position.x = cameraX;
camera.position.y = cameraY;

As we can see previewing the result, the camera is moving with a strange behavior when we move vertically. If I move up, the camera moves down and if I move down, the camera moves up.

This is caused by a problem on the Y-axis:

in ThreeJS the Y-axis is positive going up;
in event.clientY the Y-axis is positive going down;

Usually the Y-axis is positive going up, but this might depend on the software/technology we are using.
To fix this inconvenience I will put a - (minus) inside the cameraY assignment:

const cameraX = cursor.x;
const cameraY = - cursor.y; // <-- This has changed

Now if we preview we can finally see the correct camera movements event on the vertical axis

Add easing to the animations

Let's now add some easing to the animations: we're gonna recreate the famous ease animation.

The idea is to move the X (or the Y) toward the destination not straight to it but only for 1/10th of the length of the destination. And repeating the 1/10th calculation on each next frame, the 1/10th gets smaller and smaller and smaller... This reproduces the classic ease animation.

We need the calculate the delta between the actual position (cameraX/Y) and the destination (camera.position.x/y), then we divide this delta number by 10.
This will be added on each frame to the camera position values.

So in order to apply this calc, we need to modify the camera position assignments like the following:

camera.position.x += (cameraX - camera.position.x) / 10;
camera.position.y += (cameraY - camera.position.y) / 10;

You can now enjoy the real smoothness!

You can adjust that /10 on your needs: keep in mind that with an higher number you would have even more smoothness and with a lower number you would have an object that floats really fast but still with a small easing.

Setting up layout

At this point we just need to setup the HTML and CSS of our landing page.
First of all we can open the index.html file that we have created in part one.
We can add the classname "three" on the <body> tag and the following structure inside it:

<!-- index.html -->
<section class="content">
  <h2 class="content__title">Hi, I'm Davide</h2>
  <p class="content__subtitle">I'm a Front End Developer <br />I'm playing with ThreeJS for the very first time. </p>
  <div class="content__link--wrp">
    <a class="content__link" href="https://github.com/Th3Wall">
      <svg class="content__link--icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 55 56">
        <g clip-path="url(#a)">
          <path fill="#fff" fill-rule="evenodd" d="M27.5.5387C12.3063.5387 0 12.8449 0 28.0387c0 12.1687 7.8719 22.4469 18.8031 26.0906 1.375.2406 1.8907-.5844 1.8907-1.3062 0-.6532-.0344-2.8188-.0344-5.1219-6.9094 1.2719-8.6969-1.6844-9.2469-3.2313-.3094-.7906-1.65-3.2312-2.8187-3.8843-.9626-.5156-2.3376-1.7875-.0344-1.8219 2.1656-.0344 3.7125 1.9937 4.2281 2.8187 2.475 4.1594 6.4281 2.9907 8.0094 2.2688.2406-1.7875.9625-2.9906 1.7531-3.6781-6.1187-.6875-12.5125-3.0594-12.5125-13.5782 0-2.9906 1.0656-5.4656 2.8188-7.3906-.275-.6875-1.2375-3.5062.275-7.2875 0 0 2.3031-.7219 7.5625 2.8188 2.1999-.6188 4.5375-.9282 6.875-.9282 2.3374 0 4.675.3094 6.875.9282 5.2593-3.575 7.5625-2.8188 7.5625-2.8188 1.5125 3.7813.55 6.6.275 7.2875 1.7531 1.925 2.8187 4.3656 2.8187 7.3906 0 10.5532-6.4281 12.8907-12.5469 13.5782.9969.8593 1.8563 2.5093 1.8563 5.0875 0 3.6781-.0344 6.6344-.0344 7.5625 0 .7218.5156 1.5812 1.8906 1.3062A27.5454 27.5454 0 0 0 55 28.0387c0-15.1938-12.3062-27.5-27.5-27.5Z" clip-rule="evenodd"></path>
        </g>
        <defs>
          <clippath id="a">
            <path fill="#fff" d="M0 0h55v55H0z" transform="translate(0 .5387)"></path>
          </clippath>
        </defs>
      </svg>
      <span class="content__link--text">Th3Wall</span>
    </a>
    <a class="content__link" href="https://twitter.com/Th3Wall25">
      <svg class="content__link--icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 55 46">
        <path fill="#fff" d="M54.8923 6.0116a22.9167 22.9167 0 0 1-6.474 1.776 11.3622 11.3622 0 0 0 4.9569-6.2402c-2.1794 1.272-4.5948 2.1978-7.166 2.7134a11.2752 11.2752 0 0 0-18.5074 3.0528 11.2754 11.2754 0 0 0-.706 7.2184C17.6229 14.0897 9.3202 9.5866 3.7583 2.785a11.0506 11.0506 0 0 0-1.5262 5.6718c0 3.9188 1.9937 7.3631 5.0141 9.3867a11.2384 11.2384 0 0 1-5.1058-1.4117v.1375a11.2821 11.2821 0 0 0 9.0429 11.0619 11.449 11.449 0 0 1-5.0691.1948 11.3113 11.3113 0 0 0 10.5508 7.8306 22.6124 22.6124 0 0 1-13.9837 4.824c-.8938 0-1.7853-.0527-2.6813-.1536a32.0718 32.0718 0 0 0 17.3181 5.0623c20.7465 0 32.0788-17.1783 32.0788-32.0489 0-.4813 0-.9625-.0344-1.4438A22.7684 22.7684 0 0 0 55 6.0574l-.1077-.0458Z"></path>
      </svg>
      <span class="content__link--text">Th3Wall25</span>
    </a>
  </div>
</section>

Now you need the styling part: I'll paste here the css generated from my SCSS code. You need to insert it inside the styles.css file:

/* --- styles.css --- */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: auto;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  scroll-behavior: smooth;
}

body {
  position: relative;
  overflow-x: hidden;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  background-color: #fff;
  color: #000;
  text-align: center;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

.three {
  position: relative;
  overflow: hidden;
  width: 100vw;
  min-height: 100vh;
  height: 100%;
}

.three .content {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  mix-blend-mode: difference;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.three .content__title {
  font-size: 26px;
  font-weight: 800;
  background: linear-gradient(270deg, #ffb04f 40%, #ff8961, #ff50b8, #cb5eee);
  color: #9d8eee;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
}

.three .content__subtitle {
  margin-bottom: 1.5rem;
  font-size: 14px;
  color: #fff;
}

.three .content__link {
  display: inline-flex;
  align-items: center;
  color: inherit;
}

.three .content__link:last-child {
  margin-left: 1rem;
}

.three .content__link:hover .content__link--icon,
.three .content__link:hover .content__link--text {
  opacity: 0.65;
  transform: translateX(5px);
}

.three .content__link--wrp {
  display: flex;
  align-items: center;
}

.three .content__link--icon {
  width: 100%;
  max-width: 1.5rem;
  transition: all 0.4s cubic-bezier(0.6, -0.05, 0.01, 0.99);
}

.three .content__link--text {
  margin-left: 0.5rem;
  display: block;
  text-decoration: underline;
  font-size: 14px;
  color: #fff;
  transition: all 0.4s cubic-bezier(0.6, -0.05, 0.01, 0.99);
}

@media (min-width: 768px) {
  .three .content__title {
    letter-spacing: -0.1rem;
  }
  .three .content__link:last-child {
    margin-left: 2rem;
  }
  .three .content__link--icon {
    max-width: 2.5rem;
  }
  .three .content__link--text {
    margin-left: 1rem;
    font-size: 16px;
  }
}

@media (min-width: 1450px) {
  .three .content__title {
    font-size: 62px;
  }
  .three .content__subtitle {
    font-size: 28px;
  }
  .three .content__link--text {
    font-size: 22px;
  }
}

Once everything will be in place, we should have the result that looks like this:

As we can see, the object is centered and it would fit a lot better on the right so that it won't intersect with the text on the left.
In order to move it, we need to adjust the cameraX inside the animate function:

const cameraX = cursor.x;    //Before

const cameraX = cursor.x -1; //After

Since we wanted to move the object on the right, we have subtracted the 1 to the camera, so that it will always have an offset of 1.

Adding sequenced entrances with GSAP

We are at the very end, and as ending we want to animate with GSAP the entrance of the elements in the page.

In order to animate our floating object, we need to change how the canvas is attached to the body.
At the moment the canvas is attached automatically to the body by ThreeJS but we need to animate the canvas element on load so we need to already have it on the page at load time.

Inside the index.html, adjacent to the <section class="content"> inserted in the last paragraph, we need to insert the canvas manually and give it an id or a classname:

<canvas id="world"></canvas>

At this point we can declare the variables for each element we want to animate:

const canvas = document.querySelector("#world");
const title = document.querySelector(".content__title");
const subtitle = document.querySelector(".content__subtitle");
const buttons = document.querySelectorAll(".content__link");

We take the canvas variable and we pass it as a parameter to the renderer, like this:

const renderer = new THREE.WebGLRenderer({
   canvas: canvas
});

This will tell the renderer that the canvas to attach is the one passed to the canvas parameter, so the one with the id "world".

Now that the renderer knows what it has to display, we can remove this line:

document.body.appendChild(renderer.domElement);

Then, we need to pass two parameters to the material in order to let it be able to be transparent:

transparent: true
opacity: 0

and we set them inside the material declaration

const material = new THREE.MeshMatcapMaterial({
  matcap: matcapTexture,
  transparent: true,
  opacity: 0
});

Now we need to install GSAP and with NPM we can type the following command:

npm install gsap

Once installed, we can import it on top of our script.js file:

import { gsap } from "gsap";

and we can declare a classic timeline like this one:

const tl = gsap.timeline({paused: true, delay: 0.8, easing: "Back.out(2)"});

tl.from(title, {opacity: 0, y: 20})
  .from(subtitle, {opacity: 0, y: 20}, "-=.3")
  .from(buttons,
    {stagger: {each: 0.2, from: "start"}, opacity: 0, y: 20},
    "-=.3"
  )
  .to(material, {opacity: 1}, "-=.2");

As a very last step, we call the timeline play trigger after the animate function.

tl.play();

Mission accomplished! Congratulations! 🥳 🎉 👏

Final Recap

I leave down here the full final script.js code block so you can have a better look at it:

// script.js
import * as THREE from "three";
import { gsap } from "gsap";

const canvas = document.querySelector("#world");
const title = document.querySelector(".content__title");
const subtitle = document.querySelector(".content__subtitle");
const buttons = document.querySelectorAll(".content__link");

const cursor = { x: 0, y: 0 };

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight);
camera.position.z = 3;
scene.add(camera);

const textureLoader = new THREE.TextureLoader(); 
const matcapTexture = textureLoader.load("https://bruno-simon.com/prismic/matcaps/3.png");

const geometry = new THREE.TorusKnotGeometry(0.5, 0.2, 200, 30);
const material = new THREE.MeshMatcapMaterial({ matcap: matcapTexture, transparent: true, opacity: 0 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

const renderer = new THREE.WebGLRenderer({ canvas: canvas });
renderer.setSize(window.innerWidth, window.innerHeight);

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
})

window.addEventListener('mousemove', (_e) => {
  cursor.x = _e.clientX / window.innerWidth - 0.5;
  cursor.y = _e.clientY / window.innerHeight - 0.5;
});

const tl = gsap.timeline({ paused: true, delay: 0.8, easing: "Back.out(2)" });

tl.from(title, {opacity: 0, y: 20})
  .from(subtitle, {opacity: 0, y: 20}, "-=.3")
  .from(buttons, {stagger: {each: 0.2, from: "start"}, opacity: 0, y: 20}, "-=.3")
  .to(material, { opacity: 1 }, "-=.2");

const animate = function () {
  window.requestAnimationFrame(animate);

  mesh.rotation.x += 0.01; 
  mesh.rotation.y += 0.01;

  const cameraX = cursor.x -1;
  const cameraY = - cursor.y;

  camera.position.x += (cameraX - camera.position.x) / 10;
  camera.position.y += (cameraY - camera.position.y) / 10;

  renderer.render( scene, camera );
};
animate();
tl.play();

Conclusion

I really hope that this mini-series has helped you and as many people as possible and maybe inspired as Bruno Simon did with me when I saw the interview for the first time.
Please let me know if you appreciated the article and the whole mini-series.

You can follow me on Twitter, GitHub & Hashnode.

Thanks for reading!
Th3Wall

How to easily get started with ThreeJS - Part 2

Davide Mandelli — Fri, 26 Nov 2021 15:54:52 +0000

Hi guys, hope you are fine! :)

I'm back after posting the first part of this series about how to get started on Three.js without pain.
If you haven't done it yet, you can read the first part here 👇🏼

How to easily get started with ThreeJS - Part 1

Davide Mandelli ・ Nov 23 '21

#tutorial #threejs #webgl #javascript

Small recap

Last time we finished with our canvas containing a red 3D cube rotated by a little bit in order to be able to see some angles.

This is the full script.js file that you should have if you have followed the steps in the part one:

// script.js
import * as THREE from "three";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight);
camera.position.z = 3;
scene.add(camera);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);
mesh.rotation.y = 0.5;
scene.add(mesh);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.render( scene, camera );

document.body.appendChild(renderer.domElement);

Today we will see how to animate our cube, how to change its geometry and its material (with a special technique).
At the end of the series you will have a demo that should look just like this: https://th3wall-threejs.netlify.app

Animating the cube

In order to animate stuff, what we need to do is take a picture of each frame. But, how can we do that? 🤔

We will use the requestAnimationFrame (also called RAF), which lets you trigger a function on each frame.
This has to do with plain JS and it's not specific to ThreeJS.

First of all, inside the same script.js file, we need to create a function and call it once:

const animate = () => {
  // empty function
};
animate();

The second step is to move the render inside this function:

const animate = () => {
  renderer.render( scene, camera );
};
animate();

Now it's time to insert the requestAnimationFrame inside the animate function, passing the same animate function to it as a parameter.

RAF method takes a callback function as a parameter, that will be called on the next frame (once the screen is ready to accept the next screen repaint), and on the next, and on the next.....

const animate = () => {
  window.requestAnimationFrame(animate);

  renderer.render( scene, camera );
};

⚠️ You may be wondering why not use a setTimeout/setInterval called repeatedly: when we call requestAnimationFrame() to create an animation, we are assured that our animation code is called when the user's computer is actually ready to make changes to the screen each time, resulting in a smoother, more efficient animation than if we used a setTimeout or a setInterval repeatedly.

How can we make sure that everything is working? Let's rotate our object!
To do that, we will increment the rotation of the mesh by a very small amount, let's try with 0.01:

const animate = () => {
  window.requestAnimationFrame(animate); 

  mesh.rotation.y += 0.01;

  renderer.render( scene, camera );
};

And here we go: our cube is now rotating!

Change the geometry

Now that our object is animated, we can change its geometry.
On the ThreeJS documentation, you can find a lot of available geometries with which you can play and experiment with a lot of different things.
One of my favorites (same as Bruno 😁) is the TorusKnowGeometry, which consists of a sort of "infinite" knot with a lot of rounded surfaces.

We can create a torus knot by replacing the geometry declaration line from BoxGeometry to TorusKnotGeometry. Obviously, by changing the shape of our object, we need to adjust its parameters accordingly.

For the Torus Knot, the parameters we will need to remember for our purposes are:

radius - Defines the radius of the torus [default is 1];
tube — Defines the radius of the tube [default is 0.4];
tubularSegments — Defines the number of tubular vertices [default is 64];
radialSegments — Defines the number of radial vertices [default is 8]

Here are some values we throw in

// replace this line
const geometry = new THREE.BoxGeometry(1, 1, 1);

// with this one
const geometry = new THREE.TorusKnotGeometry(0.5, 0.2, 200, 30);

and the result will be this one:

Much better than the cube I would say, isn't it? I personally love this geometry!

Change the material

The geometry looks much better and evolved than before, but honestly, with this flat red color it's a little messy and the curves of the geometry aren't really clear to see. So we need to change the material now.

There are so many materials included in ThreeJS and you can also create your own material with something called shaders.
Shaders are a BIG and quite hard topic to learn so we are not gonna use them for our purpose, but Bruno has hours of lessons also on this topic with his ThreeJS Course, a must for every creative developer.

What we are gonna use is a special technique called matcaps. Matcaps are a kind of material that is used to simulate the appearance of a material on a surface.

Firstly, we need to access to a matcap, and Bruno provided a link to one of yours in the video tutorial. I will use this one:

Link: https://bruno-simon.com/prismic/matcaps/3.png

It's basically a picture of a sphere (you can create one yourself with programs like Photoshop) and you will use this picture as a texture for the geometry. Every pixel of this image will be applied to the geometry and will take the colors from every pixel of the image.

To use a matcap, we need to load what I've called texture and in order to do this, in ThreeJS we will use something called TextureLoader.

const textureLoader = new THREE.TextureLoader();

Then, we load our matcap image inside the loader providing it the URL and we assign it to a variable:

const matcapTexture = textureLoader.load("https://bruno-simon.com/prismic/matcaps/3.png");

Now that our texture is loaded, we need to apply it to the material as last step.
The MeshBasicMaterial method is unable to use a matcap as a texture, so we need to use a different method called MeshMatcapMaterial (ref: MeshMatcapMaterial Docs) and then we can provide it our texture contained in the variable matcapTexture.

// Replace this line
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });

// With this one
const material = new THREE.MeshMatcapMaterial({ matcap: matcapTexture });

And finally, if you now preview the scene you will see this beauty

Want to add a little bit of movement?
Let's add also a vertical rotation to our torus knot. Inside the animate function, together with the horizontal movement, we add this line:

mesh.rotation.x += 0.01;

Now you can enjoy this beautiful 3D animation along with this stunning matcap!

Final recap

In this part we have seen how to animate our object, how to change its geometry and how to change its material by using a special technique.

In the third and last part, we will apply some little smooth animations to our scene, we will make it responsive and we will style the page to look like this: https://th3wall-threejs.netlify.app.

As I did for the first part, I leave down here the full script.js code block so you can have the updated one:

// script.js

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight);
camera.position.z = 3;
scene.add(camera);

const textureLoader = new THREE.TextureLoader(); 
const matcapTexture = textureLoader.load("https://bruno-simon.com/prismic/matcaps/3.png");

const geometry = new THREE.TorusKnotGeometry(0.5, 0.2, 200, 30);
const material = new THREE.MeshMatcapMaterial({ matcap: matcapTexture });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

const animate = function () {
  window.requestAnimationFrame(animate); 

  mesh.rotation.x += 0.01; 
  mesh.rotation.y += 0.01;

  renderer.render( scene, camera );
};
animate();

document.body.appendChild(renderer.domElement);

I hope you are learning something and I also hope that you find this article interesting.

Please follow me on Twitter, GitHub & Hashnode and let me know if you liked it!

Thanks.
Th3Wall

How to easily get started with ThreeJS - Part 1

Davide Mandelli — Tue, 23 Nov 2021 13:21:58 +0000

Hi guys, hope you are fine! :)

Recently I came across a teaser video on my Twitter feed: it was a @prismicio post of an interview with the great @brunosimon. During the interview he explains how to use ThreeJS to enhance a website with 3D elements.

Here's a reference to that tweet:
// Detect dark theme var iframe = document.getElementById('tweet-1454078632884846600-605'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1454078632884846600&theme=dark" }

This interview and the passion with which Bruno explains ThreeJS concepts inspired me A LOT so I've decided to start digging into this new virtual world.

I'll try to recap and explain in the easiest and clearer way possible.
I promise you that in around 30 lines of code you will create your first working 3D element (recap at the end of the article).

Project setup

The first step is to create a new index.html file that should look like this:



<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1"/>
    <link rel="stylesheet" href="css/styles.css"/>
    <title>My first ThreeJS demo app</title>
  </head>
  <body>
    <script src="js/script.js" type="module"></script>
  </body>
</html>

Then we should add the two external files 'linked' inside our index.html file: we create the styles.css and script.js files and we put them respectively inside css and js folders.

Now it's time to initialize our package manager for the configuration of our project so we launch a

npm init

My default package manager is NPM but you can obviously use Yarn instead.

Three.js installation and setup

In order to start playing with Three.js, we should install it. We can do it by opening the terminal and launching:

npm install three

Then, inside the script.js we can import Three with the following line:



import * as THREE from "three";

Now that we have imported it, we can start using it.

The first thing to know is that once Three is installed, we have access to one very specific variable which is 'THREE'. By logging it we can already see that we have access to a lot of things that this library supports:



console.log(THREE);

How to add a scene, a camera and aspect ratio

We need three things to start with: the first one is a scene, just like a movie set. On the scene you will add objects (that might be characters) and a camera.

First of all we create the empty scene:



const scene = new THREE.Scene();

Inside the scene we said that we need to add a camera.
Here it's necessary to know that in Three.js exists various types of camera (have a look here in the docs for further info).
The one we will use is the PerspectiveCamera, which mimics the way the human eye sees, it's like a real-life camera: the nearer you are, the bigger you will see.

To create the camera we need to add:



const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight);

The camera needs some options as parameters:

the first option is the FOV (Field Of View) and is intended as degrees. We might choose an open angle of 180 degrees or a very close angle of 30 degrees, like photo lenses.
As Bruno experience, he recommends to stay in a range that goes from 40 degrees to a maximum of 70 degrees, so we will use an angle of 55 degrees.
the second required option is the aspect ratio: since we want to cover the whole background of our page, we will insert the width and the height of our viewport, and in JS we can retrieve these sizes with window.innerWidth and window.innerHeight.
TL/DR: The aspect ratio is just the width divided by the height.

One of the things to understand with Three.js is that whatever object we want to include, we have to add it to the scene, and at this stage we can already add our camera by typing:



scene.add(camera);

Add a mesh to the scene

With this first article (yes, it will be a small series 😉), we will add a cube to the scene.
A cube is an object that we will be able to see, and in Three.js an object that we will be able to see is called mesh.

A mesh is composed of two things: its geometry (the points that composes a geometry, like the number of vertices of a cube) and a material, that is how the geometry will look when it will be rendered in the scene.

We need to create first our geometry and since we want a cube, we will use its related class, the "BoxGeometry":



const geometry = new THREE.BoxGeometry(1, 1, 1);

This class automatically knows that it should create the cubes points once it receives its required parameters, which are the width, the height and the depth (reference to the docs).

Now it's time to add the material that our cube will use when it renders. For this first experiment we want our cube to be completely red. So we add the following:



const material = new THREE.MeshBasicMaterial({color: 0xff0000});

The "MeshBasicMaterial" class and all the available mesh and geometry classes are available in the documentation with a lot of examples. As a parameter we are passing in a color.

The color parameter can be specified in many ways:

as a string ('red');
as a hexadecimal (#FF0000);
as hexadecimal in base 16 (0xff0000).

At this point we have our geometry and our material, so we can proceed to mix them in a mesh and add it to the scene:



const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Rendering the scene

It's finally time to see our cube!

We declare a renderer using the most common WebGL renderer, the "WebGLRenderer":



const renderer = new THREE.WebGLRenderer();

Our renderer needs to know a size, and as we said before, we want our scene to take the full viewport width. So we can tell it to the renderer:



renderer.setSize(window.innerWidth, window.innerHeight);

In order to see our scene, we now need to draw inside a canvas 🎨.
Looking at our renderer variable we can notice that our canvas is contained inside the domElement property.
If we log it we can see our canvas:



console.log(renderer.domElement);

At this point we will let ThreeJS create our canvas and append it inside the <body> of the page; we can do it by adding the following line:



document.body.appendChild(renderer.domElement);

Inspecting our DOM we should now see our <canvas> element added inside the <body>.

As a last step for our renderer, we now have to tell it to render the canvas inside the page. It requires the scene (in which we should have added all the necessary elements) and the camera.



renderer.render(scene, camera)

But wait a minute.
Why can't we see the cube yet?

Fixing the camera and rotating the cube

The answer of the previous question is related to the camera position.
We still can't see the cube because we are inside the cube.

You may be wondering now: shouldn't I see everything red around me since the cube is red?
The answer is no: by default we cannot see the "inside" of the geometry. We can see the face, but not its reverse side.

So, now that we know the above, we should move the camera position outside of the cube. Moving up where we defined the camera variable, we add the following below that line:



camera.position.z = 3

In order to move the camera back, we need to work on the Z axis.
Once done, we can finally see our cube:

We might also move the camera position to the left/right or to top/bottom by editing the position on the x and y axis (ie: for our final demo we will move our object a little bit to the right so we can reserve a space on the left for the heading, a paragraph and maybe a CTA).

Since with these settings our object is flat, it doesn't seems to be a real cube. We can rotate the cube in order to see some angles.

To do a rotation, we just need to work on our mesh object.
As Bruno says, in order to move it horizontally, we have to think about putting something a spike on the y axis, so under our mesh declaration line we will add:



mesh.rotation.y = 0.5

Keep in mind that the unit of measure is in radiants, not degrees. So math here can be our best friend with some concepts like the PI, that is half of a circle.
If you think with PI in mind, you can think like "1/8 of a circle" and things like that, just dividing or multiplying the Math.PI value.

Recap

I leave down here the full script.js code block so you can have a better look at it:



// script.js
import * as THREE from "three";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight);
camera.position.z = 3;
scene.add(camera);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);
mesh.rotation.y = 0.5;
scene.add(mesh);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.render( scene, camera );

document.body.appendChild(renderer.domElement);

We can finally see our 3D cube on the page and we can play around with its position, its rotation, and its color.

In the next articles (coming shortly in the next days), we will animate the cube, we will see how we can change its geometry and material and we will also see how to make the canvas responsive.
We will also throw in some smooth animations and some cool little interactions with our object.

The final result that we will achieve is already visible at this demo link:
👉🏼 https://th3wall-threejs.netlify.app

I hope you have already learned something and I hope you find this article interesting.

Please follow me on Twitter, GitHub & Hashnode.
Let me know if you liked it!

Thanks.
Th3Wall

Proud to present you Fakeflix, a Netflix Clone built with React, Redux, Firebase & Framer Motion

Davide Mandelli — Thu, 01 Jul 2021 11:15:23 +0000

Hi guys, I'm proud to present you my latest project: Fakeflix.

I have started this project with the purpose of learning how to structure a Web App of a mid-level complexity integrating the Redux logic and experiment with things like Redux Thunk, Redux Saga, Firebase and Framer Motion.

It's a Netflix clone: I've tried to replicate the original layout as much as possible and I've also made some improvements in some sections inserting route animations and micro-interactions. I've also inserted a really close clone of Netflix's original splash animation, made entirely with CSS, as well as the play animation.

I put a lot of effort into it and I hope that you could like it and show some love by starring the project and following me on GitHub.

Th3Wall / Fakeflix

Not the usual clone that you can find on the web.

Fakeflix

Not the usual clone that you can find on the web

About · Demo · Features · Technologies · Screenshots · Run Locally · Requirements · License · Star history

FakeFlix_Desktop.mp4

🎯 About

I have started this project with the purpose of learning how to structure a Web App of a mid-level complexity integrating the Redux logic.
I've tried to replicate the original layout as much as possible and I've also made some improvements in some sections inserting route animations and micro-interactions. I've also inserted a really close clone of Netflix's original splash animation (forked from a famous codepen from Claudio Bonfati), made entirely with CSS, as well as the play animation. I have then sampled the original Netflix "ta-duummm" sound and I made it play along with the two animations.
I put a lot of effort into it and I hope that you could like it.

The…

View on GitHub

I would be glad to hear your feedbacks about it.

Here you can find the demo link:
https://fakeflix.th3wall.codes

In the next weeks I will publish more articles about this project, focusing on pieces of the code that is what we like most ;)