00:00/00:00
3:22
00:03:22

Shortcuts ⌨️

  • SPACE to play / pause
  • ARROW RIGHT or L to go forward
  • ARROW LEFT or J to go backward
  • ARROW UP to increase volume
  • ARROW DOWN to decrease volume
  • F to toggle fullscreen
  • M to toggle mute
  • 0 to 9 to go to the corresponding part of the video
  • SHIFT + , to decrease playback speed
  • SHIFT + . or ; to increase playback speed

Unlock content 🔓

To get access to 91 hours of video, a members-only Discord server, subtitles, lesson resources, future updates and much more join us for only $95!

Want to learn more? 🤘

58%

That's the end of the free part 😔

To get access to 91 hours of video, a members-only Discord server and future updates, join us for only $95!

Next lesson
42.

Wobbly Sphere

Difficulty Hard

Introduction 00:00

In this lesson, we are going to create a wobbly sphere:

To create an animation that feels this organic, we need to animate the vertices in a vertex shader, but as you can see, all the properties of the MeshPhysicalMaterial are still supported.

We can play with the metalness, roughness, transmission, and IOR. Even the shadow is supported and it still looks just like a classic MeshPhysicalMaterial.

To make this possible we need to start from the built-in MeshPhysicalMaterial as we did in the Modified Material lesson, and improve it. But this time, we are going to use a different approach and rely on the Custom Shader Material library.

This library injects shader code directly in the Three.js built-in material, but without us having to dig into the Three.js shaders to understand where and how to inject the code, thus making it beginner-friendly.

Setup 02:10

The starter already contains the following:

  • A IcosahedronGeometry sphere, a MeshPhysicalMaterial applied to it and a bunch of associated tweaks
  • A plane to test the shadow
  • An HDR environment map is used as background but also to light up the scene
  • A DirectionalLight to light up the sphere even more and cast a shadow on the plane
  • The vite-plugin-glsl dependency to handle GLSL files
  • A shaders/ folder with a simplexNoise4d.glsl file ready to be included
  • A GLTFLoader instance with a DracoLoader instance associated with it so that we can test our wobbly animation on models
  • Suzanne model as suzanne.glb in the static/ folder
  • OrbitControls to rotate around

Custom Shader Material 03:33

For this effect, we are going to enhance the MeshPhysicalMaterial and make the surface wobble.

For now, we just want to implement Custom Shader Material and, later, we are going to create the wobble animation.

Dependency

Custom Shader Material is available on NPM: https://www.npmjs.com/package/three-custom-shader-material

Install the library using npm install and force the version to 5.4:

npm install three-custom-shader-material@5.4

We force the version to make sure it works with the lesson.

In script.js, import CustomShaderMaterial from 'three-custom-shader-material/vanilla':

import CustomShaderMaterial from 'three-custom-shader-material/vanilla'

vanilla indicates that it’s the classic implementation of the library without using any third-party library like React Three Fiber (which you’ll discover later in the course).

Using CustomShaderMaterial, we can create our new material based on a built-in material.

Replace the THREE.MeshPhysicalMaterial by CustomShaderMaterial and add the baseMaterial property to THREE.MeshPhysicalMaterial. Next, we are going to separate the Custom Shader Material and the base material properties using comments:

// Material
const material = new CustomShaderMaterial({
    // CSM
    baseMaterial: THREE.MeshPhysicalMaterial,

    // MeshPhysicalMaterial
    metalness: 0,
    roughness: 0.5,
    color: '#ffffff',
    transmission: 0,
    ior: 1.5,
    thickness: 1.5,
    transparent: true,
    wireframe: false
})

As you can see, the material is still working. Even though it’s now an instance of CustomShaderMaterial, it’s using THREE.MeshPhysicalMaterial as the base material and all previously supported properties are still working.

Want to learn more?

That's the end of the free part 😔

To get access to 91 hours of video, a members-only Discord server and future updates, join us for only $95!

How to use it 🤔

  • Download the Starter pack or Final project
  • Unzip it
  • Open your terminal and go to the unzip folder
  • Run npm install to install dependencies
    (if your terminal warns you about vulnerabilities, ignore it)
  • Run npm run dev to launch the local server
    (project should open on your default browser automatically)
  • Start coding
  • The JS is located in src/script.js
  • The HTML is located in src/index.html
  • The CSS is located in src/style.css

If you get stuck and need help, join the members-only Discord server:

Discord