super excited for the 3.js series. I've been putting off learning this for so long. I actually met Mr.Doobs the creator of the library at a conference in CMU for VR/AR
Thank you! I liked that you did it without vite or parcel. And that you showed me the "Inspector" in the Browser. That helped me to find my misspellings.
I like that this video is sponsored by skillshare because I am a member, but when I searched in skillshare for three.js, I only found 6 courses. We need more content skillshare!
i want to make a HTML template using GSAP core tools and want to sell it in ENVATO MarketPlace THEMEFOREST, is it free or i have to pay GSAP. ??? it will be very helpful for me if you answer . . .
@DesignCourse Gary! Loved the turorial! I was just about the write a paper on AR on a webbrowser and three.js is so crucial for it! Thanks for helping me understand the basis aspects! Can't wait by the way for your next three.js video :D
@@Bri8765n as long as it takes to memorize keybinds. There are m a n y. Also yeah, the concept of meshes in general I learned from blender, as well as the concepts of keyframe easing in it's graph editor. I definitely agree that you should try to learn it, if you haven't already by the time I write this.
Thanks a lot for this video Brad ! You're the dude whose videos I prefer to click on everytime I TH-cam search something in WebD or Illustrator. Laughed a lot at 27:10
23:40 Request animation frame can lock in at higher than 60fps on faster refresh rates. I was getting ~120-140fps. I had to right a function to throttle is back to 60fps.
@@federicospovcooking1481 it is not easy if it differs from their example, also, it is not just the matter of importing but also manipulating 3D model once inserted
using react for some reason window.innerWidth is larger than it should be a by about 17px. I used document.querySelector('body').clientWidth seemed to work after that
Hey Gary, awesome video. I love your style of teaching! Any thoughts on how to put together a design for an interactive 3D webpage like this? It doesn't seem as straightforward as a design for a typical page
Hey i see you have just finished the tutorial but unfortunately i'm having some problems with setting the renderer variable. I get the error : "Uncaught TypeError: THREE.WebGlRenderer is not a constructor" Do you know what it could be? If not that's absolutely fine :)
@@nanekb4825 I think I had that error blink at me too :) I am a noob and I'm not sure how I got rid of and if that's really the reason for the error, but when I just tried putting the lowercase WebGl just like you did here, my animation was all gone, so do try WebGL with the capital 'L' :D
This assumes that the canvas takes up the full height and width of the screen. So if you drop it onto a web page with other divs, the x and y positions of the mouse is off
updateProjectionMatrix() may be the current function vs updateProjectMatrix().. i know his worked there but i had to use this as of 3/26/2020 but if yours worked id stick with his!
It seems like the animation only happens on the first click for each object. On the second one, it scales once and then comes back to normal and then stops. What should I do in order to make the entire animation go through on every click?
I'm confused about how 'this.tl' even works in your context. You've put that at the global scope so 'this' is undefined. ??? I just went 'var tl = ...'
quick question. so i should just read the documents from three.js to fully be aware of each functions and i should be good right? theoretically the coding logic is there and about the same. haha. just whether you know more of the vocab.
An absolutely outstanding tutorial! Thank you - I do have a question though. My code behaves as desired so thank you for that, but how can I make it so that mousing over an object deploys its timeline animation uninterrupted? Right now, when I mouse over a given object, the timeline animation starts, but if I keep mousing over that same object while in motion, it'll restart its timeline animation. Could I, for example, mouse over an element, DISABLE that element's pointer events for the duration of its timeline animation, then allow that object to be interacted with again after? I really hope that makes sense, please let me know if it doesn't. Basically I just want an object's rollover event to be disabled while it's in motion so that repeatedly mousing over it doesn't restart its respective timeline until completion.
Thanks for the tutorial! Can someone please tell me why the animation does not repeat itself when calling onMouseMove for a second interaction? Why does it differ from the first one?
Hey, when I call this.tl.to(this.mesh.scale, 1, {x: 2, ease: Expo.easOut}) I get an error Uncaught TypeError: Cannot read property 'scale' of undefined at :1:22
You have a type. It should be Expo.easeOut. I also ran into this problem as well and it was because I used let for all of my variables instead of var. I only had to change one variable back to var. It should read: var mesh = new THREE.Mesh(geometry, material);. If you didn't use let I don't what else could have happened.
@@miyahliddell3568 You probably won't see this, but I did the exact same thing as other people have said there are issues with var. Do you know why this happens, and why switching to var fixes it?
I am not sure why, whenever I try to run the page with live server from vs code, i get error: Uncaught TypeError: Cannot read property 'precision' of null at getMaxPrecision (three.js:15022) at new WebGLCapabilities (three.js:15051) at initGLContext (three.js:22636) at new WebGLRenderer (three.js:22686) at index.html:24 if i just open the html, it works fine. I tried searching for the error and I cant find anything. Help ? :D
Hello DesignCourse, first thanks for your tutorial. I have a question even my code is 100% same as the tutorial's. Hmm, I just got 3-5 boxes every time, yet when I copied from your Codepen, it shoed around 10s boxes. will you have any ideas on this @@...?
I had the same problem and taking out the "this." worked for me; this.tl = new TimelineMax().delay(.3); this.tl.to(mesh.scale, 1, { x: 2, ease: Expo.easeOut })
Hey Gary, excellent video! after watching it i am trying to figure out a way to orbit the camera itself around a sphere object on mouse scroll(middle mouse button scrolling, and ofcourse disable zooming) while also making sure that the camera always looking at the sphere object and keep the same distance from it. unfortunately i cannot figure out a way to do so... any idea if its even possible? and if so any chance to bring it on a tutorial please? thanks a lot, Guy.
finally ... plz more three.js
+1
+1
+1
+1
@TheNick - Ник +1
super excited for the 3.js series. I've been putting off learning this for so long. I actually met Mr.Doobs the creator of the library at a conference in CMU for VR/AR
Thank you! I liked that you did it without vite or parcel. And that you showed me the "Inspector" in the Browser. That helped me to find my misspellings.
I like that this video is sponsored by skillshare because I am a member, but when I searched in skillshare for three.js, I only found 6 courses. We need more content skillshare!
Enjoy? Subscribe!
i want to make a HTML template using GSAP core tools and want to sell it in ENVATO MarketPlace THEMEFOREST, is it free or i have to pay GSAP. ???
it will be very helpful for me if you answer . . .
Brad Travesy And You are my favorite web development instructors.
Thanks
I'm glad that i found this . not only three js but this torturial helped me too understand js better. Loved it !!
Hey bro..did u find more videos or sources to learn three.js
Alot of things were leff unexplained and used just like that. Like whats the use of raycaster.setfromcamera on line 61?
Best web dev content on youtube
Thanks, all the other videos I followed along the code didn't even render, this one actually worked so thank you.
Watched a few videos now and this was the only one that made proper sense to me all the way through - thanks!
if 25:03 you were doing rotation and it did not line up, it uses radians instead of degrees so you have to input your angle in radians
Just discovered your channel today. Absolutely fantastic! This really helped me. Thank you:-).
PLEASE MORE!! I have learned more practical use of this library in this one video than a whole udemy course on this
That's an excellent tutorial.
Very easy to follow, and you don't just feed us with fish but rather teach us how to catch them ourselves.
Thank you!!!
@DesignCourse Gary! Loved the turorial! I was just about the write a paper on AR on a webbrowser and three.js is so crucial for it! Thanks for helping me understand the basis aspects! Can't wait by the way for your next three.js video :D
Nice addition to the channel!
Awesome man.
Maybe you can do a vanilla JS soon
To compliment those html and CSS tutorials
Amazing tutorial. You should consider using let instead of var though.
It is written in ES5 style, so no need.
Yeah, I bet he doesn't know what let is, what a noobie, thanks for enlightening him.
I was waiting this tutorial. Thanks man 😍😍
Tips: Learn Blender first, this massively makes us easier to learn Three.js because of their similar concept
How long would it take to learn blender? :O
@@Bri8765n consider you have good internet connection, 1 hour is enough to understand basic via youtube tutorial, more is better
@@Bri8765n as long as it takes to memorize keybinds. There are m a n y. Also yeah, the concept of meshes in general I learned from blender, as well as the concepts of keyframe easing in it's graph editor. I definitely agree that you should try to learn it, if you haven't already by the time I write this.
TheCostco will get on it !!! thank you so much
Thank you! Your tutorial saved my school assignment
Thanks a lot for this video Brad ! You're the dude whose videos I prefer to click on everytime I TH-cam search something in WebD or Illustrator. Laughed a lot at 27:10
One of the best developers on youtube! Always really useful information and lessons! Thank you
23:40 Request animation frame can lock in at higher than 60fps on faster refresh rates. I was getting ~120-140fps. I had to right a function to throttle is back to 60fps.
The most complete and awesome video on three.js! Thanks! Can you make a video on how to import 3d models in three.js?
@@federicospovcooking1481 it is not easy if it differs from their example, also, it is not just the matter of importing but also manipulating 3D model once inserted
Federico D sorry if I sounded harsh, did not mean to :)
using react for some reason window.innerWidth is larger than it should be a by about 17px. I used document.querySelector('body').clientWidth seemed to work after that
AMAZING TUTORIAL.!!!! Just what i was looking for to start.
We need more videos about three.js
i have been searching for a good thrre js tutorial but i coulndt find one. Thanks!
Hey Gary, awesome video. I love your style of teaching!
Any thoughts on how to put together a design for an interactive 3D webpage like this? It doesn't seem as straightforward as a design for a typical page
Just googled and it seems three.js is on the wave! Cool tut!
please make a video on 3D object loading in Three.js
You're talented man!!!!
You are AWESOME and Your tutorial is SUPER AWESOME!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Totally expecting a three js guide from you.. ♥️
Thanks Gary. Love Your tutorials about three.js. Reference:
Positioning items at 24:15
Awesome work, want more videos like this. 😊
Impecable . Congratulations!
your tutorials are awesome !!! Thank you so much
Are you the young Bob Ross of web design? XD Great intro tutorial! Thanks!
Hey i see you have just finished the tutorial but unfortunately
i'm having some problems with setting the renderer variable. I get the error : "Uncaught TypeError: THREE.WebGlRenderer is not a constructor"
Do you know what it could be?
If not that's absolutely fine :)
@@nanekb4825 I think I had that error blink at me too :) I am a noob and I'm not sure how I got rid of and if that's really the reason for the error, but when I just tried putting the lowercase WebGl just like you did here, my animation was all gone, so do try WebGL with the capital 'L' :D
@@rustemusic Yep!!
That was it thanks :)
18:18 -My entire screen is black.-
Turns out I forgot the _new_ keyword with the _THREE._
I'm too used to Dart/Flutter where _new_ isn't needed.
I love your studio. It's very convenient. Just sit and start recording a new vlog. )))
This assumes that the canvas takes up the full height and width of the screen. So if you drop it onto a web page with other divs, the x and y positions of the mouse is off
This is awesome glad this is so recent!
Can someone please explain reason for adding meshX at 38:30 ?
Could you show an example of clicking on an object and panning and zooming the camera to that object?
use orbitalcontrol from docs
I think you can get that info from the docs
updateProjectionMatrix() may be the current function vs updateProjectMatrix().. i know his worked there but i had to use this as of 3/26/2020 but if yours worked id stick with his!
you just save me bro, tnx
90% more? Personally, it feels like 990% more. Thanks a lot for the course.
You are so useful!!! Code Teacher
Hi, Is there any way to make 3D fluid material that we can use to simulate fluids like oil, water, etc. Like showing water flowing from a tap in 3D.
awesome! Very good tutorial for starters!
hi could you please make a third person camera tutorial..the camera should be able to look around follow a player and collide with walls
Great video, thanks for this made things a lot clearer. Keep up the great work.
Thx. A-frame is also a a simplified layer to Three.js
Thanks for this video... Very usefull ...
i couldn't get rid of the scroll bars
Very nice presented, well done and appreciated.
This is an awesome tutorial, thank you!
This video is awesome.
Thanks much !!!!!!!!
It seems like the animation only happens on the first click for each object. On the second one, it scales once and then comes back to normal and then stops. What should I do in order to make the entire animation go through on every click?
I'm confused about how 'this.tl' even works in your context. You've put that at the global scope so 'this' is undefined. ??? I just went 'var tl = ...'
quick question. so i should just read the documents from three.js to fully be aware of each functions and i should be good right? theoretically the coding logic is there and about the same. haha. just whether you know more of the vocab.
Awersome video!
Any plans to add more videos to this series?
Great tool and great tutorial!
An absolutely outstanding tutorial! Thank you - I do have a question though. My code behaves as desired so thank you for that, but how can I make it so that mousing over an object deploys its timeline animation uninterrupted? Right now, when I mouse over a given object, the timeline animation starts, but if I keep mousing over that same object while in motion, it'll restart its timeline animation. Could I, for example, mouse over an element, DISABLE that element's pointer events for the duration of its timeline animation, then allow that object to be interacted with again after?
I really hope that makes sense, please let me know if it doesn't. Basically I just want an object's rollover event to be disabled while it's in motion so that repeatedly mousing over it doesn't restart its respective timeline until completion.
try setting a flag before and after the timeline .
Thanks, you are the best!!
how about if i have a 3d modal and i want to import it
can you make video for entering data in ck editor and angular6 in php myadmin
Great tutorial!
Really amazing language
Thanks for your efforts 👍😘😊
Sir I need to change color of one face of cube on button click. Please if you can guide me.
Thanks for the tutorial! Can someone please tell me why the animation does not repeat itself when calling onMouseMove for a second interaction? Why does it differ from the first one?
mine is doing that and I don't see why lol.
You Sir are amazing!
can you plz add the three links for three.js in the description plz.
How can I make an animation of a 3d object that 'floats'. As a levitation effect?
Great video, and Thank You...
Amazing, thanks!
awesome stuff!!! tnx a lot
When I open with Live Server my tab just shows a blank page, what am I doing wrong?
Hey, when I call this.tl.to(this.mesh.scale, 1, {x: 2, ease: Expo.easOut}) I get an error
Uncaught TypeError: Cannot read property 'scale' of undefined
at :1:22
You have a type. It should be Expo.easeOut. I also ran into this problem as well and it was because I used let for all of my variables instead of var. I only had to change one variable back to var. It should read: var mesh = new THREE.Mesh(geometry, material);. If you didn't use let I don't what else could have happened.
@@miyahliddell3568 You probably won't see this, but I did the exact same thing as other people have said there are issues with var. Do you know why this happens, and why switching to var fixes it?
@@miyahliddell3568 after 15 minutes of scrolling I finally found a solution, thanks
Thanks! Very useful!
That codepen doesn't contain the example code
Big coffee cup!
Yaaaaaaassssss
Awesome ! Really Great tutorial ! Threejs is very nice ! Coud you make a future tutorial with 3D model loading, please ! Thank you so much !
Make a complete series of three.js
You are able to make 2D indie games with Three.js?
Interesting! Do you think this has many practical applications with most regular client sites though? Or would it be more for web apps or something?
What if I wanna give different animations for each element? Anyone knows how to do?
how can use this in angular 8 .. it's urgent please. i have a loading container problem as I remember angular support javascript so ..
I am not sure why, whenever I try to run the page with live server from vs code, i get error:
Uncaught TypeError: Cannot read property 'precision' of null
at getMaxPrecision (three.js:15022)
at new WebGLCapabilities (three.js:15051)
at initGLContext (three.js:22636)
at new WebGLRenderer (three.js:22686)
at index.html:24
if i just open the html, it works fine.
I tried searching for the error and I cant find anything.
Help ? :D
Hello DesignCourse, first thanks for your tutorial. I have a question even my code is 100% same as the tutorial's. Hmm, I just got 3-5 boxes every time, yet when I copied from your Codepen, it shoed around 10s boxes. will you have any ideas on this @@...?
It should be camera.updateProjectionMatrix(); at 11:11
Uncaught TypeError: Cannot read property 'scale' of undefined.
Please help
I had the same problem and taking out the "this." worked for me;
this.tl = new TimelineMax().delay(.3);
this.tl.to(mesh.scale, 1, { x: 2, ease: Expo.easeOut })
@@martynasbajarunas8569 Yeah, I did the same and it worked. Thank you!
Thank you very much!
Hey Gary, excellent video!
after watching it i am trying to figure out a way to orbit the camera itself around a sphere object on mouse scroll(middle mouse button scrolling, and ofcourse disable zooming) while also making sure that the camera always looking at the sphere object and keep the same distance from it. unfortunately i cannot figure out a way to do so... any idea if its even possible? and if so any chance to bring it on a tutorial please?
thanks a lot, Guy.
threejs.org/docs/#examples/controls/OrbitControls
codepen.io/AlainBarrios/full/oQQgQQ
that?
@@rtcwkillz yea sort of but couldent see how to bind the movement left and right of the camera to the mouse wheel
the camera object of three js has rotation properties, try that
@@rtcwkillz will do thanks :)
blender to threejs to wordpress to woocommerce...webgl thats the question ? server set up?
Very good. Thanks