Create JavaScript 3D World in 5 Minutes (or less)

[@simondev758]

If you enjyoed this, check out my GLSL course: simondev.teachable.com/p/glsl-shaders-from-scratch Or support me on patreon!: www.patreon.com/simondevyt

[@clearmindstudios]

Simply brilliant. Didn't know how to get started. This one and the shader tutorial brought me on board after months of lurking. Thanks for the wonderful presentation and helping me grow as a developer and an artist!

[@simondev758]

That's awesome to hear, if you end up making anything, let me know so I can check it out!

[@ARexplor]

Your video tutorials are helpful as a resource for seeing what a finished product should/could look like done at a high level, but I find it extremely unhelpful as a beginner. I appreciate your time and intention.

[@TheBotEmpire]

Glad i found your channel :)

[@simondev758]

Me too!

[@khao9377]

oh, I think so.

[@swoorp]

ya, you guessed it... the starting got my heart and the video made me creative... thanks...🙂❤❤❤❤

[@simondev758]

I'm so glad!

[@chriscalver8595]

Great video Simon. Thanks

[@SeanStClair-cr9jl]

Immensely useful, thank you!

[@tinabremer9544]

I have a cad model that I want to load with three.js and interact with it. The model is a machine that can perform individual movements. Rotations around joints etc. How can I implement this? How can I import the tree structure of the model in which its geometry is defined? Can I load the model as a whole and then access its individual components with three.js and then execute the desired movements with these? Or does the model first have to be rendered in Blender or something?

[@TheNZKorean]

Fantastic! Liked and subscribed.

[@klutchsatellite7990]

Has anyone removed the floating object and tried to make the zoom work so it feels like you moving with in the world?

[@js-javascript1706]

I subbed to your channel. I've been looking for three.js tutorials that focus on gaming as I only know Javascript and building 3d games would only a hobby for me. However your tutorial style is more like simply reading the lines of your code and saying what it does, but because we are new to three.js that style is hard to understand or to use these in our own code. It is also hard to understand what each function does. This is because you sometimes highlight groups of functions and say what they do as a whole. It would be nice if you broke up the lesson is to smaller pieces. explaining little bits of the code in isolation and then put it all together at the end of the video. As it is now, it's imposible at least for me to watch your video and implement something i saw. Please don't take this as a negative comment. Even if you don't change you tutorial style i love the video series i can always start elsewhere and come back when i'm ready for your awesome three.js content.

[@simondev758]

Glad to have you around :) Don't worry, make any suggestions you like, that's how I improve. Totally get where you're coming from, I was new once too. I've kinda made a conscious decision to target more of an advanced beginner crowd, partly because it's just easier for me to get actual views that way. The videos covering the absolute basics have been done to death by other, bigger people. Luckily, there's plenty of room though explaining more advanced topics. Let me know if you want any resources on getting started. I'm a "learn by figuring stuff out" guy, so I just started with the basic examples on threejs's website. It's frustrating at times, but I learn by failing over, and over... and over, until I understand.

[@HarryDaveyHD]

how do you actually start though? I dont know how to get the three.js library to work but every tutorial I look at seems to quickly skim over that bit like its not important. how do you having it actually run on three.js?

[@simondev758]

An unfortunately reality is that part isn't that important. There's kind of an unspoken minimum proficiency level that's required here. If you want my advice, it's to spend a few weeks on some absolute basics, I have a beginner javascript tutorial series that you can try out.

[@HarryDaveyHD]

@@simondev758 I may have fixed my own problem now I just felt a bit lost not finding the answers I was looking for so I thought I’d drop some comments. Thanks

[@pewterhacker]

@@simondev758 Au contraire, this is probably the most important thing that is missing in the "literature" ring now. We need a process for getting set up that is well documented, bulletproof, will not break on the next release of the package manager, will not fail us as we progress on to more complex things, and will work effortlessly for others if/when we share our code on GitHub (or similar).

[@Nexus-rt1bm]

Underrated

[@simondev758]

Thx man

[@Nexus-rt1bm]

No, Thank you🙂

[@KerishaStewart]

thanks, but how did you get that terrain effect?

[@simondev758]

It's a cubemap

[@KerishaStewart]

@@simondev758 oh right! Makes sense! I thought the cube map was all sky and some other stuff was done for the ground. ….. But the ground is actually part of the cube map. Thanks!

[@SuperJV4x]

do you need an active internet connection to us 3js? on line 1 you have import from a website. or can it be downloaded?

[@simondev758]

It can be downloaded pretty trivially, I just don't bother for my little demos because adding that single line is even easier and I'm a lazy man.

[@mhenniachwek2009]

From where did you get the Skybox ? and how can I get generally those pictures for any place and environment I want ?

[@TechAndTravel-ny8tx]

Many thanks

[@ByFranq]

I just keep getting this error: Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec. I'm running it on a python server just by using the command: python -m http.server after I installed python. I'm on windows OS too. Any advice?

[@djaccount5458]

I dont like use libraries like three js becouse i dont know how it work.

[@codingawarenes]

where i can get the starting code ?

[@codingawarenes]

got it thanks Man ...

[@sruffolo9303]

is there minimum requirements for this? i have an amd ryzen and 12GB ram. Its laggy when i use orbital controls. can i fix this? or at least optomize this?

[@simondev758]

There's probably something else wrong, this should run on about anything.

[@marcusaureliusregulus2833]

Do you watch Sebastian lague? It's incredibly similar what you guys do

