• Looking back *I don't recommend* that you use that method of importing models. Here's a way better method (the first half of the video): ua-cam.com/video/f1RbD_wkGpc/v-deo.html *An even better way is to just use Vite* • Article: waelyasmina.net/articles/three-js-tutorial-for-absolute-beginners/ • To run the server you need to run *npx parcel ./src/index.html* now instead of parcel ./src/index.html • Three.js r155 updates: 1. You need way higher values for light intensity. example: const spotLight = new THREE.SpotLight(0xFFFFFF, 5000); 2. For better output results, ensure to set the colorSpace property of the textures. Check out this video to learn more about color spaces: ua-cam.com/video/6XvqaokjuYU/v-deo.html • The CubeTextureLoader requires images to have a 1:1 aspect ratio, meaning *each image should have the same height and width* . • This is the boilerplate that I'm using in my tutorials: github.com/WaelYasmina/ThreeBoilerplate
I'm halfway through the tutorial and can definitely say it's the best three.js I've ever followed by far! Tried to get into it several times, even with some paid ones some time ago but just couldn't wrap my head around it. This one is super thorough and easy to follow, big kudos to You.
This video is a time saver; if only I watched this before I jumped into three.js a few days ago. I could have saved myself some headaches. Learned my lesson. I'm here to get a good grounding in the basics. Thank you!
4:00 how to remove the scrollbar in google chrome 29:00 how to take the correct shadow 31:10 solve the pixelaton of spotlight (pixelation: the shadow is not as expected)
28:30 - DirectionalLightHelper(light) and CameraHelper(light.shadow.camera) are single handedly the best things I have learnt from all of this.. This answered SO SO many questions I had been having and had given up on because it was "just acting weird"... Now I can SEE what is happening, and now I can see the camera was too big, and far/near was just all wrong..
Only half-way through the video and I already understand what three.js is capable of. Very nice explanation and this is a really brilliant video. You got a new subscriber! Please keep up videos like this.
There were some breaking changes in three.js, apparently, because your issue is related to newer versions. A possible solution is to downgrade to 0.133.0 version by run command "npm install three@0.133.0"
For those confused about their cube texture not working, make sure your texture is in 1:1 ratio, as in, it must be a square image and rectangles don't work, thought I would clarify since the source images provided are not square and you must crop it to make it work, hope it helps
About spot light, current documentation clearly states that the default decay is 1, and if you want a constant intensity irrespective of distance, you should set decay to 0.
Could someone please explain why in "Selecting Objects from the scene" 40:27 he's put negative (-) at the beginning of the value for mousePosition.y? Why couldn't the value be the same as mousePositiong.x but having innerHeight instead of innerWidth, why did he have to put negative?
it's like using a 3D software! fantastic beginning of the tutorial! sad it stops when it gets interesting, hehe, but really good introduction, thanks a lot. edit:after having tried to get other peoples implementations i have to say, your tutorial rocks!! with all others I had quite problems often to even get it running in the first place, with another solution code-autocomplete didn't work, etc! Great Job on this tutorial :)
my package.json is : "devDependencies": { "parcel": "^2.8.3" }, "dependencies": { "three": "^0.149.0" } however I still get error whenever I put CSS into my HTML. Could anyone tell me why?
The "parcel ./src/index.html" did not work (3:17). The "npx parcel src/index.html" did work. Excellent video! The only YT video, I found, that actually works!
30:09 - When I created a "const spotLight", the plane turned grey colored and it wouldn't changed back to white colored. Can anyone help with that? Edit 1: I tried changing the position of sphereGemoetry to (1, 32, 32), but that didn't do anything to change the gray colored plane. I commented out scene.ad(ambientLight); but that made the whole scene black (like the sphere/box/plane). I tried changing it's intensity to 1. but that didn't change anything. When I changed the "const planeMaterial = new THREE.MeshStandardMaterial" to "const planeMaterial = new THREE.MeshBasicMaterial" the plane suddenly went back to being white colored. However, after adding "const spotLight = new THREE.SpotLight(0xffffff);" there was no shadows to my spheregeometry. Even when I set the "spotLight.castShadow = true;" it didn't work.
just initialize the spotlight like this: const spotLight = new THREE.SpotLight(0xFFFFFF, 100000); The 100000 in the arguments of the constructor sets the intensity to 100000. Hopes this helps.
Hello, thanks for your video ! Have just a problem for shadow and light for (first) plane in moment you change MeshBasicMaterial into MeshStandardMaterial. My scene is very dark and i dont see shadow to sphere.
Any assistance will be hugely appreciated - at 3:20 it says to type "parcel ./src/index.html" in the terminal but when i press enter, it doesn't create a dist folder and says "zsh: command not found: parcel"? I've checked npm list and parcel is definitely loaded so unsure what the problem could be? it shows as parcel@2.8.3
if anyone else has run into this issue, I found the fix. instead of just running "parcel ./src/index.html" run "npx parcel ./src/index.html" instead and all will work fine
for those who are having touble with the mouse recognition, the code in the video is slightly wrong, maybe it was corrected afterwards and i didnt see it, but to get the mouse position in the screen is: const mousePosition = new three.Vector2; window.addEventListener('mousemove', function(e){ mousePosition.x = (e.clientX / window.innerWidth) * 2 - 1; mousePosition.y = (e.clientY / window.innerHeight ) * -2 + 1; }) notice the -2 that was missing before, also make sure the size of the renderer is the same as the window, if not, this snippet is useless
For some unknown reason, on refresh, I get (phantom arrays) an 'intersects' array of length 10 and then a series of array lengths 8, even though my mouse was off the page. My sphere was included in these arrays which meant it coloured red from the start. I had to hack this workaround before I could get it to work :- if (intersects.length < 8) { for (let i = 0; i < intersects.length; i++) { if (intersects[i].object.uuid === sphereId) { intersects[i].object.material.color.set(0xFF0000); }; }; }; Maybe if someone knows why I'm getting these phantom arrays in the first place, I can remove my hack.
Do you get any error messages in the console? Anyways, here's the project repository: github.com/WaelYasmina/threetutorial Try to copy my code or run my entire project and see what you get. Tell me if the problem persists.
@@WaelYasmina So first of all, thank you for the quick reply and I must apologise for my late reply. I have checked everything again and unfortunately cannot find my mistake. But that's not so bad, because I'm still learning and I only do it as a hobby on the side. If I find motivation, I will probably try again, but I am really a complete beginner. Thanks a lot for the great video!
How can I bring the completed file and upload it to my own server // which after learning as you taught It's a great story. And I can do as you teach. But I want to publish this 3D model in the form of instruction on web in my server // But after uploading to the server, the web page shows white. nothing happened Not sure if it's a problem with localhost:1234 yours or not Please help explain. Thank you.
in line import nebula from '../img/nebula.jpg'; import stars from '../img/stars.jpg'; Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "image/jpeg". Strict MIME type checking is enforced for module scripts per HTML spec. help me please
You nailed it brother!! I suggest you please take some topics from Yuri Artiukh's channel and teach us those advanced Three.js concepts too down the line. Yuri explains well, but he does live sessions so his videos are all over 1 hour based on trial and error and not possible for the average man to devote time for. And the npm install thing he uses at the beginning gives a boiler plate with that rainbow coloured plain which he builds over. That I fail to understand. Thanks again and wishing you a bright future :D
Thank you! I'm actually not an expert, I started learning Three.js 10 or 11 months ago. The main idea of the channel is to share what I'm learning with other fellow beginners. And that by creating videos as answers/solutions to questions/problems I once faced. Which makes it easier for them to find the solution instead of putting their time into researching. Having said that, yes as long as I continue learning and experimenting the level will eventually slowly increase. Thus, I will be creating some cool unique stuff.
thank you very much for the tutorial, I think I found a small mistake. on the video "39:42", on the graph where the original coordinates are shown, instead of (480, 0) it should be (480, 476)
I think if this content translated to Arabic it will be one of the most successful content for Arab keep going and thanks for the way you explain every point
That is an amaaaaaazing explanation which covers everything I wanted to know about threejs. Thanks man! Ps: for who is struggling in understand the concepts of camera, lights raycasting and shaders, maybe taking a look on game development with Unity3d or Unreal might helps you to understand the basics. Agaubs tgabjs Wael, very nice video!
I had to add an intensity to the spotlight manually as it is undefined by default. I added it by initializing the spotlight like this: const spotLight = new THREE.SpotLight(0xFFFFFF, 100000); spotLight.position.set(-100, 100, 0); I hope this helps someone.
about the spotlight shadow at 30:50, I know from blender that whats happening there is that its proyecting a bunch of shadows, as when u see the shadow of a large tubular fluorescent light that u get different shadows bc of the different points where light is emmited. At blender you cand fix this by getting the spotlight ratio to 1, idk if there is a way in threejs..
Hey man I loved your content. I have a question? Are we able to get the wireframe from an object that we imported to the scene ? Also in 13:10 I want to use the wireframe and the completed object. So, the wireframe will wrap the ball. I think I am going to create 2 identical object one with wireframe and the other not, right?
I am having trouble showing up error : @parcel/core: Failed to resolve '.js/scripts.js' from './src/index.html' @parcel/resolver-default: Cannot load file './.js/scripts.js' in './src'. Did you mean './js/scripts.js'? Can you help me out here? Thank you!
were you able to find a solution ? i'm a total beginner and i'm really thinking of giving up because its taking me 3 hours to just do what the tutorial does in 3 minutes
I would like to know what application is used in the set up section as I can't find a way to enter code anywhere. If anyone would be so kind as to tell me, I would be grateful.
Going through this tutorial but not sure why when I add orbit controls I lose everything, screen just goes white. I'm using live server to view the html from vs code. I also installed parcel but it doesn't show any texture(s) or color for the object, just black. When I add the orbit controls the live server and npx server go white, the parcel server never changes when refreshing for anything. Thx
Update, had to dig around and use: const orbit = new OrbitControls(camera, document.body); instead of const orbit = new OrbitControls(camera, renderer.domElement);
• Looking back *I don't recommend* that you use that method of importing models.
Here's a way better method (the first half of the video): ua-cam.com/video/f1RbD_wkGpc/v-deo.html
*An even better way is to just use Vite*
• Article: waelyasmina.net/articles/three-js-tutorial-for-absolute-beginners/
• To run the server you need to run *npx parcel ./src/index.html* now instead of parcel ./src/index.html
• Three.js r155 updates:
1. You need way higher values for light intensity.
example:
const spotLight = new THREE.SpotLight(0xFFFFFF, 5000);
2. For better output results, ensure to set the colorSpace property of the textures.
Check out this video to learn more about color spaces: ua-cam.com/video/6XvqaokjuYU/v-deo.html
• The CubeTextureLoader requires images to have a 1:1 aspect ratio, meaning *each image should have the same height and width* .
• This is the boilerplate that I'm using in my tutorials: github.com/WaelYasmina/ThreeBoilerplate
I can't do this parcel./src/index.html
@@SuperEdits-y5d It's npx parcel ./src/index.html
@@WaelYasmina everything worked out thanks
@@WaelYasmina do you happen to have any telegrams
@@WaelYasmina I have something stopped working can you help
you don't know how hungry I was for these content dude... THANKS!! I'm lovin it!!!
I like those kind of tutorial. Simple, explicit, but straight to the point. No stoopid intro, camera or cringe transitions
This is absolute gold! Thanks for putting this playlist together. This is now my entire learning journey for the next few months 🙌
I'm halfway through the tutorial and can definitely say it's the best three.js I've ever followed by far! Tried to get into it several times, even with some paid ones some time ago but just couldn't wrap my head around it.
This one is super thorough and easy to follow, big kudos to You.
Hey, did you face any issue with the spotlight not hitting the subject
thanks for the review, was useful
I faced the same problem, set spotLight.decay to 0 then voila; it cast lights now@@mohammedhashim6242
I am not very new to Three JS - but this video has definitely inspired me to do some more stuff in Three JS. Thank you!
This video is a time saver; if only I watched this before I jumped into three.js a few days ago. I could have saved myself some headaches. Learned my lesson.
I'm here to get a good grounding in the basics. Thank you!
Very well explained!!! You go into the meaning of every parameter and explain it with simple illustrations. Thank you for your effort.
Excellent channel, very clearly explained. You definitely deserve more subscribers and likes! Keep up the good work
This is by far the best tutorial on the subject. The allround 3d part was really helpful.
Just found yr channel. I'm def following the entire series!
Awesome, thank you!
thanks a lot .. 💙
free three js tutorials are very rare on youtub
Keep an eye on the channel, because I'll make sure they will not stay as rare as they have been ;)
This is how a tutorial should be. Thank you! Keep up the good work.
4:00 how to remove the scrollbar in google chrome
29:00 how to take the correct shadow
31:10 solve the pixelaton of spotlight (pixelation: the shadow is not as expected)
**Khaby Lame reaction**
28:30 - DirectionalLightHelper(light) and CameraHelper(light.shadow.camera) are single handedly the best things I have learnt from all of this..
This answered SO SO many questions I had been having and had given up on because it was "just acting weird"... Now I can SEE what is happening, and now I can see the camera was too big, and far/near was just all wrong..
Only half-way through the video and I already understand what three.js is capable of.
Very nice explanation and this is a really brilliant video. You got a new subscriber!
Please keep up videos like this.
Thank you!
Excellent tutorial, a very complete introduction to this incredible library :)
I'm glad you think so, thank you Abraham!
25:35 after add(directionalLight) my plane color doesnt turn to light, it's gray and grid show on bottom plane ???
There were some breaking changes in three.js, apparently, because your issue is related to newer versions. A possible solution is to downgrade to 0.133.0 version by run command "npm install three@0.133.0"
TNice tutorials is THE most helpful tutorial on UA-cam imo. I am starting production in Hardstyle, and I find soft soft really useful
9:11 I don't know why when i want to use camera.position.z , there is no position property in the drop-down list
Someone kindly help 🙏😭
Type it like that, save, then open the console and see if this gives you an error.
@@WaelYasmina yes it worked thank you very much 🙏♥️
For those confused about their cube texture not working, make sure your texture is in 1:1 ratio, as in, it must be a square image and rectangles don't work, thought I would clarify since the source images provided are not square and you must crop it to make it work, hope it helps
Bro how do you solve that error?
My cube texture also not working.
@@khantzawhein2605 which texture are you using ?
You're a life saver man. I was stuck on this!
Thanks for this, couldn't figure out why it didn't load!
I just clicked your video, and my god, did i skip anything? You did succeed helping me understand this amazing library ❤
this is an amazing job!!!!! Your really clearly explained very well and I loved the evolution of the content description.
Thank you so much. :) :) :)
this is the most perfect tutorial I've ever seen, great work!
simply the best three.js tutorial out there! thanks man.
I thank you so much for what you are doing, this has been the most helpful source material to learn Three. Js
About spot light, current documentation clearly states that the default decay is 1, and if you want a constant intensity irrespective of distance, you should set decay to 0.
Is that why lights seem kinda darker at my side than his? everything looks lot darker than it looks in the video
Thank sir
29:21 regarding the spotLight section,
increasing the intensity value will result in a lighting effect.
const spotLight = new THREE.SpotLight(0xFFFFFF);
spotLight.position.set(-100, 100, 0);
spotLight.castShadow = true;
scene.add(spotLight);
const options = {
sphereColor: '#ffea00',
wireframe: false,
speed: 0.01,
angle: 0.03,
penumbra: 0.5,
intensity: 50000
};
gui.add(options, 'intensity', 0, 100000);
thanks man
great help, thanks a lot!❤
thanks 👍
What a great intro! Thank you!
When I use the type="module" on the script i have a problem in the website with cors, something about a policy, how can I fix that?? 1:55
This is so so deep, detail and complete lesson, thankyou for providing this
No problem!
Fantastic tutorial, well explained/organized. thanks so much
شكرا جزيلا يا بيه
This is so great brother straight to the point and very organized/informational.
hi great tutorial! i have trouble in 28:18 i did every thing like you did but i still cant see the shadow
Me too, did u find the issue?
perfect tutorial for learning, just play with the values to get a better idea
I really Love this video how he have explained, camera, Sean, position, look at etc ❣❤❤❤
Thank You sir! Your teaching method is amazing. I have learnt a lot.
Thank you very much ! Very helpful !
Please make next serie on the immediate or advanced levels.
Sure thing!
Could someone please explain why in "Selecting Objects from the scene" 40:27 he's put negative (-) at the beginning of the value for mousePosition.y? Why couldn't the value be the same as mousePositiong.x but having innerHeight instead of innerWidth, why did he have to put negative?
I think because the direction of of window Y axis is reverse of the Camera
Thankyou brother i found the best tutorial for three js now.
it's like using a 3D software! fantastic beginning of the tutorial! sad it stops when it gets interesting, hehe, but really good introduction, thanks a lot.
edit:after having tried to get other peoples implementations i have to say, your tutorial rocks!! with all others I had quite problems often to even get it running in the first place, with another solution code-autocomplete didn't work, etc! Great Job on this tutorial :)
Thanks for this tutorial! It's amazing. You made my day!
@3:14 --> parcel ./src/index.html
looks like parcel had to be installed globally first
Add *npx* at the beginning of the command.
my package.json is :
"devDependencies": {
"parcel": "^2.8.3"
},
"dependencies": {
"three": "^0.149.0"
}
however I still get error whenever I put CSS into my HTML. Could anyone tell me why?
The "parcel ./src/index.html" did not work (3:17). The "npx parcel src/index.html" did work. Excellent video! The only YT video, I found, that actually works!
I used the comand but it still didnt worked. It tells me "Failed to resolve 'main.css' from './src/index.html' even after i deleted the css
Why when I type npm init in the terminal it says the term npm is not recognized as the name of a cmdlet…
Great tips and insights here- Thanks for sharing!
Thank you so much for this course, it's really great, good luck in your life!
30:09 - When I created a "const spotLight", the plane turned grey colored and it wouldn't changed back to white colored. Can anyone help with that?
Edit 1: I tried changing the position of sphereGemoetry to (1, 32, 32), but that didn't do anything to change the gray colored plane. I commented out scene.ad(ambientLight); but that made the whole scene black (like the sphere/box/plane). I tried changing it's intensity to 1. but that didn't change anything. When I changed the "const planeMaterial = new THREE.MeshStandardMaterial" to "const planeMaterial = new THREE.MeshBasicMaterial" the plane suddenly went back to being white colored. However, after adding "const spotLight = new THREE.SpotLight(0xffffff);" there was no shadows to my spheregeometry. Even when I set the "spotLight.castShadow = true;" it didn't work.
spotLight.position.set(-10, 50, 0);
spotLight.intensity=500;
spotLight.angle=1
spotLight.castShadow=true;
--This Helped ME!
just initialize the spotlight like this:
const spotLight = new THREE.SpotLight(0xFFFFFF, 100000);
The 100000 in the arguments of the constructor sets the intensity to 100000. Hopes this helps.
I have the same problem. If some one solve it, please help me!! I enable the spotLight but the plane is still gray!!
Hello, thanks for your video ! Have just a problem for shadow and light for (first) plane in moment you change MeshBasicMaterial into MeshStandardMaterial. My scene is very dark and i dont see shadow to sphere.
Wow, this is amazing and well explained, good job here
Yes sir, you succeeded to teach us. Thanks so much
You helped me out a lot. Thank you very much!
Any assistance will be hugely appreciated - at 3:20 it says to type "parcel ./src/index.html" in the terminal but when i press enter, it doesn't create a dist folder and says "zsh: command not found: parcel"? I've checked npm list and parcel is definitely loaded so unsure what the problem could be? it shows as parcel@2.8.3
if anyone else has run into this issue, I found the fix. instead of just running "parcel ./src/index.html" run "npx parcel ./src/index.html" instead and all will work fine
@@here2code for me it didn't worked
can anyone tell how they get black background which i dont get
This is a very good tutorial i ever seen . many many thanks
for those who are having touble with the mouse recognition, the code in the video is slightly wrong, maybe it was corrected afterwards and i didnt see it, but to get the mouse position in the screen is:
const mousePosition = new three.Vector2;
window.addEventListener('mousemove', function(e){
mousePosition.x = (e.clientX / window.innerWidth) * 2 - 1;
mousePosition.y = (e.clientY / window.innerHeight ) * -2 + 1;
})
notice the -2 that was missing before, also make sure the size of the renderer is the same as the window, if not, this snippet is useless
Thanks a lot for that
For some unknown reason, on refresh, I get (phantom arrays) an 'intersects' array of length 10 and then a series of array lengths 8, even though my mouse was off the page. My sphere was included in these arrays which meant it coloured red from the start. I had to hack this workaround before I could get it to work :-
if (intersects.length < 8) {
for (let i = 0; i < intersects.length; i++) {
if (intersects[i].object.uuid === sphereId) {
intersects[i].object.material.color.set(0xFF0000);
};
};
};
Maybe if someone knows why I'm getting these phantom arrays in the first place, I can remove my hack.
These phantom arrays continue until I move the cursor across the page. It then reverts to an empty array untill I move the cursor over an object(s).
Thanks so much, you're a life saver. I was on the verge on giving up when I saw your comment. I can't thank you enough
Awesome tutorial, great work man!
Thank you Yuri!
I have a problem with the "cubeTextureLoader":
I did everything 1:1 as in the tutorial, but I still have a black background. At timestamp 36:12 ...
Do you get any error messages in the console?
Anyways, here's the project repository: github.com/WaelYasmina/threetutorial
Try to copy my code or run my entire project and see what you get.
Tell me if the problem persists.
@@WaelYasmina So first of all, thank you for the quick reply and I must apologise for my late reply. I have checked everything again and unfortunately cannot find my mistake. But that's not so bad, because I'm still learning and I only do it as a hobby on the side. If I find motivation, I will probably try again, but I am really a complete beginner. Thanks a lot for the great video!
How can I bring the completed file and upload it to my own server // which after learning as you taught It's a great story. And I can do as you teach. But I want to publish this 3D model in the form of instruction on web in my server // But after uploading to the server, the web page shows white. nothing happened Not sure if it's a problem with localhost:1234 yours or not Please help explain. Thank you.
parcel build ./src/index.html
in line
import nebula from '../img/nebula.jpg';
import stars from '../img/stars.jpg';
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "image/jpeg". Strict MIME type checking is enforced for module scripts per HTML spec.
help me please
Awesome! You are my precursor.
You nailed it brother!!
I suggest you please take some topics from Yuri Artiukh's channel and teach us those advanced Three.js concepts too down the line. Yuri explains well, but he does live sessions so his videos are all over 1 hour based on trial and error and not possible for the average man to devote time for. And the npm install thing he uses at the beginning gives a boiler plate with that rainbow coloured plain which he builds over. That I fail to understand.
Thanks again and wishing you a bright future :D
Thank you!
I'm actually not an expert, I started learning Three.js 10 or 11 months ago. The main idea of the channel is to share what I'm learning with other fellow beginners. And that by creating videos as answers/solutions to questions/problems I once faced. Which makes it easier for them to find the solution instead of putting their time into researching.
Having said that, yes as long as I continue learning and experimenting the level will eventually slowly increase. Thus, I will be creating some cool unique stuff.
@@WaelYasmina awesome!!
@@WaelYasmina I was facing some of the same problems. You presented all the solutions I needed. I really appreciate you for doing this.
thank you very much for the tutorial, I think I found a small mistake. on the video "39:42", on the graph where the original coordinates are shown, instead of (480, 0) it should be (480, 476)
Last this video I hear you speak vertex shader and fragment, wait you make it. Thanks🎉🎉🎉
I think if this content translated to Arabic it will be one of the most successful content for Arab keep going and thanks for the way you explain every point
Hello there, 31:00 I have the same pixeling of shadow with spot light
when in terminal, i dont see the left part .. with tabs, explorer, etc .. just the stuff like cmd
That is an amaaaaaazing explanation which covers everything I wanted to know about threejs. Thanks man!
Ps: for who is struggling in understand the concepts of camera, lights raycasting and shaders, maybe taking a look on game development with Unity3d or Unreal might helps you to understand the basics. Agaubs tgabjs Wael, very nice video!
Thanks a lot for this very complete tutorial !
Very useful! Thanks a lot, man!
Very good tutorial, clear and to the point.
Thank you Oumayma!
I needed this. Thank you
Thank you so much for this amazing tutorial
My pleasure!
Great Tutorial!!
Thanks for the video, very helpful and well explained. Off to make so soft
I am unable to load the .glb file and no instance of it is created in the dist folder when I save it.
You should try to import file intead of using URL class. At least It worked for me.
Thank You very much! You are an amazing teacher!
I had to add an intensity to the spotlight manually as it is undefined by default.
I added it by initializing the spotlight like this:
const spotLight = new THREE.SpotLight(0xFFFFFF, 100000);
spotLight.position.set(-100, 100, 0);
I hope this helps someone.
it does thanks
thanksss
great help, thanks a lot!
Thanks a lot friend
Saved me a big headache! I rewound back to the beginning of the lighting section, thinking I had made a mistake somewhere.
about the spotlight shadow at 30:50, I know from blender that whats happening there is that its proyecting a bunch of shadows, as when u see the shadow of a large tubular fluorescent light that u get different shadows bc of the different points where light is emmited. At blender you cand fix this by getting the spotlight ratio to 1, idk if there is a way in threejs..
nvm its the angle...
Very well made tutorial, thank you!
this really looks cumbersome in oppose to game engines or 3D applications. such a headacge for simple tasls.
This videos so helpful, thank you so much!!
39:44 shouldn't the original y-value for the point be 476?
amazing tutorial
Love this tutorial, thank you.
I want to ask if I am learning web development is it helpful for me?
you are a good teacher ❤❤🙌🙌
why i can't install parcel?
Hey man I loved your content. I have a question? Are we able to get the wireframe from an object that we imported to the scene ? Also in 13:10 I want to use the wireframe and the completed object. So, the wireframe will wrap the ball. I think I am going to create 2 identical object one with wireframe and the other not, right?
Can three js be used with node js and express? Because I tried to render models on ejs pages using node and express but I couldn't do it.
Very helpful explanation! Thanks
in your videos , new feature of youtube audio track is not find.. why?
I am having trouble showing up error : @parcel/core: Failed to resolve '.js/scripts.js' from './src/index.html'
@parcel/resolver-default: Cannot load file './.js/scripts.js' in './src'.
Did you mean './js/scripts.js'?
Can you help me out here? Thank you!
were you able to find a solution ? i'm a total beginner and i'm really thinking of giving up because its taking me 3 hours to just do what the tutorial does in 3 minutes
I would like to know what application is used in the set up section as I can't find a way to enter code anywhere. If anyone would be so kind as to tell me, I would be grateful.
Thank you so much brother this is a great three.js tutorial
You are welcome!
I am getting an error "The specified module could not be found" why and how to solve it?
I dont even skip anything. Very wow tutorial
for the question at 30:55
yes it still gives pixelated issue it was not ur computer performance issue
Going through this tutorial but not sure why when I add orbit controls I lose everything, screen just goes white. I'm using live server to view the html from vs code. I also installed parcel but it doesn't show any texture(s) or color for the object, just black. When I add the orbit controls the live server and npx server go white, the parcel server never changes when refreshing for anything. Thx
Update, had to dig around and use: const orbit = new OrbitControls(camera, document.body); instead of const orbit = new OrbitControls(camera, renderer.domElement);
parcel 'path to html file' doesn't work, instead type thi command 👉 npx parcel 'path to html file'