Dynamic Character Controller With Three.js + Rapier ( Complete Overview )

In this video I'll explain how I built my advanced character controller with Three.js and Rapier for physics 💪. We're gonna talk about the code structure and some important UX techniques. ✌
Code:
github.com/visionary-3d/advan...
Rapier.js Docs:
rapier.rs/docs/user_guides/ja...
Chapters:
00:00 - Dynamic CC Intro
00:43 - Initialization Overview
02:10 - Main App
03:04 - Physics
12:38 - Character Controller
26:34 - Outro
--------------------
Visionary 3D:
Follow me:
x.com/visionary_3_d
Discord Community:
/ discord
Shaders Crash Course:
• Three.js Shaders (GLSL...
My Shaders Playlist:
• Shaders
Three.js Boilerplate:
github.com/visionary-3d/three...
#threejs
#3d
#3danimation
#glsl

[@visionary_3_d]

Checkout my tutorial on the voronoi diagram. Since in the next episode we're going to break some objects 😛 kzbin.info/www/bejne/o2W6Z5ivZ9Fpos0

[@henk.design]

This is amazing. Didn't expect otherwise from you!

[@visionary_3_d]

Thank You❤

[@ahmedfarooq7253]

Dont stop posting man, you are one of few

[@markopolo2224]

nice

[@evil_core3029]

Great job again!) Would you like to make a tutorial on a ragdoll character based on ammo or oimo joints system? I think it wuld be usefull and really interesting lesson. Maybe about joint at all.

[@nickcarvajal]

🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

[@has.nguyen1753]

Do a r3f version plssssssssssssss!

[@visionary_3_d]

I'll create a r3f component in the future ( that's a good idea, thanks ) ❤ But Remember, everything implemented in simple Javascript can be added to r3f. Learn how to do THAT if you don't know how it can be done ( I can make a video on that if you want! )

[@nightlycoding]

Nice tutorial, is there something similar with R3F?

[@ThePouetman]

I've always wondered about the point of hooks like this 5:23. I've just been initializing my ecs world, physics wold and loading my assets in an init.ts file and then exporting them, i dont really see the point in wrapping it into a function

[@visionary_3_d]

The point is that it’s much cleaner this way imo and also later on when this turns into a more complex engine every app uses these hooks instead of importing a random variable.

[@ThePouetman]

@@visionary_3_d eh, I'm still not convinced, but thanks for answering anyway! Cool video btw, I finally understood how to set the dimensions for a capsule.

[@andeederek9338]

Is rapier better performing than three-mesh-bvh?

[@visionary_3_d]

It should be. Because Rapier is implemented in Rust. Which then gets used via WASM. However no testing has been done on my end 🙂

[@AndyFarrell008]

@@visionary_3_d So you could use it for collisions between your character/s and a very large scene of static models?

[@visionary_3_d]

@@AndyFarrell008 Yes you should be able to. That's what a good physics engine does. Also I saw some benchmarks on it a month ago but the web page doesn't work anymore now... But the right thing to do is looking at benchmarks or doing performance teste yourself.

[@IshfaqKhancomedies]

change the color of the box when you click on the box....

[@fwdflashwebdesign]

Can you do some tutorial on text, not 3d text, text that can be styled with css, there is not about this topic anywhere...

[@visionary_3_d]

Is there a specific effect that you want to achive ?

[@fwdflashwebdesign]

@@visionary_3_d Not really effects, simple text, like an animated hover button or simple styled text that can be turned into texture, there are a ton of tutorial on shaders etc but on one of the most important topics text that can be styled like we do with CSS and HTML nothing, I could not find anything I know how to use a complicated shader and I have no idea how to do a hover text like in css :)

[@visionary_3_d]

​@@fwdflashwebdesign Well there are 2 scenarios : 1. you've seen this hover text somewhere ( share the link if you have ) 2. you're imagining a hover effect with no reference You need to be more specific... or else I can't help However what you described reminded me of this tutorial. Check it out: kzbin.info/www/bejne/mnaQc2OglMynlbs

[@fwdflashwebdesign]

@@visionary_3_d Exactly how do we use basic text that can be formatted with CSS in threejs? I have no clue...

[@EmberUB]

div2canvas may useful， it can convert Html elements to canvas,then you can convert canvas to texture and use to mesh.

[@andrewchen7174]

This is amazingly good! Thanks for sharing it! So, it's more like a kinematic character controller (by controlling the character position)? I was impressed by this vedio (floating capsule control): kzbin.info/www/bejne/p5XWnHhuha-sbLM And I am also trying to create a rigibody character controller using r3f+rapier by myself (controls character velocity). But currently got a trouble makeing character staying still on a moving/rotating platform 🥲. Do you have any advice on that? On unity, there is a parent function we can use, but i don't find in react three rapier (If you are posting a r3f version in the future, that would be realllllly helpful to me. Just want to learn how an expert coder orgenize his r3f code)

[@visionary_3_d]

yes this is a kinematic position based cc. great video, I like the hover effect on that capsule controller. the thing that makes you stick to platform when it's rotating is friction. so try adding a ton of friction. but for a more realistic effect there might be other forces involved ( looking into actual physics concepts might be helpful in that case ) r3f video is actually a good idea thanks!

[@andrewchen7174]

​@@visionary_3_d Thank you for your feedback! I appreciate your suggestion of adding friction to enhance the sticking effect on rotating platforms. However, the floating capsule is not affected by ground friction. Maybe I should find a way to track the platform's movement and apply it to the character. 😅

[@tomatonnnn1791]

@@andrewchen7174 you can use fixed joint in rapier which is similar to parent

[@andrewchen7174]

@@tomatonnnn1791 That's a pretty cool idea! Thanks👍! So, if I understand correctly, we can control the joint point position and thus control the character's movement? However, what if we want to control the velocity of the character instead of directly manipulating its position? Is there a solution or workaround for that scenario?