Three.js - an introduction in vanilla JavaScript

[@razvanfrandes]

I tried learning three js, it’s somewhat easy to create basic shapes, but I got lost down the road, it does require advanced trigonometry. Hope to see more videos on this topic, gl :)

[@maorzigel4231]

Way to go man! Keep up the good work! Always wanted to learn Three.js... You explanation is very good and very informative! I'm sure you will successes and keep growing!

[@techtutztutorials]

Thank you!

[@rahulpanchal6459]

Great video!

[@techtutztutorials]

Thank you!

[@jameswestbrook5709]

please make more videos on three.js it was helpful

[@techtutztutorials]

thank you for the feedback!

[@fritzhopper5145]

Great video very helpful! Is there a way to add orbit control and GLTF loader?

[@techtutztutorials]

Thank you for the feedback, I will make more three js videos in the future for sure! I believe I can make a video about your question in particular

[@psy237]

first of all you should be clear about your "canvas" (place where you add your 3D to). You can either decide to make it full window witdth and height, or put it into a div, canvas, or whatever element. In each case you have actual width and height properties you should be using for setting the render size as well as the camera's aspect ratio and not just use 2/1 which is simply wrong. Let's say u render to the full window, instead of "2 / 1" you should be using window.innerWidth / window.innerHeightl. Or if u use a container (canvas or div, etc) that you call "canv" in ur code: canv.clientWidth/canv.clientHeight. Same goes for renderer.setSize(); also you put width of height of your render-area, not just some made up numbers. next minor mistake is saying that things are being rendered where they are not. the thing is clearly being rendered inside the animate loop. There you have the renderer.render() call. That's when things get rendered, not where you declare the renderer. There things are not getting rendered yet. Because as soon as they got rendered, adding more objects or animations won't do any good anymore. Rendering means putting the scene onto the screen. Lastly I think your implementation of three.js is completely off as you should implement it as a module. At least the latest version I can't find the examples (e.g. OrbitControls) as non-module versions anywhere anymore.

[@techtutztutorials]

Thank you for the view and feedback! You have a good point on the render I believe. I will be doing more three js videos so stay tuned and let me know what you think! Im always open to suggestions and examples, learning is essential and continuous