Creating my Interactive 3D portfolio: Getting sidetracked with Blender | Portfolio Journey 2

#blender #threejs #javascript
I failed at creating a basic design and instead got sidetracked in Blender, while still getting inspiration for my actual models i want to create later on.
three.js course:
threejs-journey.com/
The 3D Gallery:
lx2h8.csb.app/
The thread which solved my material issue:
blenderartists.org/t/geometry...
Object Viewer:
gltf.pmnd.rs/
My Medium Article:
/ creating-my-interactiv...

[@codewithnevo]

On a side note, I've got a discord server now: discord.gg/jRysK2HnSe I'm kind of overwhelmed by the positive and helpful feedback I've received so far. Three weeks ago I wouldn't have imagined to reach so many people who want to accompany and watch my journey to learn all of this stuff. Thank you to everyone who commented or even only left a like and a sub on my channel. This is really pushing my motivation to keep producing these videos and I'm really excited to see where I'm at in a few months with this project, because so far, I honestly haven't done too much :D The next video is coming out in a few days!

[@bohdandonchyk]

By the way, thanks for mentioning me)) won't lie, you'll boost my confidence a bit) next time don't hesitate to ask me for advice (for example about the materials problem) because if I'm not mistaken: after you applied geometry node modifier, if you go into glaze edit mode, select all, and separate them “by loose parts”, the sprinkles should become as they were before. (I don't know why it just is.)

[@codewithnevo]

Of course! Thank you, I will definitely come back to you if i'm stuck again :)

[@foxwithaplan858]

The random number is generated with the object name in mind to make sure you have a different number even if you reuse the same mesh or material in multiple objects. You can test this if you change the object's name: It will change its color. If all sprinkles are one giant mesh and hence just one object, they all have the same random number. Separated in different objects and consequently different object names (since the object name is unique) they will have different random numbers.

[@md3d519]

I also thought of doing something similar for my archviz services in the future but i still have a lot to learn in blender and photoshop let alone coding. I really can see the immense work youre putting and i hope it pays off

[@codewithnevo]

Thank you! I hope you'll get there soon. It can always be a bit overwhelming to start learning so much stuff at once. I hope you keep going so I can look up your project in the future!

[@CarlosAMaldonado]

Remember that blender materials (and their node setup) just work on blender, when importing to other software the software may get some things from the blender material like color or diffuse texture, but the logic you did in the nodes stays in blender, one easy way to go around this is to make the sprinkles real geometry by applying all modifiers and geo nodes, and then make automatic uv maps (for more complex objects is recommended to do the uv map by hand) and finally bake the material to an image texture, you can find tutorials of baking in youtube and that way you can make a new material with the basecolor connected to image you got from the baking and this will be readable for other software

[@codewithnevo]

Thank you for this explanation, I'll look up some tutorials and try this out!

[@tristangohier7188]

That's exactly what I was thinking, I don't know much about coding and websites, but I'm sure that this could work!

[@foxwithaplan858]

​@@codewithnevo Baking is included in the ThreeJS-journey tutorial. Its focus is baking light, but the material will be inevitably baked too.

[@stefanguiton]

Great work!

[@codewithnevo]

Thank you!

[@nateasis]

This is a great series. I'm an industrial designer and also used 3js to build my portfolio website. Following along to see where yours goes

[@codewithnevo]

Thank you! Would you mind sharing your site? I'm interested to see what you came up with

[@nateasis]

​@@codewithnevo not sure if I can post the link directly, but there's a link in my profile. It's nothing too crazy, just getting started with 3js!

[@codewithnevo]

@@nateasis I looked through it. Simple and clean! I like it. I also really like your product designs, they are looking great

[@official_dammyjhay90]

woow this is Awesome , 🧡

[@codewithnevo]

Thanks!

[@johnniefujita]

Bruno course is incredible... must finish it tooo

[@codewithnevo]

It really is. I highly recommend it to everyone who wants to learn three.js

[@jakobvonderessen]

you can also export webgl from unity hdrp (by the way they are merging the urp with hdrp), and unreal engine. that can be an advantage for incorporating code into three.js

[@codewithnevo]

that sounds like it could help a lot in some cases, but i haven't worked with unity in years

[@jakobvonderessen]

@@codewithnevo blender is effectively developing quite fast. but you should never torn apart, the possibility of combining it with a more extensive framework comprising other tools

[@DiverseGreen-Anon]

@@codewithnevo Altermesh might help you get blender nodes into unreal engine and export in desired formats with interactions and works with geometry nodes from blender! :D

[@NateCAnimation]

you might need to bake the sprinkle materiel down to a single texture

[@lugui]

actually, there is a "Random Per Island" node, which would have done it

[@goldenpantys6829]

Nice Video! What course is it that you are doing? And where van i find it? :)

[@codewithnevo]

Thank you so much! It is the three js journey course by Bruno Simon. This is the direct link: threejs-journey.com/

[@aneeqayounas]

To solve the sprinkle color issue not exporting, you need to use either seprate materials with seprate colors or 1 material with texture. With the nodes setup you have already create you can just bake the textures after uv mapping the sprinkles. I can give a more detailed answer if you would like.

[@codewithnevo]

I would appreciate if you could go in a bit more detail. So far I have not really touched baking

[@aneeqayounas]

@@codewithnevo I'll make a short video today and share the link its super easy to do once you understand it and useful as well

[@aneeqayounas]

Here is the link to the video: kzbin.info/www/bejne/aKTKfKhml7CIrbc Let me know if you have any questions

[@codewithnevo]

@@aneeqayounas Thank you for making the effort. I'll take a look into your tutorial! :)

[@aneeqayounas]

@@codewithnevo My pleasure!!

[@bohdandonchyk]

Could you please give me a link to this Three.js course that you talking about at the beginning? 0:09

[@codewithnevo]

Sure! threejs-journey.com/

[@bravefastrabbit770]

Great project walkthrough! But I subbed because of the soothing german accent.

[@codewithnevo]

Haha thanks!

[@bram_gunst]

What is that 3d model previeuw site?

[@codewithnevo]

I used this one: gltf.pmnd.rs/

[@kekungpaulina]

Waoo

[@codewithnevo]

Thanks!

[@daniloyt7368]

W

[@_pinkangels]

bruh a few months ago i tried to look up a tutorial for how to do this 😭😭

[@codewithnevo]

thats unfortunate. I hope you still figured it out on your own!

[@tobymdev]

basic donut sperg

[@garchu3214]

u could have just used "random per island" value inside shaders....saved u a ton of time

[@codewithnevo]

I have to try this out. Thank you!

[@theillitistpro]

Sub!

[@codewithnevo]

Thank you!