[ PROJECT + SOURCE CODE ] Threejs Three Graces Design Concept

Рет қаралды 32,089

2 жыл бұрын

In this project, I wanted to show that creating a fancy design like this using #threejs is not as difficult as it looks. It has only 240 lines of code. The live link and the source code will be published on my GitHub soon.
Live: threejs-graces.tiiny.site
Source: github.com/ektogamat/threejs-...
Original Design: dribbble.com/shots/6767548-Th...
The GLTF used in this example was made by 3DLadnik: sketchfab.com/3DLadnik
Released as CC-BY-4.0 by Sketchfab: sketchfab.com/3d-models/3d-pr...
#creativecoding #webgl #threejsJourney

Пікірлер: 76

@elie1400 2 жыл бұрын

Wonderful work Anderson, thank you for the effort and the useful stuffs you share ❤️

@AndersonMancini 2 жыл бұрын

Thanks for your visit Elie. I hope they can help you 🙏 😊

@bhashini2536 2 ай бұрын

This is the most beautiful site design ive ever seen

@AndersonMancini 2 ай бұрын

Thank you very much ☺️

@giovanialves2626 Жыл бұрын

Cara, te acompanho desde o primeiro vídeo e tenho que dizer, que trabalho foda! Parabéns pelo conteúdo que vem trazendo 👏

@AndersonMancini Жыл бұрын

Puxa vida que legal seu feedback meu. Finalmente um brasileiro por aqui heheh. Fico feliz demais. ✌🏻😊

@OPlutarch Ай бұрын

Amazing, wonderful result ❤

@AndersonMancini Ай бұрын

Thank you so much ✌🏻 ☺️

@ayomideadejumo2068 6 ай бұрын

This is remarkably amazing 👏

@AndersonMancini 6 ай бұрын

Thank you so much ✌🏻 😊

@HuynhLuong227 2 жыл бұрын

i love this, thank you

@DanielPerez-qf7ff 4 ай бұрын

looks amazing!

@AndersonMancini 4 ай бұрын

Thank you very much.

@vasuchourasia8021 4 ай бұрын

it looks so cool

@AndersonMancini 4 ай бұрын

Thanks ☺️

@jubaaissaoui5496 Жыл бұрын

That is some good stuff right there

@ajayadav09 Жыл бұрын

This is amazing work

@AndersonMancini Жыл бұрын

Thank you very much 😊🙏🏻

@LEEKEE_0209 6 ай бұрын

Thank you for sharing :)

@GabsBaq 8 ай бұрын

Nova seguidora por aqui ! Sou brasileira que mora fora e fico super feliz em ver o trabalho impecável dos brasileiros sendo enaltecido !! Parabéns ❤

@GabsBaq 8 ай бұрын

Sou nova no three.js vc recomenda começar aprender por onde?

@AndersonMancini 7 ай бұрын

Oieee. Ahhh mas que máximo. Eu fico muotp feliz. Eu sou louco para dar palestras e falar sobre threejs em português mas nunca consegui publico por aqui. Tomara que isso mude heheh. Muito obrigado mesmo pelo seu feedback carinhoso.

@AndersonMancini 7 ай бұрын

Olha. Eu recomendo você começar pelo curso do Bruno Simon threejs-journey.xyz. vale cada centavo e vai te poupar muita dor de cabeça e tempo tentando entender sozinha as coisas. Não é algo fácil se se aprender mas o curso dele torna tudo mais fácil.

@mulualemtekle6094 2 жыл бұрын

this is just dope!!!!

@AndersonMancini 2 жыл бұрын

Thank you bro 🙏 😅

@mahmudhussinmohamed6455 2 жыл бұрын

woow man just wow

@deepak8586 Жыл бұрын

sooo amazing!!! thanks for sharing!!

@AndersonMancini Жыл бұрын

Thank you for the visit 😊

@devshahin 2 жыл бұрын

amazing

@shubhamshrivastav4294 Жыл бұрын

Damn Man you are my goals😍😍😍💯

@haoz5259 8 ай бұрын

That is awesome

@AndersonMancini 8 ай бұрын

Thank you so much ;)

@ashutoshsharma1352 Жыл бұрын

Recently i had an idea of such a project and I was working on it.

@AndersonMancini Жыл бұрын

Keep working, please. And share the results here okay? 👍🏻😊

@randeeprana5622 Жыл бұрын

Amazing

@AndersonMancini Жыл бұрын

Thanks 👍🏻😊

@ayomideadejumo2068 6 ай бұрын

Subscribed !

@aerialguy1395 2 жыл бұрын

Thanks for this. I'll definitely try to implement this light feature in my website. I that a directional light or spotlight?

@AndersonMancini 2 жыл бұрын

Thanks man. There are two lights. One is a directional light and another is a point light, because I'm using decay and dispersion to fake shadows. This keeps the performance while gets this nice effect. Shadows are very expensive for gpu. Thanks for your visit. 🙏😊

@oleksandrsimakhin9107 2 жыл бұрын

O_O Good job! 👏

@AndersonMancini 2 жыл бұрын

thanks man! 😊👍🏻

@alvin3171997 2 жыл бұрын

Love it 💯 A question: Is there’s any dynamic performance optimisation for the website? Like checking performance in mobile phone and load the approximate models with low vertices etc?

