How can create scene like this site

Questions
1

Hello All Masters
i am very newcomer with three.js and i want create personal site like this blueblur , have background and on mouse hover on any object show effect and by clicked show detail and linking to another page
please describe how can create an instance like this and i do not know which subject must be learn
please guide me
thanks a lot

2

Dont think its made with threejs. You can do something similar with css and regular js. Just overlap a bunch of pictures and control them in z axis, and have those pictures react to your on mouseover and onclick events. Or do something with the x, y window coordinates. Well there are very many ways to replicate this page. The background seems to be something of a parallax scrolling effect.

3

Dear Akroob
thanks for give me your time , i used and saw wappalyzer for show all technology that used in this site , and saw threejs , I thought the same thing as you at first , but by review deeper i saw canvas dom and more effect that just implement by threejs

image
image847×615 55.2 KB

4

Okay, I took a look at the site a bit more, the only 3D elements I see are those spinning cylinders when you click on a song. If you want that effect, then all you have to do is create a cylinder, UV it, place your texture on it and have them rotate in an axis. Some of if seemed like random texture, and the others looked like the same texture, but with a bit off a starting spin offset to create the illusion of moving the whole picture.

5

Thanks a lot , Dear
i have question how can background and clickable object and show effect on object and change picture on mouse move on especial point

6

We are not married yet bro.
Like I said, multiple ways to do it. I would just slap a background image on the window, then add a bunch of images of things with alpha channel transparency, when mouse gets over it, let it do some fancy effect in CSS. Thats the gist of the things, just mouse over or mouse click the element and let it do something : some CSS effect, image change or activating a link.

7

Thanks a lot bro
God willing, you will find the love of your life as soon as possible
God bless you

8

On mobile it looks like 5 cylinders span the width of the screen, they all look like they share the same texture for each vertical section and the texture.offset is updated for each with some equation…

//set initial texture offset
cylinders.forEach((c,idx)=>{
  c.material.map.offset.x = - (1 / cylinders.length) * idx 
} 

// rotate each on animation loop
const animate => {
  cylinders.forEach((c,idx)=>{ 
    c.material.map.offset.x -= 0.01 
    if(c.material.map.offset.x <= 0){
      c.material.map.offset.x = 1
   } 
  }
}

This is primitive untested pseudo code but should give you an idea of how the textures are mapped over the cylinders for each section…

9

Thanks Dear
most important things for me is effect mouse on special object and show effect on mouse hover and change image for this requirement i want to know which subject me must be learn

10

Np,

I’ve not had a chance to look on Desktop but should do this week and can let you know

11

thanks a lot bro