00:00:00
hey there my gorgeous friends on the
00:00:01
internet I heard you loud and clear and
00:00:03
we're going to continue the 3D train you
00:00:05
guys left an overwhelmingly like
00:00:07
positive interest in learning blender
00:00:09
and like 3js with fiber and webg and all
00:00:12
that jazz so I'm so happy for that so
00:00:15
thank you so much we're going to
00:00:16
continue we're going to create this
00:00:17
awesome cell fracture effect where we
00:00:19
can import any 3D model or create any 3D
00:00:22
model and just fracture it and make it
00:00:24
explode on scroll or on like when you
00:00:26
hold your mouse down on it it's really
00:00:28
cool uh and it's super easy to do so
00:00:31
let's get into it thank you so much for
00:00:33
the support drop a sub drop a like okay
00:00:35
let's get cracking I also want to knowe
00:00:36
that all of these effects that you've
00:00:38
seen in the previous tutorials as well
00:00:40
are going to be in this GitHub page
00:00:42
fiber awesome mix I'm going to name it
00:00:44
so here's the explosion this is the
00:00:46
scroll animation that we did last time
00:00:48
I'm I'm just going to keep making folder
00:00:49
so you can just get the GitHub see the
00:00:51
example copy paste it and do whatever
00:00:53
okay cool okay so for this one I'll just
00:00:56
clear out my explosion folder quickly
00:01:00
and let's head over to our public and
00:01:03
I'll just get rid of this import it's
00:01:04
once you kind of do it it's really easy
00:01:07
to just uh you know create your effects
00:01:11
so the first step we need to do is find
00:01:13
the 3D model now we do want to show a
00:01:15
little bit of blender um I I don't like
00:01:18
feel discouraged like oh no I don't want
00:01:20
to learn another soft form don't worry
00:01:22
I'll just show you how how simple it is
00:01:24
for this effect that we want to do so
00:01:26
you can get Blender at and you know
00:01:29
where to get it just Google blender okay
00:01:32
so here we are in the scene now you're
00:01:34
going to be presented with this Cube
00:01:35
I'll just quick start you through
00:01:37
blender here for a second midal mouse is
00:01:39
rotation scroll in scroll out you're
00:01:41
going to need a mouse for this
00:01:43
unfortunately so scroll okay zoom in
00:01:45
zoom out and then if you hold shift and
00:01:47
the middle oh you just need to hold
00:01:49
shift and the middle Mouse you can pan
00:01:51
around okay so those are your Tre
00:01:52
commands and if you're lost in the scene
00:01:54
somewhere like that click on your Cube
00:01:57
here and then click the perer on your
00:02:00
keyboard which is at your numpad besides
00:02:03
the zero and when you do that it'll just
00:02:05
like go to your object like that see and
00:02:08
then you it's fine okay so all we really
00:02:12
need to do is maybe color this up and
00:02:14
then apply uh the effect on it so
00:02:17
thankfully we don't really need to do
00:02:19
much now for materials you can go on the
00:02:21
side panel here and apply a color so we
00:02:23
can do blue like that if you don't see
00:02:25
this that's because we're are on the
00:02:27
viewp shading mode so if you switch over
00:02:29
over to a material mode then you can say
00:02:34
the material we'll select the cube we'll
00:02:36
hit tab that's going to put us into edit
00:02:38
mode so here you can kind of like select
00:02:41
points and mess around with them like
00:02:43
that see or you can select faces as well
00:02:46
so I can move this out or extrude it see
00:02:48
now I have another piece here that I can
00:02:49
independently move so that's like a pipe
00:02:52
or something I don't know okay let's go
00:02:55
back uh so what we'll do in tab mode
00:02:57
here is I'm going to hit a to select
00:03:00
everything or you can just like go like
00:03:01
that and then subdivide this a couple of
00:03:04
times because we want our cell fractor
00:03:07
to basically have enough data here to
00:03:09
break this up so like two three times
00:03:12
there and then I'll hit Tab out we'll go
00:03:15
to object mode and quick effects and
00:03:17
we'll just do self fracture the defaults
00:03:19
are fine here so you can just hit okay
00:03:22
oh there's one more thing actually here
00:03:24
see the mesh data here you can add a
00:03:28
material on the inside of as well so if
00:03:31
you have one here selected zero it'll
00:03:34
just put the first material but what we
00:03:37
can do is actually create a new one if
00:03:38
we want so if I just make a new one
00:03:43
here let's do
00:03:46
a like an intense blue color on the
00:03:50
inside okay something like that or like
00:03:52
a teal okay so again let's go to object
00:03:55
we'll do quick effects cell fracture and
00:03:59
now here for the material I'll say one
00:04:01
and that's going to apply that
00:04:03
toal look at that how cool is that Bo
00:04:07
done there we go we got our broken thing
00:04:10
lovely now one more thing see we have
00:04:12
our initial Cube still here so I'll just
00:04:14
get rid of that uh the camera here as
00:04:17
well we don't need that so we can delete
00:04:19
that and now everything else here just
00:04:22
grab besides the light can get rid of
00:04:25
the light as well we just have all these
00:04:28
Cube cells I'm going to select all all
00:04:29
of them go to object rigid body add
00:04:33
active and then when you hit space Boom
00:04:36
the cube Falls that's because it has a
00:04:38
rigid body it has it's affected by
00:04:40
gravity um so as you can see it's active
00:04:43
it has a mass that you can change as
00:04:45
well on it we'll leave everything the
00:04:46
same here one thing you can do is good
00:04:48
to your actual like World scene or world
00:04:52
like physics uh which is here in this
00:04:54
little triangle tab that kind of looks
00:04:56
like the
00:04:57
pyramids um
00:05:00
okay and then here if you pop see you
00:05:02
have gravity if I change that to zero
00:05:04
it's not going to fall but this is still
00:05:06
going to be effective by like force and
00:05:08
whatnot so if I hit shift a or you can
00:05:11
go here at the top you can import a
00:05:15
force
00:05:16
field uh you can try out the vortex no
00:05:20
why not let's try the vortex I've never
00:05:21
tried this before we'll put it yeah like
00:05:25
in the middle there and then here we'll
00:05:28
just need to like this physics panel
00:05:31
just increase the strength to like 100
00:05:34
and head
00:05:36
space maybe that's a bit to intense
00:05:38
let's lower
00:05:42
this there we go so you can get
00:05:44
different effects if you want I I don't
00:05:46
think we're going to use this one uh
00:05:48
let's just do an explosion so we'll do
00:05:51
shift
00:05:51
a force force like that so there's our
00:05:55
force field and I I'll just up the
00:05:58
strength here to something like 50
00:06:00
hit space and look at that
00:06:03
boof cool let's increase it to like
00:06:06
100 and we'll cut the time here we'll
00:06:09
just say 100 frames that's all we really
00:06:11
want to render out you can customize
00:06:13
this to anything you want but
00:06:16
that's maybe even like 2 70 you know 60
00:06:20
make this
00:06:22
shorter there we go nice so now that we
00:06:25
have that I just grab all the cube cells
00:06:29
so go to the last one there all the way
00:06:31
to the top and here we'll go to
00:06:36
object rigit body and we'll hit bake to
00:06:40
key frames and hit Okay so this so all
00:06:44
the like animation that we've done with
00:06:46
the physics that's going to save it all
00:06:48
and like pre-render it in a way and just
00:06:51
save it in a file for you all the data
00:06:53
that happened so now when we import it
00:06:55
we can just trigger that animation on
00:06:57
like click or hold and this is what's
00:06:59
really cool if you don't blender and you
00:07:02
know you add something create something
00:07:03
really impressive you can just bake that
00:07:06
and import it in your nextjs
00:07:09
application cool so there we go now and
00:07:12
in the browser we can add spinning to
00:07:14
this and whatnot and different effects
00:07:16
so from here on out let's just export
00:07:19
this so we'll go
00:07:21
file export we'll do
00:07:23
glb2 gltf let's name this Cube EX
00:07:30
explosion I'll name it brown cuz I have
00:07:32
a couple here so you want to make sure
00:07:34
it's glb here if you have lights in the
00:07:37
scene you can add them using punctual
00:07:39
Lights and Camera here if you open the
00:07:41
include two tab uh but nothing really
00:07:44
else we need to change in the animation
00:07:47
here make sure you have shape Keys
00:07:48
animation and sampling animations on and
00:07:53
that should be it let's export that so
00:07:54
we can head back to the browser okay
00:07:57
let's create a scene here so we'll go to
00:07:59
explosion create a new file and call
00:08:02
this uh Cube scene
00:08:05
TSX okay it's going to have a use client
00:08:07
at the
00:08:09
top and here we'll just export default
00:08:12
function scene like that so this is
00:08:16
going to take in the canvas all right
00:08:17
you always want to render out the canvas
00:08:19
from free
00:08:21
fiber there we go and here again we can
00:08:23
pass in anti-aliasing if we
00:08:26
want believe it's yeah we have to pass
00:08:29
in the GL which makes a reference to the
00:08:33
uh webg renderer NTI aliasing true and
00:08:38
one more thing is the DPR will set that
00:08:41
to one
00:08:43
1.5 okay so it can go up to a bigger
00:08:47
resolution here we're not returning
00:08:49
anything so let's make sure we return
00:08:50
this canvas and here let's also add a
00:08:54
little directional light like that we'll
00:08:57
put the intensity down
00:09:00
and let's create the suspense so we can
00:09:02
render out our
00:09:06
Cube here we go we'll just do a fallback
00:09:08
of null if you want to check out the
00:09:10
previous episode I'll show you how you
00:09:11
can actually render out like the
00:09:13
progress here as well so we'll Center
00:09:16
this and we'll need the model
00:09:20
here so make a new file call this cube.
00:09:24
TSX okay let's add use client to the top
00:09:27
here as well and here here we'll say use
00:09:30
gltf we'll import this from
00:09:33
Dre and we are going to reload that
00:09:36
model so let's import it from our file
00:09:40
so here we go Cube explosion Brown make
00:09:42
sure you import it in your public
00:09:47
folder and then here we'll say
00:09:50
slash Cube
00:09:54
explosion
00:09:55
brown. glb before we finish up this Cube
00:09:59
I just want to thank today's sponsor
00:10:01
brilliant I always Advocate this on my
00:10:03
channel that the best way of learning
00:10:05
something is by doing and that's why I
00:10:06
really recommend Brilliance because they
00:10:08
offer thousands of bides lessons that
00:10:11
are interactive on machine learning on
00:10:14
math algebra you got physics anything
00:10:17
you want it's there you just want to
00:10:19
going to want to do it yeah I really
00:10:21
recommend you this one on computer
00:10:23
science they have quite a couple of fun
00:10:24
modules here on binary search Graph
00:10:26
Search and implementing certain Al
00:10:29
algorithm so check that out so thank you
00:10:31
so much for brilliant for sponsoring
00:10:32
this episode check out the link in the
00:10:34
description for a 20% off your annual
00:10:37
subscription and a 30-day free trial
00:10:40
thank you so much let's get back into it
00:10:42
here we go and here what will return is
00:10:46
a
00:10:49
group and here is where our primitive
00:10:52
object is going to be so we'll render it
00:10:54
out right here
00:10:56
primitive there we go so to get that all
00:11:00
we'll need to do is use that gltf again
00:11:03
use
00:11:04
gltf and we'll pass down the same uh
00:11:08
location and now here we can
00:11:10
extract the the nodes you can extract
00:11:14
the animations you can extract the scene
00:11:18
lots of different things so that's
00:11:19
really
00:11:21
good now to hook up the animation you
00:11:23
can just use this use animation hook I
00:11:27
know lots of hooks
00:11:31
use animations here from Dre and for
00:11:34
that you just need to pass down the
00:11:35
animations and the scene
00:11:37
there and now here you have AC actually
00:11:41
access to the action the actual
00:11:43
animation thing you know that you can
00:11:46
trigger okay so to pass down the
00:11:48
Primitive here we'll say object and
00:11:51
we'll just need to pass down our scene
00:11:53
from our glb here that should be enough
00:11:56
for to get this working
00:12:00
let's import Center there that's just
00:12:01
going to Center our model here and
00:12:03
import that Cube and see if we can get
00:12:05
anything rendered out so back to our
00:12:08
page here we can copy this over this
00:12:10
Dynamic import because we'll need to
00:12:12
just fully load this on the client we'll
00:12:14
say Cube scene and we'll also change
00:12:18
the folder
00:12:20
here so we'll go to explosion Cube scene
00:12:25
instead so let's rer out the cube scene
00:12:28
see what we
00:12:30
got I ended up loading up the blue box
00:12:33
it's just the material I added the that
00:12:35
polygon texture wasn't working uh so
00:12:38
let's just keep it simple and just do
00:12:39
the blue box instead so I just this is
00:12:42
all I did so I just removed that
00:12:45
texture um yeah I got all the cubes and
00:12:49
just went to materials here and added my
00:12:50
own rather than this so I think they
00:12:53
actually get this working you do need a
00:12:54
little bit more of like hooking up like
00:12:57
the roughness and the material on it and
00:13:00
whatnot so I I'll have a look into that
00:13:03
you know and you know maybe like make an
00:13:05
episode of getting realistic Textures in
00:13:08
the browser as well unlike 3D models so
00:13:10
we can have a full episode on that but
00:13:12
let's just focus on this animation so to
00:13:15
actually like to make this animate now
00:13:18
it's quite easy if you do the scroll one
00:13:21
um and you can check out the last
00:13:23
episode for that so from here on you do
00:13:25
the same thing as you did did in the
00:13:27
last episode add a scroll and just
00:13:29
animate the on
00:13:31
scroll
00:13:33
but one way I found it that it's quite
00:13:36
easy because it's quite hard to like do
00:13:38
events where you like hold your mouse
00:13:40
down and this animates and then it
00:13:42
animates backwards as well uh so what I
00:13:44
found is actually using framer motion uh
00:13:48
use motion value works pretty good so
00:13:50
mpmi framer motion like that so that
00:13:54
essentially allows you to interpolate
00:13:56
and to smoothly
00:13:59
go from one value to another so in this
00:14:02
case it would be the time of our
00:14:03
animation from 1 second to two seconds
00:14:06
or however much we want so I'll just
00:14:09
install frame or motion oops mpm run
00:14:14
def there we
00:14:16
go and then we'll create this motion
00:14:19
value inside the cube here so let's go
00:14:21
inside import this use motion value will
00:14:25
set to zero so by default this is not
00:14:27
going to have like a easing added to it
00:14:30
so that's where you can Import in the
00:14:32
spring instead use well not instead you
00:14:35
you pass down that motion value in the
00:14:38
spring and then here you can also pass
00:14:40
down a stiffness and a damping so for
00:14:43
the damping let's do one stiffness let's
00:14:46
do 20 and we can experiment with this to
00:14:48
see what kind of different effects we
00:14:49
can get but now we can use the use frame
00:14:53
uh hook which essentially runs every 60
00:14:57
frames per second or whatever your
00:15:00
monitors frame rates at and here we can
00:15:04
extract the camera we can extract the
00:15:06
clock so again I've heard people do it
00:15:10
with the mixer which essentially like
00:15:13
conol controls the whole like timeline
00:15:15
of your animations and you can like
00:15:18
change the time scale there to revert it
00:15:22
uh yeah I'm curious if if anyone can
00:15:25
find a really cool solution here but
00:15:27
this is what I found that I thought
00:15:28
would work really well so the first
00:15:30
thing we need to do is let's rotate this
00:15:32
a bit so let's add a ref const group
00:15:38
equals use ref I'll set that to null by
00:15:43
default and you can pass down the
00:15:44
generic to this to infer the type of it
00:15:47
which is just going to be a group type
00:15:48
from
00:15:49
3js uh we can pass down to ref now ref
00:15:53
equals group and now check this out so
00:15:56
here you can do something like this
00:15:57
group. current
00:15:59
um we'll do the rotate Y and just set
00:16:03
that equal
00:16:05
to we can use this math utils actually
00:16:08
from 3js and it's just going to do the
00:16:11
math for you so if you want to do a
00:16:14
rotation degree we can pass that down
00:16:16
here so if I want to do 0.2 hit save
00:16:19
cool so check this out so now we can go
00:16:20
on the group here and you can actually
00:16:22
add pointer events to this so you can do
00:16:24
UNP pointer
00:16:25
down all I I'll do here is again this is
00:16:29
like the simplest method I found I found
00:16:31
examples online of how people do this
00:16:33
and it's like 20,000 lines of
00:16:35
code and I I don't want to do that I
00:16:38
don't want to make an animation and then
00:16:39
just spend a week on it if I can do like
00:16:41
something simple like this then I'm down
00:16:43
to business uh so check this out so all
00:16:46
we can do here is
00:16:48
say motion
00:16:50
value and we'll just set this motion
00:16:56
Val is that what they called it
00:16:59
yeah and we'll set it to a value here
00:17:02
like
00:17:04
one and on pointer
00:17:11
up like that what we can do is say
00:17:13
motion
00:17:14
val dot
00:17:17
set we'll set back to
00:17:21
zero make sure you run an arrow function
00:17:26
here there we go now all right so now
00:17:30
inside our Ed frame check this out we
00:17:31
can map so every little piece
00:17:35
essentially holds an animation right so
00:17:38
a little cell fracture is going to hold
00:17:40
the whole like movement to its final
00:17:43
position so what we can do let me show
00:17:46
you so console log if I just console log
00:17:48
out this actions
00:17:51
here let's move this to the top here
00:17:54
before our use
00:17:57
frame okay so let's check out what's
00:18:00
going
00:18:03
on it's going to render out so fast
00:18:06
because I'm running it here no get out
00:18:09
uh but yeah it's going to be like 100
00:18:10
animations for each piece so what you
00:18:12
can do is Loop through it with object
00:18:15
Keys like that right so you'll have
00:18:18
access to each key here so you pass down
00:18:20
the actions and then for
00:18:22
each you'll have your animation key so
00:18:27
here you can see actions. key. playay
00:18:30
play pause through okay so you want to
00:18:34
like stop it from playing and that's how
00:18:36
you do it like that and then down here
00:18:38
we'll set actions key time over to
00:18:42
Spring the get like that right we won
00:18:45
the time from
00:18:47
our motion value oh and if you want to
00:18:50
get the types for this I actually found
00:18:52
it this time you can do
00:18:55
animation uh what was it action like
00:18:58
that
00:18:59
there we go so you can get the action
00:19:02
and then here you can just do action
00:19:03
play like that so now here when we go to
00:19:07
the motion value let's set something
00:19:09
like 0.5 and when we hold
00:19:12
it as you can see that's like
00:19:15
the the dampening effect which is like
00:19:18
crazy so let's head back and change that
00:19:20
so damping here I just give rid of that
00:19:23
damping or
00:19:25
0.1 let's see if that does it so refresh
00:19:29
this let's just try getting rid of this
00:19:32
dampening for
00:19:34
now and there you go that's much better
00:19:36
so now when we just hold it won't have
00:19:39
that crazy effect anymore and there we
00:19:42
go that's the effect if you want a
00:19:43
stronger effect feel free to customize
00:19:45
it down here so if we pop this up to 0.8
00:19:49
of course you're going to have a more
00:19:50
intense effect now this needs to be
00:19:53
hovered right so Z I'll put it 0.4 now
00:19:56
see if I'm hovered over it then I Let Go
00:19:59
goes back which is great that's the
00:20:00
effect we want and it's really smooth
00:20:02
too so this works really well but the
00:20:04
one thing is we're putting the pointer
00:20:06
event on the group here so if we're not
00:20:08
hovering over this anymore it's not
00:20:09
going to go back like that see it stays
00:20:12
open but if we click once it does go
00:20:14
back which is great so um the thing you
00:20:17
can do here I guess you could put a
00:20:19
plane in the back you know that just
00:20:21
covers the space on it and that way it
00:20:23
always triggers the animation you know
00:20:26
you can still animate something else but
00:20:28
have that in visible there so that would
00:20:30
be pretty cool but there we go that's
00:20:31
our cool little effect here how nice is
00:20:34
this feel free to import any other
00:20:36
projects any other models whatnot and
00:20:39
yeah that's going to be it for me I'm
00:20:41
heading back to pushing out more of the
00:20:43
course again like um so excited for this
00:20:46
year I have so much in the plans not
00:20:49
only this course but we're going to
00:20:50
rebuild all the courses and I'm going to
00:20:52
start uh launching my platform soon CH
00:20:56
and the works with that as well which is
00:20:57
going to be awesome so thanks again for
00:21:00
all the support for all the love and
00:21:01
I'll see you in the next one peace