@AndersonMancini 2 жыл бұрын

Hey there. In this particular source code not yet. It is possible to achieve that using threejs LOD system. But once this is only a demo, I do not had the time to do it. But the performance in mobile can be optimized by using LOD. Thanks for your comment and visit! 👍🏻

@od1367 2 жыл бұрын

WOw this is greate

@AndersonMancini 2 жыл бұрын

Thank you very much for your feedback 😀 🙏🏻

@khs9358 Жыл бұрын

thank you

@kingsmonster8204 Жыл бұрын

When i am loading it through vs code page not showing the website it only showing loading in the text form how to fix it

@AndersonMancini Жыл бұрын

Hello there. Maybe it is something related to your node version? Can you check the console to see if there are any errors there?

@animedreamz2009 2 жыл бұрын

I have to ask since I too took Bruno’s course where did you pick up all the extra skills from? I’ve taken Yuri’s awwwards and Marious courses and still didn’t learn camera positioning like that.

@AndersonMancini 2 жыл бұрын

Hi there. I watched a lot of videos on KZfaq and a lot of searching over theeejs forum. But the most valuable content is here on KZfaq. That's why I decided to create this channel. To help others hehe. Thanks for your visit.

@helloWorldPlus 3 ай бұрын

Hello there. Do you have a video tutorial for beginners? I want to implement the lighning effect in my project.

@AndersonMancini 3 ай бұрын

Hey there. Sorry for the delay. I don't have a specific tutorial for beginners on my channel. But you can check Wael kzfaq.info/get/bejne/rrBxma-Vus3Ik2g.htmlsi=lcRO5GeFiZl9q7JC After watching his tutorials, you can study the source code for this project. It is available on my github okay?

@kart1372 Жыл бұрын

where'd you get the original sculptures model from? Did you make them in Blender?

@AndersonMancini Жыл бұрын

They are from a free source but I can't remember anymore where it came from. I guess it was sketchfab ✌🏻

@shreetimohapatra4142 Ай бұрын

Can you please do a tutorial ?? This looks so amazing

@AndersonMancini Ай бұрын

Hey there 👋🏻. Thank you so much hehe. I would love to make a longer tutorial on this, but I'm out of available time. But if you use the source code I'm sure you will be able to replicate it. I recommend the threejs-journey.xyz course. This was one of my projects after finishing that course ☺️

@shreetimohapatra4142 Ай бұрын

@@AndersonMancini Yesss, I have started with them!!! Definitely helping me out understanding the functionalities better !!!

@PhotoSlash Жыл бұрын

could this be possibly edited and hosted on shopify for research purposes?

@AndersonMancini Жыл бұрын

Hey there. I never played with shopify but I guess you can do it by hosting it in some other place and inserting this as an on shopify. The source code for this project is available on my github among many others. github.com/ektogamat/threejs-graces

@ZALEMxit Ай бұрын

opa parceiro, que trabalho foda! sou meio leigo na área, nao consigo abrir o codigo no vscode, quando tento abrir para ver ver o projeto fica uma pagina em branco escrito loading, sabe como poderia resolver? me da um força nisso?

@AndersonMancini Ай бұрын

Opa beleza. Então. Você instalou as dependências primeiro? Só rodar npm i, e depois npm run dev ou npm start, dependendo do repositório que você está usando. Eu acho que essa aula no curso do Bruno é gratis. Você pode assistir por lá. Mas tem outros tutoriais sobre isso também no KZfaq. Me fala se conseguiu tá? Abraço.

@ZALEMxit Ай бұрын

@@AndersonMancini qual o nome das dependências que precisa? poderia me dizer?

@trendorwott 5 ай бұрын

can you make tutorial of this website

@AndersonMancini 5 ай бұрын

You can have access to the source code here: github.com/ektogamat/threejs-graces

@varunsalat619 2 жыл бұрын

can you make a tutorial on it please??

@AndersonMancini 2 жыл бұрын

Hi varun. Thanks for your visit. I have a tutorial on how to use the boilerplate I created. If you follow that and change the model, you will have this here. The things I've changed here was the html part, not threejs part of that file, okay? The challenge here was to use two renderers on the same page, once the camera is in a different position in the second section and this section is visible at the same time as the first one during the scroll.

@itzazeez6662 2 жыл бұрын

I am sorry but I could not found source code i check your github too

@AndersonMancini 2 жыл бұрын

Can you check again please? I just published it. I'll update it soon again with more features. github.com/ektogamat/threejs-graces

@itzazeez6662 2 жыл бұрын

@@AndersonMancini Its wonderful I love you man

@CartierKray Жыл бұрын

Candellaa

@AndersonMancini Жыл бұрын

😊

@saipranav434 Жыл бұрын

bro can u make a vedio on how to make website like this . three js websites . i hope lots of people like it .

@AndersonMancini Жыл бұрын

Hello there. Thanks for the visit 😊. This one is not that hard. I have the source code of it available on GitHub. But let me know if you saw the source and still think a tutorial is needed and I will try to record okay?

@saipranav434 Жыл бұрын

@@AndersonMancini i only understood the reactjs file combinations and code . but not the three.js one . like the code configuration and its functionality .