[@simondev758]

Definitely seen a few of Sebastian's, really sets a high bar for presentation. We've definitely covered some similar material, believe he had some tutorials focused mostly on terrain generation, whereas mine have been more in the direction of a procedural universe.

[@FPChris]

Great videos. Could you make a simple terrain example? Like export a simple textured ground terrain from Blender. I assume three JS isn’t limited to flat planes. Thx.

[@FPChris]

I guess a better question would be how to create navigation maps with polys loaded from Blender

[@LoganCTanner]

if you find the time could you write/shoot a quick tutorial on how you got intellisense working for threejs? I tried doing the most popular one on YT but isn't working for some reason peepoCry

[@simondev758]

I literally just have vscode with no extra extensions installed. Any intellisense you see is just whatever it's picking up from the file.

[@kortkunig2291]

I’ve not yet come across a whole lot of three.js tutorials that used class as the skeleton for their project. It’s odd, since I’m trying to pass this._camera as my camera to raycaster.fromCamera to make stuff clickable. But it just keeps saying “undefined”. Do I need to grab the object ID and refer to the camera object somehow that way?

[@simondev758]

You should just be able to pass the three.js camera, but the function looks like it's setFromCamera and takes coords and a camera, not just a camera.

[@kortkunig2291]

@@simondev758 So this._camera isn’t what I should pass to raycaster.fromCamera? What is this._camera?

[@simondev758]

@@kortkunig2291 threejs.org/docs/#api/en/core/Raycaster That should be it yeah, but it should be the second param.

[@kortkunig2291]

@@simondev758 thanks 🙂 Yeah, I‘ve looked up the documentation. But it didn’t really work for me. Tried to change the material color on click, but instead it changed the material color instantly for every object. I don’t know, it’s hard to explain because I didn’t really understand what I did wrong. But thanks still. Amazing stuff you‘ve done so far 😊

[@itsuhmelotus6490]

Which repo do i download to get this project? the github link only takes me to the overview of all your projects

[@simondev758]

For this one? Should be github.com/simondevyoutube/ThreeJS_Tutorial_BasicWorld

[@JonMagner]

Hey Simon. I've been horsing around with your files and noticed that the skybox displays images on only 5 out of 6 planes on Chrome on Mac. It all displays as expected in Safari, FF, Edge, and Chrome on PC. I also rebuilt the same functionality using the code directly from the three.js docs and had the same issue. I've had similar issues with images not displaying when loading textures from an array in Chrome/Mac. Have you seen this behavior or have any insight into this issue? Thx a bunch.

[@simondev758]

Sorry, no ideas and I don't have a mac to test on. I'd suggest filing a bug with a minimal repro in a jsfiddle or something, and the three.js team can take a look.

[@lewisnt_]

can we get a react-three-fiber vid? :p

[@victorisrael6191]

Plsss tell all the application, programing language to make these

[@simondev758]

Just VS Code & JS

[@ilahazs]

@@simondev758 can I copy ur code an run in my pc?

[@rishabhkichu9482]

Cool! A tutorial of this would be awesome!

[@simondev758]

Do you mean the source? If so, that's already on github.

[@rishabhkichu9482]

No, like a line by line tutorial :) #immaNoob

[@henryzhang6512]

simon i love you

[@뽀뇨뽀뇨-j1x]

thank you so much! I hope you explain more specifically next time :P

[@simondev758]

Will do! So do you just want me to explain line by line what things are doing?

[@gooficat]

@@simondev758 I think people like following 'code with me' style tutorials. [The video is you typing and explaining the code as you write it].

[@lorenzodossi]

Thanks !

[@simondev758]

No problem!

[@francescotagliavento8081]

could you make a tutorial about that ? thank you

[@simondev758]

Sure, let me know what specifically you'd like a tutorial on and I can try in the future.

[@kritikkaushal6305]

Amazing

[@simondev758]

ty!

[@kishmatbhattarai650]

heay can we please get the source code

[@simondev758]

Just take it, it's on github.

[@WEBSTART-LIVE]

Крутое видео! Благодарю

[@skippythemagnificent8103]

Helpful ... : )

[@simondev758]

Glad to hear that!

[@xhjb4ever]

how do you run this

[@simondev758]

Watch the video "Setup & Hello World"

[@xhjb4ever]

@@simondev758 ok

[@crimsongaze3303]

hey there. Which one is the github repo for this tutorial? I can't find it. Is this included in the ThreeJS_Tutorial_LoadingModels project?

[@simondev758]

It's this one: github.com/simondevyoutube/ThreeJS_Tutorial_BasicWorld I gotta get better at naming these.

[@crimsongaze3303]

@@simondev758 hehe. no worries. thanks

[@minemaxskill9766]

somekind a script is blocked everything s black

[@simondev758]

How are you hosting it?

[@minemaxskill9766]

@@simondev758 how should I?

[@fil8649]

@@minemaxskill9766 You can host it locally using node: Have Nodejs installed (download it at nodejs.org/en/download/), then open command line and install http-server via npm (npm install http-server -g). Then cd into your project folder where main.html is located and run 'http-server'. This will start up the server and make your files available at 127.0.0.1:8080.

[@covertsuperxxx1285]

would be nice if you started at the beginning your always in the middle of a project that noone knows whats going on or maybe your just trying to get watch time

[@mattvideoeditor]

This is so disappointing, I was expecting at least 4.5 minutes

[@Ramprasadmeena]

Lol

[@simondev758]

What's up?