Make Any 3D Model Explode! | Next.js 14 with React Fiber THREE.js

00:21:04
https://www.youtube.com/watch?v=hIjUo5NwlPk

Ringkasan

TLDRThis tutorial guides viewers through creating an interactive 3D cell fracture effect using Blender and 3js in a web application. You can import, create, or modify 3D models in Blender, apply the cell fracture effect, and export the animation for integration into web apps like those built with Next.js. The tutorial covers basic navigation in Blender, adding colors and materials, and explains using framer motion for rendering animations that interact with user inputs. Techniques include using the cell fracture tool, controlling animations with pointer events, and managing dynamic imports in the web project. Challenges such as texturing in Blender are noted, with a promise to explore them in future tutorials.

Takeaways

  • 🚂 Continuation of 3D modeling tutorials focusing on Blender and 3js.
  • 💥 Learn to create a cell fracture effect that reacts to scroll or mouse clicks.
  • 🛠 Simple steps to import, fracture, and animate 3D models.
  • 🎨 Tips on applying colors and materials in Blender.
  • 🌍 Export models for web using formats like GLB and GLTF.
  • 🔄 Use framer motion for smooth browser animations.
  • 🖱️ Handling user interactions like mouse events efficiently.
  • 📦 Dynamic imports and optimal loading in Next.js.
  • ⚠️ Note challenges with realistic texturing in Blender.
  • 🎓 Encouragement for hands-on learning with code examples available in GitHub.

Garis waktu

  • 00:00:00 - 00:05:00

    The host expresses gratitude for the audience's support and enthusiasm for learning Blender and 3js with Fiber and WebGL. They introduce the tutorial's objective, which is creating a cell fracture effect on 3D models that react to scrolling or mouse actions. The demonstration begins with Blender setup, highlighting how to manipulate objects, apply colors, and initiate a cell fracture to split models into fragments with different materials.

  • 00:05:00 - 00:10:00

    The host continues with further instructions in Blender, explaining how to add forces like vortex and explosion to make the fractured model pieces interact with physics. They detail the process of adjusting gravity and applying force fields to create dynamic animations. The tutorial navigates through Blender’s interface to set up, animate, and convert these effects into a format suitable for web applications.

  • 00:10:00 - 00:15:00

    Attention shifts to web implementation. The tutorial walks through exporting the animated models as GLB files and preparing them for use in a 3D web scene using React Fiber and WebGL. Key steps involve setting up the environment, importing models, and initializing animations with Three.js. The host ensures every step is covered, from file configuration to setting up a responsive and interactive scene.

  • 00:15:00 - 00:21:04

    The video concludes by detailing how to add user interactions, such as using Framer Motion for smooth animations triggered by mouse events. The host emphasizes simplicity and efficiency in coding practices, showing how to utilize hooks and proper configurations to achieve realistic effects. They end with a teaser of future content and an invitation to explore related resources, thanking viewers for their support.

Tampilkan lebih banyak

Peta Pikiran

Video Tanya Jawab

  • How can I import Blender models for cell fracturing?

    You can import models to Blender, use the cell fracture tool, add materials, and then export the file for use in applications like Next.js.

  • Is it necessary to learn Blender from scratch for this effect?

    No, the tutorial shows only the essential steps for creating the cell fracture effect, making it simple for users unfamiliar with Blender.

  • What prerequisites are needed for creating the cell fracture effect?

    Basic understanding of 3D modeling software such as Blender and familiarity with web technologies like 3js and Next.js.

  • Can I customize the gravity and forces on the fractured objects?

    Yes, you can manipulate gravity and add force fields like vortices or explosions to change the dynamics of the fractured object.

  • What is the purpose of the use frame hook in the process?

    The use frame hook is used to rotate and animate the fractured 3D model in real-time during rendering.

  • How can I make the animation react to user interactions?

    By using framer motion and hooks to trigger animations on pointer events like mouse down or up actions.

  • Why might I encounter issues with textures in Blender exports?

    The tutorial suggests there might be complexities in exporting realistic textures with Blender, and it requires further tweaking.

  • Can the cell fracture effect be customized?

    Yes, you can customize the number of subdivisions, materials, and animation interactions to create various effects.

  • Does the tutorial provide a method for dynamic imports in Next.js?

    Yes, it explains how to perform dynamic imports to efficiently load scenes in a Next.js application.

  • What additional tools does the tutorial use for animation?

    Tools like framer motion are used to easily set up smooth animations with custom motion values.

Lihat lebih banyak ringkasan video

Dapatkan akses instan ke ringkasan video YouTube gratis yang didukung oleh AI!
Teks
en
Gulir Otomatis:
  • 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
Tags
  • 3D modeling
  • Blender
  • JavaScript
  • 3js
  • WebGL
  • Next.js
  • Interactive animation
  • Framer Motion
  • Web development
  • Cell fracture