three.js Basic Character Controls - GLTFLoader, AnimationMixer, 3rd Person Controller

[@losrobbosful]

2 years have passed. And even though quite complex, this stuff is still the most clean & complete video tutorial on third person follow camera in ThreeJS. Hope at some point & enough repetitions I will completely understand the code :D Actually it would be great to have a separate video just on the camera movement & quaternion rotation stuff, which goes a bit slower :) That would be of insane help. Because here good walkthroughs just like yours are still lacking at YT

[@losrobbosful]

Exactly the video walkthrough needed. Finally a very clean and straight-forward explanation of the process. I love it. Will checkout more of your stuff :)

[@SimonSt-l2f]

Hello mister thats a great tutorial you really passionate about clean three js i have learned by watching your examples i wanted to ask you while using typescript what roll up setting are you using to build the the final result before uploading to web server and why we must use it could you show us in one of you videos how to rollup the code please brother

[@Ajion]

good choice of music lol

[@robertpetrowsky5826]

For real I had to restart cause I was just vibin to it

[@omakase1890]

Lol

[@amalnathsathyan6029]

That background and the soothing voice, What a nice place to learn to code!!

[@jpjpjpjpjpjpjpjp]

Love the video, super helpful for getting started on a threejs game. may I request movement on terrain for a future video topic?

[@Cat_trot2333]

nice video ! hi bro , can you make a montage motion lesson by three .js ? like roll or attack

[@uRealReels]

where is index.Js in git... i only saw index.Ts

[@amirreza3638]

i loved the video, but it seems so complicated

[@nguyentuantruong4815]

you can explain in the code: var angleYCameraDirection = Math.atan2( (this.camera as THREE.Camera).position.x - (this.model as THREE.Group).position.x, (this.camera as THREE.Camera).position.z - (this.model as THREE.Group).position.z ); At the 6:44 th minute video. I really don't understand why subtract the two coordinates together? I have learned about Math.atan2() function but still don't understand what you do in that part

[@siddhipatil9648]

Can we add this to Aframe scene

[@uRealReels]

how do i use npm to run this?

[@juangoyret9364]

Amazing work, it will be awesome that you convert it to a library that anyone can import and the only thing to put as a parameter is the model, the animations names and a delta speed maybe. I think that threejs has a enormous potential if we start as a community to create libraries that makes more friendly the game developing. I think that threejs can compite with Unity or any game engine that allows you to develop in the browser.

[@s-series2823]

agree

[@BhanuPratap-ss3ep]

very good tutorial , please upload videos regarding game dev in threejs

[@luka4695]

A salad

[@webghoul]

there is any error where us used the object method to store which key is pressed in event listener : error is here : (keypressed as any)[event.key.toLowerCase()] = true error : Uncaught SyntaxError: Unexpected identifier

[@mohammadaamirkhan3359]

i need source code plz

[@vineetjana6393]

can you help me with getting the changing position of the model in the index ts file...I cannot export the position to the index file ...plz help

[@anaymittal7720]

Yesssss thank you!!

[@catdsnny]

Sample code doesnt work - wont build with node

[@neelmistry9241]

Amazing explanation, But can you please explain how to set the controls on html button click for mobile device access?

[@clockssss]

How would you be able to make it work on mobile?

[@kerrykreiter445]

one of, if not the best Threejs tutorials I've seen on KZbin. Thanks so much!!

[@nomiscph]

Amazing video, i was wondering do you have any suggestions on how to do the same movements but by mouse click as in diablo 2 :)

[@kinsukaweerasooriya2933]

Thank you very much Sir !

[@djiduthID]

please full tutorial sirr

[@cryptoMateMSGP]

would you be keen to work for us animating a scene that we already have?

[@webghoul]

create the same for javascript please

[@elingaldo]

simply billiatn c:

[@HuynhLuong227]

that's amazing

[@michaelmas2841]

Hello, great job! I have question: can i use arrow keyboard for the control of model?

[@michaelmas2841]

It's ok : Can use arrowup, ect... for it!

[@xbz24]

gracias

[@jesusmuhammad8220]

really helpful tutorial! Thank you. I got one problem: I wanna to have a camera which is not following the character, how should I set the walkDirection? :/ For now, the moving direction has some issue...

[@heygenka]

In a third person camera the walking direction depends on the camera direction. In your case the camera is positioned independently of the character so the character movement direction depends on some global direction axis

[@weslleymatheus3643]

@@heygenka Hi man, I downloaded the entire "src" folder of your code, without changing anything. But it's giving an error. in this part the parts in quotes, turn red. import { KeyDisplay } from './utils'; import { CharacterControls } from './characterControls'; import * as THREE from 'three' import { CameraHelper } from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; in this one, too. import * as THREE from 'three' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' import { A, D, DIRECTIONS, S, W } from './utils' Would you help me??? i am braziliam. My english is not very good, sorry.

[@日暮观翔何处是咖喱江]

Cooooooool

[@ethanendures]

thanks, this can be implemented in react-three/fiber.

[@Unfair_Rabbit]

you got any solutions ?

[@ethanendures]

@@Unfair_Rabbit hi, I implemented this in react-three/fiber, but I got some bugs. I am learning and trying to get this implemented into 7878(rust) programming language 🚀, 1. Follow the exact same steps as he shown but with react three fiber 2. Some assignments must be done with useState, for example : const [velocity, setVelocity] = useState(THREE.vector(0,0,0)); 3. The animations I did were done on blender, Note to change the name of the actions and actually know what actions are set in blender for your amarture. 1. Go to Blender 2. Load in your model (fbx, or glb, etc..) 3. Click your amarture and go right above the Scene Collection and you should see two dropdowns ( one looks like a file system structure, and the one next to it looks like an picture frame with a mountain and a tiny moon in it. 4. click on the dropdown with the picture frame, and select Blender FIle 5. Then select actions, 3.A. you can look up how to work with loading animations with blender and mixamo. 4. I just translated the code from the video to react. Lastly, this is a good video to learn how to control a 3rd person camera correctly in threejs.

[@Unfair_Rabbit]

@@ethanendures maybe i can try fixing those bugs if you can provide your code to me

[@johnpaulganzan1731]

Thank you Very much!

[@danielvaldecantos3629]

the animations don't work if you create a constant elapsedTime variable before creating the mixerUpdateDelta variable. weird.

[@harsh_here]

Can we have a 3rd person camera effect whicy can be controlled using Wasd without having any character?

[@antoniofuller2331]

Obviously yes, it's right in front of you

[@harsh_here]

I meant controlling camera with WASD

[@张智强-c4i]

@@harsh_here Is this a forward camera projection?

[@jiweizhang3565]

讲的真好

[@ujeeblends]

thanks a lot!

[@christophkrass6929]

vielen Dank

[@smackdownboy]

This is really a good video. Every concept is taught so easily and clearly.

[@howl2339]

If only there were the words to describe how wonderful there tutorials are