Article waelyasmina.net/articles/how-to-make-an-object-rotate-around-another-object-in-three-js/ Three.js r155 update *1. 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 const textureLoader = new THREE.TextureLoader(); //Here we're assigning the texture to a variable //Then we're setting the textures's colorSpace to the SRGB Color space *const sunMap = textureLoader.load(sunTexture);* *sunMap.colorSpace = THREE.SRGBColorSpace;* const sunGeo = new THREE.SphereGeometry(16, 30, 30); const sunMat = new THREE.MeshBasicMaterial({ *map: sunMap* }); const sun = new THREE.Mesh(sunGeo, sunMat); scene.add(sun); function createPlanete(size, texture, position, ring) { //Doing the exact same thing to set the color the colorSpace of the planet's texture *const map = textureLoader.load(texture);* *map.colorSpace = THREE.SRGBColorSpace;* const geo = new THREE.SphereGeometry(size, 30, 30); const mat = new THREE.MeshStandardMaterial({ *map: map* }); const mesh = new THREE.Mesh(geo, mat); const obj = new THREE.Object3D(); obj.add(mesh); if(ring) { //Doing the exact same thing to set the color the colorSpace of the ring's texture *const ringMap = textureLoader.load(ring.texture);* *ringMap.colorSpace = THREE.SRGBColorSpace;* const ringGeo = new THREE.RingGeometry( ring.innerRadius, ring.outerRadius, 32); const ringMat = new THREE.MeshBasicMaterial({ *map: ringMap,* side: THREE.DoubleSide }); const ringMesh = new THREE.Mesh(ringGeo, ringMat); obj.add(ringMesh); ringMesh.position.x = position; ringMesh.rotation.x = -0.5 * Math.PI; } scene.add(obj); mesh.position.x = position; return {mesh, obj} } *2. The intensity values of point lights are changed. You need to pass way higher values now:* const pointLight = new THREE.PointLight(0xFFFFFF, *30000,* 300);
The best 3js content on youtube! I made my own solar system for my portfolio site and stumbled across this after but was still able to use your textures as they were looking great! im going to watch all your 3js content i discovered it 3 months ago and im hooked.
For those you are making this tutorial from scratch Update the node modules by the ones in the project and npm install!! Otherwise u ll face some issues on texture and shades Great tutorial
For anyone who has trouble with the point lights : Point lights use a physically correct unit (candela) with latest three.js releases so an intensity value of 1 is way too low . So use something higher like 2000 or more . If you try with something too high like 50000 , the planets will be all white.
What if I want to rotate a shaft to the left, but it is fixed on an object that rotates to the right? In other words, 2 rotations simultaneously and dependent on each other. The shaft is firmly attached to the object and rotates with it to the right, but rotates also around itself to the left? How does the parenting work here?
In the video's Threejs : '^0.133.0' version the Point light intensity is 2. which is enough. But in ""three": "^0.156.1"" version i have to give point light to 10000 for same effect as video. I think the point light measurement is changed in newer versions. Also textureLoader is showing image differently then original in new version. Please suggest whether to use new version or old. if new then how to update changes
@@WaelYasmina Sir Thanks a lot for updating code. Now every thing is smooth as yours. just a minor difference to AmbientLight(0x333333). i thing this also has changed. Mine is little darker than yours
hey my cube texture loader isn't working. I tried adding different textures in the background but it is just showing black screen in the background. All other textures are working fine but only the background is not working
I was having the same problem, found out that the image must be square like 1024 X 1024, even a single pixel difference like 1024 X 1025 fails to load.
Unfortunately I have no experience with Github pages. Actually I'm down to learn and make a tutorial on this but I don't think it could be ready at least in a couple weeks.
@@WaelYasmina Thanks, it's worked. Actually, I tried before but don't see the Moon, because I set position of Moon too big, I thought the position of Moon is distance from Sun to Moon, now after I move the camera to far, I see the Moon.
Hey facing one issue Like the site you have mentioned for the material of the planet is good but for sun it was quite different from the one used in video , i used another one but in bith the materials the point Light is not Working at all . Like i tried to change its coordinates as well but no effect on the other planets , i also tried changing intensity and color but no use PLS HELP i respect your content a lot
@shanayshukla2145 this is related to the node modules folder, exists more libraries in is project than the normal ones, and because of that u have that issue replace the node modules folder and npm install and is issue solved !!! In any case, @WaelYasmina can you put the npm install that u run? with just npm install parcel -g and npm install we cant get the same dependencies as you Great tutorial btw
Can this be performed in CodePen... for example put images and script in my Codepen assets folder and then import stuff into the coding window area? Do you do any tutorials with CodePen instead of Visual Studio?
You can but I think you need to go premium to be able to put the assets in their server. Feel free to check. Anyways I have already made a pen of this but I uploaded the images to an image sharing website: codepen.io/WaelYasmina/pen/wvqZjXY
Hello, good job 🙋🏻♀️ This code isn't working when i run it in terminal with ' npm run dev', can u tell me plz how can i run it? I installed and run fix audit but still can't run it on web page
Are you using a bundler? But either way here is the project files. So just follow the steps on the readme to get it to work: github.com/WaelYasmina/solarsystem
just fyi - sol is white just fyi - the center of mass of our solar system is the barycenter, and it doesn't rotate, but it does move around! And the sun & all the planets also orbit the barycenter, not the sun. So how do you deal with the gravitation force working at the speed of light? Earth is 8 light minutes from the barycenter, so we have to determine where the barycenter was 8 minutes ago and calculate from there.
Hi, I've watched your videos a lot, now I'm doing an assignment: "illustrating the steps of data structures and algorithms". (examples: illustrate the steps of the selection sort, insertion sort, binary tree) algorithm, hope you can help. thanks a lot!
@@WaelYasmina They are the same ones you have on the github, they work for me but when I put the rings on them, the ones on the planets are removed, and how can I make you see it?
Thanks! Just rotate the planets meshes after you create them. Example: const earth = createPlanete(6, earthTexture, 62); earth.obj.rotateY(Math.PI / 2);
Article
waelyasmina.net/articles/how-to-make-an-object-rotate-around-another-object-in-three-js/
Three.js r155 update
*1. 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
const textureLoader = new THREE.TextureLoader();
//Here we're assigning the texture to a variable
//Then we're setting the textures's colorSpace to the SRGB Color space
*const sunMap = textureLoader.load(sunTexture);*
*sunMap.colorSpace = THREE.SRGBColorSpace;*
const sunGeo = new THREE.SphereGeometry(16, 30, 30);
const sunMat = new THREE.MeshBasicMaterial({
*map: sunMap*
});
const sun = new THREE.Mesh(sunGeo, sunMat);
scene.add(sun);
function createPlanete(size, texture, position, ring) {
//Doing the exact same thing to set the color the colorSpace of the planet's texture
*const map = textureLoader.load(texture);*
*map.colorSpace = THREE.SRGBColorSpace;*
const geo = new THREE.SphereGeometry(size, 30, 30);
const mat = new THREE.MeshStandardMaterial({
*map: map*
});
const mesh = new THREE.Mesh(geo, mat);
const obj = new THREE.Object3D();
obj.add(mesh);
if(ring) {
//Doing the exact same thing to set the color the colorSpace of the ring's texture
*const ringMap = textureLoader.load(ring.texture);*
*ringMap.colorSpace = THREE.SRGBColorSpace;*
const ringGeo = new THREE.RingGeometry(
ring.innerRadius,
ring.outerRadius,
32);
const ringMat = new THREE.MeshBasicMaterial({
*map: ringMap,*
side: THREE.DoubleSide
});
const ringMesh = new THREE.Mesh(ringGeo, ringMat);
obj.add(ringMesh);
ringMesh.position.x = position;
ringMesh.rotation.x = -0.5 * Math.PI;
}
scene.add(obj);
mesh.position.x = position;
return {mesh, obj}
}
*2. The intensity values of point lights are changed. You need to pass way higher values now:*
const pointLight = new THREE.PointLight(0xFFFFFF, *30000,* 300);
After this everything very bright.
These tips really helped. Thanks.
The best 3js content on youtube! I made my own solar system for my portfolio site and stumbled across this after but was still able to use your textures as they were looking great! im going to watch all your 3js content i discovered it 3 months ago and im hooked.
Saying thanks is not enough. Amazing tutorial!
Why did I come across your channel so late!!!
Thank you very much. I finally found a Daniel Shiffman for Three.js :D
Omg you've just made my day with this sweet comment, thank you!
i'm starting this series, and is amaizing. Thanks so much for making it
Love how you bring it all together, very cool to see the result
Thank you Serdar!
For those you are making this tutorial from scratch
Update the node modules by the ones in the project and npm install!! Otherwise u ll face some issues on texture and shades
Great tutorial
I am facing issues but i dont understand how to update node modules.
yoo, I was trying to find whether my website concept would be possible in three.js, and you've answered all my questions!
Thanks from the Netherlands
Wow, this is very great information and you help a lot with your easy to understand explinations
Thank you so much, really helpful and easy to understand. You made it for beginners.. and it's great..
For anyone who has trouble with the point lights :
Point lights use a physically correct unit (candela) with latest three.js releases so an intensity value of 1 is way too low . So use something higher like 2000 or more . If you try with something too high like 50000 , the planets will be all white.
Thanks a lot for this video. Could follow along easily. And everything worked. Super cool.
Muito obrigado mano, suas aulas estão me ajudando muito !!
Must watch tutorial! Thank you!!
Amazing Work, This awesome
Thank you so much brother!
raw3a ya wa2el, thank you
Thank you brother!
What if I want to rotate a shaft to the left, but it is fixed on an object that rotates to the right? In other words, 2 rotations simultaneously and dependent on each other. The shaft is firmly attached to the object and rotates with it to the right, but rotates also around itself to the left?
How does the parenting work here?
In the video's Threejs : '^0.133.0' version the Point light intensity is 2. which is enough. But in ""three": "^0.156.1"" version i have to give point light to 10000 for same effect as video. I think the point light measurement is changed in newer versions.
Also textureLoader is showing image differently then original in new version. Please suggest whether to use new version or old. if new then how to update changes
Look at pinned comment
@@WaelYasmina Sir Thanks a lot for updating code. Now every thing is smooth as yours. just a minor difference to AmbientLight(0x333333). i thing this also has changed. Mine is little darker than yours
@@BilawalAli-z2m Sir, I'm facing the same issue as yours , Please help me with this. How can I fix this issue
@@nikunjgupta4507 Give intensity to higher value
Incredibly 🤩 amazing
You should help improve three js documentation. Thanks for the videos and your hard work which result in the best three js tutorial online
hey my cube texture loader isn't working. I tried adding different textures in the background but it is just showing black screen in the background. All other textures are working fine but only the background is not working
I was having the same problem, found out that the image must be square like 1024 X 1024, even a single pixel difference like 1024 X 1025 fails to load.
weirdly i get an error that THREE.object3d.add is not an instance of THREE.object3d when using your exact function.
Hi bro, my obj is rotating around the scene but I want that it rotate stopped around itself. I make this object.rotation.y += 0.5; can you help bro?
Amazing bro ,thanks a lot 🙏
I'm trying to publish this project on github pages but i can't get it to work? any assistance would be appreciated
Unfortunately I have no experience with Github pages. Actually I'm down to learn and make a tutorial on this but I don't think it could be ready at least in a couple weeks.
Great tutorial thanks
If you don't know Git, following along with this video will be impossible for you. Good thing I knew Git before watching
Uhm... I agree 100%... 🤔
Yeah!!!
This is amazing....thanks man
You're welcome!
How about the Moon ? I try to add Moon the same way with the ring but I need Moon rotate around the Earth ?
You add the moon to the earth the same exact way you added the planets to the sun.
@@WaelYasmina Thanks, it's worked. Actually, I tried before but don't see the Moon, because I set position of Moon too big, I thought the position of Moon is distance from Sun to Moon, now after I move the camera to far, I see the Moon.
heyy, i am following your tutorial but the cubetextureloader is not loading the stars or any image...
its output is just a white background
Try using my code
github.com/WaelYasmina/solarsystem
for the orbit in which planet are rotating add this
const orbit=new THREE.RingGeometry(position,position)
const orbitmaterial=new THREE.MeshBasicMaterial(
{
color: 0xaaaaaa,
wireframe: true,
opacity: 0.5,
transparent: true
}
)
const orbitMesh=new THREE.Mesh(orbit,orbitmaterial)
orbitMesh.rotation.x= -Math.PI/2
planetMesh.add(orbit)
scene.add(orbitMesh)
Great Video!
Thank you!
Hey facing one issue
Like the site you have mentioned for the material of the planet is good but for sun it was quite different from the one used in video , i used another one
but in bith the materials the point Light is not Working at all . Like i tried to change its coordinates as well but no effect on the other planets , i also tried changing intensity and color but no use
PLS HELP i respect your content a lot
Make sure you're using the MeshStandardMaterial or MeshPhongMaterial to create the other planets not the MeshBasicMaterial.
@shanayshukla2145 this is related to the node modules folder, exists more libraries in is project than the normal ones, and because of that u have that issue
replace the node modules folder and npm install and is issue solved !!!
In any case, @WaelYasmina can you put the npm install that u run? with just npm install parcel -g and npm install we cant get the same dependencies as you
Great tutorial btw
Hi, amazing tutorial, but i have a question here, i am using the same texture as you, but mine has a white translucent layer on it, any idea why?
Literally having the same issue right now and can't understand what is it
You may have left 'fog' on. I did the same mistake
Can this be performed in CodePen... for example put images and script in my Codepen assets folder and then import stuff into the coding window area? Do you do any tutorials with CodePen instead of Visual Studio?
You can but I think you need to go premium to be able to put the assets in their server. Feel free to check.
Anyways I have already made a pen of this but I uploaded the images to an image sharing website: codepen.io/WaelYasmina/pen/wvqZjXY
pointLights does not work in any projects . I dont know why! :(
Set the intensity to 10000 or more
@@WaelYasmina thats it! THANKS!
Hello, good job 🙋🏻♀️
This code isn't working when i run it in terminal with ' npm run dev', can u tell me plz how can i run it? I installed and run fix audit but still can't run it on web page
Are you using a bundler?
But either way here is the project files. So just follow the steps on the readme to get it to work: github.com/WaelYasmina/solarsystem
@@WaelYasmina
Nope i am not, yup i followed it till 4th command i have an error :
Unknown command " parcel "
Try to reinstall Parcel. And make sure to install it globaly.
This is awesome thank u man
I'm glad you like it!
Let's gooooooooooo........ 🚀🛸
meu deus isso é uma obra de arte da era binária :)
just fyi - sol is white
just fyi - the center of mass of our solar system is the barycenter, and it doesn't rotate, but it does move around! And the sun & all the planets also orbit the barycenter, not the sun.
So how do you deal with the gravitation force working at the speed of light? Earth is 8 light minutes from the barycenter, so we have to determine where the barycenter was 8 minutes ago and calculate from there.
Hi, I've watched your videos a lot, now I'm doing an assignment: "illustrating the steps of data structures and algorithms". (examples: illustrate the steps of the selection sort, insertion sort, binary tree) algorithm, hope you can help. thanks a lot!
I'm glad you do.
Data structures is not something I'm planning to create tutorials on, well at least for now. Sorry :(
Great teaching, but fan brother!!
but what about the moon?
Here I can not see the textures of Saturn and Uranus, for the rest everything works fine for me
Here everything works fine for me I can see the textures of Saturn and Uranus.
@@WaelYasmina They are the same ones you have on the github, they work for me but when I put the rings on them, the ones on the planets are removed, and how can I make you see it?
Maybe you didn't add the ring mesh to the obj.
codepen.io/WaelYasmina/pen/wvqZjXY
Im learning... how can I access the rings to rotate... seperate from planet
got it.. change const to var for ring , then add to return then access saturn.ringMesh.rotateX
can you provide the online classes?
Do you mean project files?
@@WaelYasmina no
@@WaelYasmina can you teach me gsap ? i'll pay
This is pretty cool. Do you have a github with the source?
Here you go github.com/WaelYasmina/solarsystem
How can you make it so it doesn't start in a straight line, the orbiting? Btw Awesome tut!
Thanks!
Just rotate the planets meshes after you create them.
Example:
const earth = createPlanete(6, earthTexture, 62);
earth.obj.rotateY(Math.PI / 2);
@@WaelYasmina Thank you !! :)
Music?) Why?) Hahah)
Your project isnt working.
I need some information so I can help you out. Any detail, error message, anything?
love you i looooooveeee yoooouuuuuuu please marryme
Hahaha I love you too 🤣
Great tutorial thanks